ajax请求的封装

1、原生的ajax

/**
 *
 * @param callback  回调函数，处理响应结果
 * @param method   请求方式
 * @param url    请求地址
 * @param async  同步/异步（true:异步，false:同步）
 * @param params  参数(`txtUser=xxx&txtPwd=xxx`)
 */
function ajax(obj) {
    obj.method = (obj.method || 'get').toLowerCase();//忽略请求方式的大小写
    //设置同步异步值，如果没有，则为true
    obj.async=obj.async||true;
   //    1、创建一个XMLHttpRequest对象（考虑了兼容性）
    let xhttp = new XMLHttpRequest()||new ActiveXObject('Microsoft.XMLHTTP');
    //    2、设置事件处理程序
    xhttp.onreadystatechange = function () {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            obj.callback(xhttp.responseText);
        }
    };

    if (obj.method == 'get' && obj.params) {
        obj.url=obj.url+'?'+obj.params
    }
    //3、设置请求相关的数据
    xhttp.open(obj.method, obj.url, obj.async);
    if (obj.method == 'post') {
        //设置请求头
        xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        //4、发送请求
        xhttp.send(obj.params);//post请求
    }else {
        //4、发送请求
        xhttp.send()
    }
}

2、封装的ajax，挂载到window上

在原生的ajax基础上：
1、支持用户传输数据时可以传对象
2、响应回来的数据，转成json对象

(function () {
    /**
     * ajax请求封装
     * @param url  请求地址
     * @param method 请求方式
     * @param data 传递的参数
     * @param async 同步/异步，默认为true(异步)
     * @param success 响应成功的处理函数
     * @param dataType 参数类型
     */
    function ajax({url, method, data, async, success, dataType}) {
//    参数处理
        method = (method || 'get').toLocaleLowerCase();//请求方式默认值设置,并对对请求方式大小写进行处理
        async = async || true;//同步or异步，默认为true（异步）
        dataType = dataType || 'json';
        success = success || function () {
        }

//1、创建xhr对象(考虑IE的兼容性)
        let xhrHttp = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
//    参数处理：如果是get请求，参数要加载url后面
        data = _objectToString(data);
//    判断是否为get请求，如果是，将data和url进行拼接
        if (method == 'get') {//toLocaleLowerCase()统一转为小写
            url = url + '?' + data
        }
//2、设置请求
        xhrHttp.open(method, url, async)
//3、设置事件处理程序
        xhrHttp.onreadystatechange = function () {
        	if (xhrHttp.readyState !== 4) return;
           if (xhrHttp.status >= 200 && xhrHttp.status <= 300) {
                //响应结果进行处理
                success(_dataOperation(dataType, xhrHttp));
            }
        }
//4、发送请求
//    判断是否为post请求，如果是，则设置请求头
        if (method == 'post') {
            xhrHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhrHttp.send(data)
        } else {
            xhrHttp.send()
        }
    }

    /**
     * 将请求传递的参数进行处理
     * @param data
     * @returns {string}
     * @private
     */
    function _objectToString(data) {
        if (typeof data == 'object') {//传递的参数是对象
            let arr = [];
            for (let key in data) {
                arr.push(key + '=' + data[key])//通过'='链接对象中的键名和键值，并push进数组
            }
            data = arr.join('&');//通过'&'连接成字符串
        }
        return data;
    }

    /**
     * 对响应结果的数据进行处理
     * @param dataType 参数类型
     * @param xhrHttp
     * @returns {string|Document|any}
     * @private
     */
    function _dataOperation(dataType, xhrHttp) {
        if (dataType == 'json') {//默认返回的是JSON格式
            return JSON.parse(xhrHttp.responseText);
        } else if (dataType == 'text') {
            return xhrHttp.responseText
        } else if (dataType == 'xml') {
            return xhrHttp.responseXML
        } else {
            return xhrHttp.responseText
        }
    }

    function getJSON(url, data, success) {
        get(url, data, success, 'json')
    }

    function get(url, data, success, dataType) {
        data = data || '';
        let obj = {
            method: 'get',
            url: url,
            data,
        }
        ajax(obj)
    }

    function post(url, data, success, dataType) {
        data = data || '';
        let obj = {
            method: 'post',
            url: url,
            data,
        }
        ajax(obj)
    }

    window.juqery = $ = {ajax, getJSON, get, post}
})();

//使用封装的ajax请求
$.ajax({
    url:"xxx",
    method:"xxx",
    ...
    success:(res)=>{
    
    }
})