AJAX封装

封装的一般套路

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

AJAX封装步骤

1.写出 AJAX 发送请求与接收响应的模板

const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsot XMLHTTP");
xhr.open('get', 'test.php');
xhr.send();
xhr.addEventListener('readystatechange', function () {
    if (this.readyState === 4) {
           console.log(this.responseText);     
    }
}

2.写一个空函数然后将这个模板放进去

function ajax () {

　　const xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsot XMLHTTP");

　　xhr.open('get', 'test.php');
　　xhr.send();
　　xhr.addEventListener('readystatechange', function () {
    　　if (this.readyState === 4) {
           console.log(this.responseText);     
    　　}
　　}

}

3.最后根据变化量抽象参数，以及使用返回值

 

// 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 类型的数据转换为 key1=value1&key2=value2 这种形式的字符串
            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 形式： key1=valule1&key2=value2
            if (method === 'post') {
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            } 
            xhr.send(params);
            xhr.addEventListener('readystatechange', function () {
                if (this.readyState !== 4) return;
                // 不应该在封装的函数中主观的处理响应结果
                // console.log(this.responseText);
　　　　　　　　　　// 无法在内部包含的函数中通过 return 的方式将返回值返回出去
　　　　　　　　　　// return this.responseText
　　　　　　　　　 // 这里使用了回调函数，
                // 执行调用者
                done(this.responseText);
            });
        }

回调函数

回调：将函数作为参数传递，就好比是将一件事情交给另一个人做(也可以理解为委托)

在这个例子中，ajax异步请求由于函数内部包含返回响应体的函数，所以无法直接返回响应体，

因而，将 返回响应体 这件事委托给了 ondone 这一函数来做。

// 调用者
let ondone = function (res) {
            console.log('回调开始');
            console.log(res);
            console.log('回调结束');
        }
　　　　
　　
　　　　　// 测试
        ajax('get', 'time.php', {}, ondone);