AJAX封装及调用

封装的一般套路

1. 使用全局代码写一个比较完整的用例
2. 然后写一个空函数，没有形参，没有返回值，将这个完整地放到这个空函数中
3. 最后根据使用过程中的需求（即需要变更的数据）抽象参数

统一管理接口url

var RequestTheAddress = {
   session: "http://127.0.0.1:89/session",
   client : "http://127.0.0.1:89/client",
   // ...
};

AJAX封装

// params = null, 这是 ES6 中的语法，即默认参数，
// 也就是：当这里没有参数传递进来的话，就默认为 null,有参数传递进来的话，就使用参数
function _ajax(method, url, params = null, done) {
    // 统一将方法转换为小写,因为调用，这样调用ajax()函数时 method 写大小写都可以
    method = method.toLowerCase();
const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsot XMLHTTP");
    // 将 object 类型的数据转换为 uuid=hsz-01&id=1 这种形式的字符串
    if (typeof params === 'object') {
        let tempArr = [];
        for (let key in params) {
            let value = params[key];
            // 将元素一个一个的放进这个空数组中
            tempArr.push(key + '=' + value);
        }
        //console.log(tempArr);
        // join()方法：把数组中的所有元素放入一个字符串，并通过指定参数进行元素之间的分隔
        params = tempArr.join('&');
        console.log(params);
    }

    // 当使用 get 方法传递参数，应该通过 url 传递参数
    if (method === 'get') {
        url += '?' + params;
    }

    xhr.open(method, url);
    // 当使用 post 方法时，要设置响应头(当传递参数为 urlencoded 形式时)

    // urlencoded 形式： uuid=hsz-01&id=1
    if (method === 'post') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }
    xhr.send(params);
    xhr.addEventListener('readystatechange', function () {
        console.log(this.readyState);
        if (this.readyState !== 4) return;
        // 不应该在封装的函数中主观的处理响应结果
        console.log(this.responseText);
        // 无法在内部包含的函数中通过 return 的方式将返回值返回出去
        // return this.responseText
        // 这里使用了回调函数，
        // 执行调用者
        return done(JSON.parse(this.responseText));
        return
    });
}

AJAX调用

let ondone = function (res) {
    console.log('回调开始');
    console.log(res);
    /*
    {resCode: 0
    resData: { session: '82c8638b-30c7-3060-95e4-efabbfc411db' }
    resMsg: "session已传递"}
    */
    console.log('回调结束');
    if (res.resCode !== 0) {
        return layui.layer.msg(res.resMsg, { icon: 5, time: 2000, shift: 6 });
    }
    window.sessionStorage.setItem('session', res.resData.session)
    lastname = sessionStorage.getItem("session");
}

AJAX测试

_ajax('get', RequestTheAddress.session, {}, ondone)