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);
});