最詳細的原生js實現ajax的封裝

1. ajax的介紹

1.1 含義

ajax 的全稱是Asynchronous JavaScript and XML
簡單理解下:ajax就是非同步的js和服務端的數據

1.2 組成

非同步的js:事件,對象等
其他js:數據處理和解析的js
伺服器的載體:xhr對象
服務端的數據:json,xhr,html,txt等字元型數據

1.3 作用

它作為前端向後端發送數據請求的重要手段,可以實現網頁無刷新載入數據.

1.4 利弊

與傳統的form表單的get和post方式相比較,ajax的優點很明顯

優點:1.提升載入速度,實現局部載入
     2.節省性能,能很好提升用戶體驗

當然,事物都是相對的,缺點如下

缺點:1.破壞了瀏覽器的前進後退功能
     2.破壞了seo的網路優化

2. ajax的書寫

2.1.1 ajax的GET請求方式

GET請求的數據會附在URL之後， 以 ? 分割URL和傳輸數據， 參數之間以 & 相連

//1.創建xhr對象
var xhr = new XMLHttpRequest();
//2.xhr的發送方式:get  
xhr.open("GET", url, true)
//參數1:請求方式
//參數2:url是後端文件所在伺服器的位置
//參數3:非同步true;同步false
//3.監聽xhr對象的狀態
xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            //客戶端狀態碼為4:響應內容解析完成,可以調用
            //服務端的狀態碼為200:交易成功
            console.log(xhr.responseTxt)
            //返迴響應信息
        }
        //4.發送信息
        xhr.send();

2.1.2 小bug

以上是最基本的ajax代碼,有兩處小bug, 在封裝過程中會解決

bug1:傳的參數為空時,會報錯
bug2:瀏覽器的緩存干擾使得數據無法刷新

2.1.3 ajax的Get方式封裝

//接收三個參數:後端文件地址,回調函數和數據(對象格式)
function ajaxGet(url, callback, data) {
    //1.解析發送的數據
    data = data || {};
    //修複bug1:參數為空變為空對象
    var str = "";
    for (var i in data) {
        str += `${i}=${data[i]}&`;
        //拼接get的數據格式
    }
    //2.拼接url
    var d = new Date();
    url = url + "?" + str + "__sjc=" + d.getTime();
    //修複bug2:拼接一個不會重覆的時間戳,欺騙緩存;
    //時間戳的命名應該儘量複雜,防止後端讀取到.
    //3. 準備ajax
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
        }
    }
    xhr.send();
}

2.2.1 ajax的POST請求方式

ajax的POST和GET的結構大體相同,但有以下三點區別

區別1:post發送數據位置是send()內,而不是拼接在url後
區別2:open的請求方式變為POST
區別3:send會原樣發送數據,為確保後端能識別,必須設置數據格式為表單格式

2.2.1 ajax的POST方式封裝

function ajaxPost(url, callback, data) {
    data = data || {};
    var str = "";
    for (var i in data) {
        str += `${i}=${data[i]}&`;
    }
    //不必拼接時間戳
    var xhr = new XMLHttpRequest();
    //區別2
    xhr.open("POST", url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            callback(xhr.responseText);
        }
    }
    //區別3:發送前設置數據格式
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    //區別1:數據發送在send內
    xhr.send(str);
}