使用原生js封装Ajax函数

对与原生Ajax的封装，依然需要遵循请求的四个步骤：

　　1) 创建XMLHttpRequest对象;

　　2) 监听onreadstatechange函数;

　　3) 使用open函数添加参数;

　　4) 使用send函数发送请求；

首先，封装创建XHR的函数

/**
 * createXHR()
 * 创建XHR兼容对象
 */
function createXHR() {
    if (typeof XMLHttpRequest ！== ‘undefined’) {
        return new XMLHttpRequest();
    }   else if (typeof ActiveXObject !== 'undefined') {
        var version = [
            'MSXML2.XMLHttp.6.0',
            'MSXML2.XMLHttp.3.0',
            'MSXML2.XMLHttp'
        ];
        for (var i = 0; i < version.length; i++) {
            try {
                return new ActiveXObject(version[i]);
            } catch(e) {
                console.log(e);
            }
        }
    } else {
        throw new Error('您的系统或者浏览器不支持XHR对象！');
    }
}  

封装数据处理函数

/**
 * params(data)
 * 处理数据，ajax以参数的形式传递数据
 * @ param {any} data  对象形式的数据源
 * @ return string 处理完成的数据，字符串
 */
function params(data){
    var arr = [];
    for(var i in data){
        arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
    }
    return arr.join("&");
}

开封装Aja函数

/**
 * my_ajax(obj)
 * 原生封装的Ajax函数
 * @ param {any} obj 调用数需要传入的一系列参数，如：url，data等
 * @ return null
 */
function my_ajax(obj) {
    var xhr = createXHR();
    obj.url = obj.url + "?rand=" + Math.random(); // 清除缓存,如需要使用缓存数据，可以不写
    obj.data = params(obj.data);      // 转义字符串
    if(obj.method === "get"){      // 判断使用的是否是get方式发送
        obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
    }
    // 异步
    if(obj.async === true){
        // 异步的时候需要触发onreadystatechange事件
        xhr.onreadystatechange = function(){
            // 执行完成
            if(xhr.readyState == 4){
                callBack();
            }
        }
    }
    xhr.open(obj.method,obj.url,obj.async);  // false是同步 true是异步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
    if(obj.method === "post"){
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(obj.data);
    }else{
        xhr.send(null);
    }
    // xhr.abort(); // 取消异步请求
    // 同步
    if(obj.async === false){
        callBack();
    }
    // 返回数据
    function callBack(){
        // 判断是否返回正确
        if(xhr.status == 200){
            obj.success(xhr.responseText);
        }else{
            obj.Error("获取数据失败，错误代号为："+xhr.status+"错误信息为："+xhr.statusText);
        }
    }
}

至此，整个与原生的ajax就已经等装好了，下面调用以下：

// 调用自己等装好的my_ajax函数
// 当点击页面时，请求就会发出去；
var html = document.getElementsByTagName("html")[0];
html.onclick = function(){
    my_ajax({
        "method" : "post",
        "url" : "demo.php",
        "data" : {
            "name" : "gao",
            "age" : 100,
            "num" : "12346&598"
        },
        "success" : function(data){
            console.log(data);
        },
        "Error" : function(text){
            console.log(text);
        },
        "async" : true //是否异步
    });
}