AJAX的基本使用

一. ajax 是什么

• ajax 是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)。
• AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
• 傳統(tǒng)的網(wǎng)頁（不使用 AJAX）如果需要更新內(nèi)容，必需重載整個網(wǎng)頁面。ajax 通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。

二. 基本使用

function loadData() {
    let xhr;
    if (window.XMLHttpRequest) {
      xhr = new XMLHttpRequest();
    } else {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
?
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
      }
    }
?
    xhr.open("GET","http://127.0.0.1:3001/users",true);
    xhr.send();
  }

3. 對上邊代碼進行講解

3.1 創(chuàng)建XMLHttpRequest 對象

所有現(xiàn)代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內(nèi)建 XMLHttpRequest 對象。創(chuàng)建 XMLHttpRequest 對象的語法：let xhr = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：let xhr = new ActiveXObject("Microsoft.XMLHTTP");

所以為了應(yīng)對所有的現(xiàn)代瀏覽器，包括 IE5 和 IE6，應(yīng)該檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創(chuàng)建 XMLHttpRequest 對象。如果不支持，則創(chuàng)建 ActiveXObject ：

let xhr;
if (window.XMLHttpRequest) {
  xhr = new XMLHttpRequest();
} else {
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

3.2 向服務(wù)器發(fā)送請求

xhr.open("GET","http://127.0.0.1:3001/users",true);
xhr.send();

（1）open(method,url,async) 方法規(guī)定請求的類型、URL 以及是否異步處理請求。

• method：請求的類型；GET 或 POST
• url：要訪問的服務(wù)器上的位置
• async：true（異步）或 false（同步）

（2）send(string) 將請求發(fā)送到服務(wù)器

• 參數(shù)string：僅用于 POST 請求

3.3 接收服務(wù)器的響應(yīng)

如需獲得來自服務(wù)器的響應(yīng)，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

• responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)
• responseXML：獲得 XML 形式的響應(yīng)數(shù)據(jù)

3.4 onreadystatechange 事件

當請求被發(fā)送到服務(wù)器時，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。每當 readyState 改變時，就會觸發(fā) onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

（1）onreadystatechange：每當 readyState 屬性改變時，就會調(diào)用該函數(shù)。

（2）readyState：存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。

• 0: 請求未初始化
• 1: 服務(wù)器連接已建立
• 2: 請求已接收
• 3: 請求處理中
• 4: 請求已完成，且響應(yīng)已就緒

（3）status

• 200: “OK”
• 404: 未找到頁面

（4）在 onreadystatechange 事件中，我們規(guī)定當服務(wù)器響應(yīng)已做好被處理的準備時所執(zhí)行的任務(wù)。當 readyState 等于 4 且狀態(tài)為 200 時，表示響應(yīng)已就緒。

注意： onreadystatechange 事件被觸發(fā) 4 次（0 - 4）, 分別是： 0-1、1-2、2-3、3-4，對應(yīng)著 readyState 的每個變化。

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}

4. 其它方式

//第一個參數(shù)是請求路徑，第二個參數(shù)是一個函數(shù)，當拿到數(shù)據(jù)后調(diào)用該函數(shù)
function get(url,callback) {
  let xhr = new XMLHttpRequest();
  //當請求加載成功之后要調(diào)用該函數(shù)
  xhr.onload = function() {
    callback(xhr.responseText);
  }
  xhr.open('get',url)
  xhr.send();
}
?
get('http://localhost:3001/users',function (data) {
  console.log(data);
});

4.1 擴展

我們可以把上邊那段代碼改寫成支持Promise的形式，這樣就可以進行鏈式調(diào)用

function get(url) {
  return new Promise(function (resolve, reject) {
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
      //使用JSON.parse()將拿到的數(shù)據(jù)轉(zhuǎn)成JS對象
      resolve(JSON.parse(xhr.responseText));
    }
    xhr.open('get', url)
    xhr.send();
  })
}

鏈式調(diào)用：

let data = {};
get('http://localhost:3001/users')
 .then(function (userData) {
   data.user = userData;
   return get('http://localhost:3001/jobs')
 })
 .then(function (jobsData) {
   data.jobs = jobsData;
   console.log(data);
})