AJAX的基本使用

一. ajax 是什么

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

二. 基本使用

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. 對(duì)上邊代碼進(jìn)行講解

3.1 創(chuàng)建XMLHttpRequest 對(duì)象

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

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

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

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

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

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

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

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

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

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

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

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

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

3.4 onreadystatechange 事件

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

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

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

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

（3）status

• 200: “OK”
• 404: 未找到頁(yè)面

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

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

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

4. 其它方式

//第一個(gè)參數(shù)是請(qǐng)求路徑，第二個(gè)參數(shù)是一個(gè)函數(shù)，當(dāng)拿到數(shù)據(jù)后調(diào)用該函數(shù)
function get(url,callback) {
  let xhr = new XMLHttpRequest();
  //當(dāng)請(qǐng)求加載成功之后要調(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 擴(kuò)展

我們可以把上邊那段代碼改寫(xiě)成支持Promise的形式，這樣就可以進(jìn)行鏈?zhǔn)秸{(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對(duì)象
      resolve(JSON.parse(xhr.responseText));
    }
    xhr.open('get', url)
    xhr.send();
  })
}

鏈?zhǔn)秸{(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);
})