【方法】原生js实现方法ajax封装

/* 参数说明
* type【String】 请求方式（'POST'或'GET'） 默认设置'GET'方式
* dataType【String】 获取到的后台数据格式 默认'JSON'格式
* async【String】 是否异步执行 默认true异步执行
* data【Object】 请求参数
* success【Function】 成功回调函数
* fail【Function】 失败回调函数
*/

function ajax({type, dataType, async, data, url, success, fail}) {
　　type = (type || "GET").toUpperCase();
　　dataType = dataType || 'json';
　　async = async || true;
　　var getParams = function (data) { // 将对象拼接成字符串形式
　　　　var arr = [];
　　　　for (var param in data) {
　　　　　　arr.push(encodeURIComponent(param) + '=' + encodeURIComponent(data[param]));
　　　　}
　　　　return arr.join('&');
　　}
　　var params = getParams(data),
　　xhr;


    　　if (window.XMLHttpRequest) {
        　　　　xhr = new XMLHttpRequest();
    　　} else {
        　　　　xhr = new ActiveXObject('Microsoft.XMLHTTP')
    　　}
    　　xhr.onreadystatechange = function () {
        　　　　if (dataType === 'json') {
            　　　　　　if (xhr.readyState == 4) {
                　　　　　　　　var status = xhr.status;
                　　　　　　　　if (status >= 200 && status < 300) {
                    　　　　　　　　　　success && success(xhr.responseText, xhr.responseXML); // 判断success回调函数的存在并执行函数
                　　　　　　　　} else {
                    　　　　　　　　　　fail && fail(status); // 判断fail回调函数的存在并执行函数
                　　　　　　　　}
            　　　　　　}
        　　　　} else {
            　　　　　　if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                　　　　　　　　var oScript = document.createElement('script');
                　　　　　　　　document.body.appendChild(oScript);



                　　　　　　　　var callbackname = 'monoplasty'
                　　　　　　　　oScript.src = opt.url + "?" + params + '&callback=' + callbackname;



                　　　　　　　　window['monoplasty'] = function (data) {
                    　　　　　　　　　　success(data);
                    　　　　　　　　　　document.body.removeChild(oScript);
                　　　　　　　　};
            　　　　　　}
        　　　　}
    　　};
    　　if (type == 'GET') {
        　　　　xhr.open("GET", url + '?' + params, async);
        　　　　xhr.send(null);
    　　} else if (type == 'POST') {
        　　　　xhr.open('POST', url, async);
        　　　　xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        　　　　xhr.send(params);
    　　}
}

 

【调用示例】

ajax({
    url: "", 
    type: 'GET', 
    data: {
        name: 'monoplasty',
        age: '23',
        email: 'monoplasty@aliyun.com'
    },
    success: function(response, xml) {
        console.log(response); 
    },
    fail: function(status) {
        console.log('状态码为' + status); 
    }
});

 

【参考地址】https://blog.csdn.net/monoplasty/article/details/80315147