AJAX-有解無憂

1. 實作一個ajax

AJAX創建異步物件XMLHttpRequest，操作XMLHttpRequest物件：

（1）設定請求引數（請求方式，請求頁面的相對路徑，是否異步）

（2）設定一個處理服務器回應的回呼函式，使用onreadystatechange，類似于函式指標

（3）獲取異步物件的readyState屬性：該屬性存有服務器回應的狀態資訊，每當readyState改變時，onreadystatechange函式就會被執行，

（4）判斷回應報文的狀態，若為200說明服務器正常運行并回傳回應資料，

（5）讀取回應資料，可以通過responseText屬性來獲取由服務器回傳的資料，

2. 寫出原生的AJAX

AJAX能夠在不重新加載整個頁面的情況下域服務器交換資料并更新部分網頁，實作區域重繪，大大降低了資源的浪費，是一門英語快速創建動態網頁的技術，ajax使用分為四個部分：

創建XMLHttpRequest物件 var xhr=new XMLHttpRequest()
向服務器發送請求，使用XMLHttpRequest物件的open和send方法
監聽狀態變化，執行回應的回呼函式
判斷回應報文拽太是否為200，通過responseText屬性讀取回應報文資料

如果要發出兩個順序的ajax，可以用回呼函式，也可以使用Promise.then或者async

var xhr=newHttpRequest()

xhr.open(‘get’,’aabb.php,true);

xhr.send(null)

xhr.onreadystatechange=function(){

   if(xhr.readyState==4){

            if(xhr.status==200){

console.log(xhr.responseText)

}

}

}

3. AJAX回傳的狀態

0-------（未初始化）還沒有呼叫send方法

1-------（載入）已呼叫send方法正在發送請求

2-------（載入完成）send方法執行完成，已經接受到全部回應的內容

3-------（互動）正在決議回應內容

4-------（完成）回應內容決議完成，可以在客戶端呼叫了，

4. Promise封裝后的ajax請求，

function fetch(method, url, data){

    return new Promise((resolve, reject) => {

        var xhr = new XMLHttpRequest();

        var method = method || "GET";

        var data = https://www.cnblogs.com/mlebk/p/data || null;

        xhr.open(method, url, true);

        xhr.onreadystatechange = function() {

            if(xhr.status === 200 && xhr.readyState === 4){

                resolve(xhr.responseText);

            } else {

                reject(xhr.responseText);

            }

        }

        xhr.send(data);

        })

}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/141704.html

標籤：JavaScript

上一篇：BOM解讀

下一篇：JavaScript 基礎知識