原生js封装ajax

function ajax(params) {
    params = params || {};
    params.data = params.data || {};
    var json = params.jsonp ? jsonp(params) : json(params);
    function json(params) {
        params.type = (params.type || 'GET').toUpperCase(); 
        params.data = formatParams(params.data);
        var xhr = createXHR();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var response = null;
                    var type = xhr.getResponseHeader("Content-Type");
                    if (type.indexOf("xml") !== -1 && xhr.responseXML) {
                        response = xhr.responseXML;
                    }
                    else if (type === "application/json") {
                        response = JSON.parse(xhr.responseText)
                    }
                    else {
                        response = xhr.responseText;
                    }
                    params.success && params.success(response);
                }
                else {
                    params.error && params.error(xhr.status);
                }
            }
        };
        if (params.type === "GET") {
            xhr.open(params.type, params.url + "?" + params.data, true);
            xhr.send(null)
        }
        else {
            xhr.open(params.type, params.url, true);
            xhr.setRequestHeader("content-Type", "application/x-www-form-urlencoded;charset = utf-8");
            xhr.send(params.data);
        }
    }
    function jsonp(params) {
        var callbackName = params.jsonp;
        params.data["callback"] = callbackName;
        var data = formatParams(params.data);
        var head = docuement.getElementsByTagName("head")[0];
        var script = document.createElement("script");
        head.appendChild(script);
        window[callbackName] = function (json) {
            head.removeChild(script);
            clearTimeout(script.timer);
            window[callbackName] = null;
            params.success && params.success(json);
        }
        script.src = params.url + "?" + data;
        if (params.time) {
            script.timer = setTimeout(function () {
                head.removeChild(script);
                window[callbackName] = null;
                params.error && params.error({
                    message: "超时"
                })
            }, params.time)
        }
    }
    // 创建XHR
    function createXHR() {
        if (typeof XMLHttpRequest !== "undefined") {
            return  new XMLHttpRequest();
        }
        else if (typeof ActiveXObject !== "undefined") {
            if (typeof arguments.callee.acticeXString !== "string") {
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"], i, len;
                for (i = 0, len = versions.length; i < len; i++) {
                    try {
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    }
                    catch (ex) {
                        // skip
                    }
                }
            }
           return  new ActiveXObject(arguments.callee.activeXString);
        }
        else {
            throw new Error("no xhr in object available");
        }
    }
    // 格式化参数
    function formatParams(data) {
        var arr = [];
        for (var key in data) {
            arr.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
        }
        arr.push("num" + Math.random());
        return arr.join("&")
    }
}

调用

ajax({
    url: 'test.php', // 请求地址
    type: 'POST', // 请求类型，默认是GET
    data: {name: '异步请求'}, // 数据传输
    success: function (res) { // 请求成功回调函数
        console.log(JSON.parse(res));
    },
    error: function (error) {} // 请求失败回调函数   
})

参考链接：

 

使用原生JavaScript实现AJAX、JSONP