zoukankan      html  css  js  c++  java
  • ajax封装----原生

    /*--------------  示例一  ----------------*/
    ajax({   url:
    "https://m.baidu.com/su", //请求地址   type: "POST", //请求方式   data: { wd:'te'}, //请求参数   dataType: "json",   success: function (response, xml) {     // 此处放成功后执行的代码     console.log(response,xml);   },   error: function (status) {     console.log(status);   } }); function ajax(options) {   options = options || {};   options.type = (options.type || "GET").toUpperCase();   options.dataType = options.dataType || "json";   var params = formatParams(options.data);   //创建 - 非IE6 - 第一步   if (window.XMLHttpRequest) {     var xhr = new XMLHttpRequest();   } else { //IE6及其以下版本浏览器     var xhr = new ActiveXObject('Microsoft.XMLHTTP');   }   //接收 - 第三步   xhr.onreadystatechange = function () {     if (xhr.readyState == 4) {       var status = xhr.status;       if (status >= 200 && status < 300) {         options.success && options.success(xhr.responseText, xhr.responseXML);       } else {         options.error && options.error(status);       }     }   }   //连接 和 发送 - 第二步   if (options.type == "GET") {     xhr.open("GET", options.url + "?" + params, true);     xhr.send(null);   } else if (options.type == "POST") {     xhr.open("POST", options.url, true);     //设置表单提交时的内容类型     xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");     xhr.send(params);   } } //格式化参数 function formatParams(data) {   var arr = [];   for (var name in data) {     arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));   }   arr.push(("v=" + Math.random()).replace(".",""));   return arr.join("&"); }




    /*----------- 示例二 ---------------*/
    function Ajax(type, url, data, success, failed){
        // 创建ajax对象
        var xhr = null;
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
        } else {
            xhr = new ActiveXObject('Microsoft.XMLHTTP')
        }
     
        var type = type.toUpperCase();
        // 清除缓存
        var random = Math.random();
     
        if(typeof data == 'object'){
            var str = '';
            for(var key in data){
                str += key+'='+data[key]+'&';
            }
            data = str.replace(/&$/, '');
        }
     
        if(type == 'GET'){
            if(data){
                xhr.open('GET', url + '?' + data, true);
            } else {
                xhr.open('GET', url + '?t=' + random, true);
            }
            xhr.send();
     
        } else if(type == 'POST'){
            xhr.open('POST', url, true);
            // 如果需要像 html 表单那样 POST 数据,请使用 setRequestHeader() 来添加 http 头。
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(data);
        }
     
        // 处理返回数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.status == 200){
                    success(xhr.responseText);
                } else {
                    if(failed){
                        failed(xhr.status);
                    }
                }
            }
        }
    }
     
    // 调用
    var data= {name:'asher',sex:'male'};
    Ajax('get', './data.json', data, function(data){
        console.log(data);
    }, function(error){
        console.log(error);
    });
     
  • 相关阅读:
    Atitit 编程语言原理与概论attilax总结
    Atitit.attilax软件研发与项目管理之道
    Atitit.研发团队与公司绩效管理的原理概论的attilax总结
    Atitit.软件兼容性原理与实践 v3 q326.docx
    Atitit.html css  浏览器原理理论概论导论attilax总结
    atitit.http原理与概论attilax总结
    Atitit.并发编程原理与概论 attilax总结
    Atitit selenium3 新特性
    asp.net里获取当前时间,并字符串格式化转换(转)
    软件设计师
  • 原文地址:https://www.cnblogs.com/zhou195/p/8086245.html
Copyright © 2011-2022 走看看