封裝的一般套路

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);