摘要：當(dāng)客戶端收到以上信息后，首先要判斷狀態(tài)碼來確認(rèn)響應(yīng)是否成功，狀態(tài)碼在之間表示請(qǐng)求成功，同時(shí)代表請(qǐng)求資源未被修改，可使用瀏覽器本地緩存。校驗(yàn)狀態(tài)碼輸出響應(yīng)的文本打印其他狀態(tài)碼發(fā)送異步請(qǐng)求如果將方法的第三個(gè)參數(shù)設(shè)為，即為異步請(qǐng)求。

Ajax用一句話來說就是無須刷新頁面即可從服務(wù)器取得數(shù)據(jù)。注意，雖然Ajax翻譯過來叫異步JavaScript與XML，但是獲得的數(shù)據(jù)不一定是XML數(shù)據(jù)，現(xiàn)在服務(wù)器端返回的都是JSON格式的文件。

完整的Ajax請(qǐng)求過程

創(chuàng)建XMLHttpRequest實(shí)例
發(fā)出HTTP請(qǐng)求
接收服務(wù)器傳回的數(shù)據(jù)
更新網(wǎng)頁數(shù)據(jù)

下面先看一個(gè)紅寶書上給出的發(fā)起Ajax請(qǐng)求的例子，API的用法在后面章節(jié)給出。

var xhr = new XMLHttpRequest();  // 創(chuàng)建XMLHttpRequest實(shí)例

xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){   // 判斷請(qǐng)求響應(yīng)過程階段，4 階段代表已接收到數(shù)據(jù)
    if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校驗(yàn)HTTP狀態(tài)碼
      console.log(xhr.responseText);   // 輸出響應(yīng)的文本
    } else {
      console.error(xhr.status, xhr.statusText); // 打印其他HTTP狀態(tài)碼
    }
  }
};

xhr.open("get", "example.txt", true); // 初始化xhr實(shí)例，或者說啟動(dòng)請(qǐng)求
xhr.send(null);  // 設(shè)置HTTP請(qǐng)求攜帶參數(shù)，null為不帶參數(shù)

從上面的的代碼可以看出，創(chuàng)建一個(gè)XHR實(shí)例方式為：

var xhr = new XMLHttpRequest();

實(shí)例創(chuàng)建好后，首先需要啟動(dòng)一個(gè)HTTP請(qǐng)求，使用XHR的open()方法，open方法接受三個(gè)參數(shù)

XMLHttpRequest.open(method, url, isAsync)
// 例如
xhr.open("get", "http://www.baidu.com", true)

第一個(gè)參數(shù)為http請(qǐng)求使用方法，如（"get"，"post"等），第二是參數(shù)是請(qǐng)求的url, 第三個(gè)參數(shù)代表是否異步發(fā)送請(qǐng)求（可選）。調(diào)用open()方法后會(huì)啟動(dòng)一個(gè)http請(qǐng)求，但它不會(huì)立即發(fā)送請(qǐng)求，處于待命狀態(tài)。需要注意的是：請(qǐng)求的url必須要跟請(qǐng)求源域(origin)同域，也就是說協(xié)議、域名、端口號(hào)要一致，跨域請(qǐng)求要使用別的方法。接著調(diào)用send()方法就會(huì)發(fā)出這個(gè)http請(qǐng)求。

xhr.open("get", "http://www.baidu.com", true)
xhr.send(null)

send()方法接受一個(gè)參數(shù)，為http請(qǐng)求發(fā)送的數(shù)據(jù)（通常用于"post"方法），如果為null，表示不發(fā)送數(shù)據(jù)。至此，一個(gè)異步的http請(qǐng)求就發(fā)送到了服務(wù)器。

如果將open方法的第三個(gè)參數(shù)設(shè)為false，即為同步請(qǐng)求，當(dāng)收到服務(wù)器的響應(yīng)后，相應(yīng)的數(shù)據(jù)會(huì)自動(dòng)填充到XHR對(duì)象的屬性中，主要包括以下四個(gè)：

responseText：作為響應(yīng)主體被返回的文本。

responseXML: 響應(yīng)返回的XML文檔，能接收到的前提是，響應(yīng)的Content-Type字段的值為
text/xml或者application/xml。

status: HTTP狀態(tài)碼。

statusText: HTTP狀態(tài)碼說明。

當(dāng)客戶端收到以上信息后，首先要判斷HTTP狀態(tài)碼來確認(rèn)響應(yīng)是否成功，狀態(tài)碼在200-300之間表示請(qǐng)求成功，同時(shí)304代表請(qǐng)求資源未被修改，可使用瀏覽器本地緩存。如果成功就可以獲取響應(yīng)報(bào)文主體中的數(shù)據(jù)了。

xhr.open("get", "http://www.baidu.com", false)
xhr.send(null)

if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校驗(yàn)HTTP狀態(tài)碼
  console.log(xhr.responseText);   // 輸出響應(yīng)的文本
} else {
  console.error(xhr.status, xhr.statusText); // 打印其他HTTP狀態(tài)碼
}

如果將open方法的第三個(gè)參數(shù)設(shè)為true，即為異步請(qǐng)求。那么就需要一個(gè)事件來通知程序異步請(qǐng)求的結(jié)果是否返回。XHR對(duì)象中的readyState屬性，表示請(qǐng)求/響應(yīng)整個(gè)過程所處的階段，它有五個(gè)值分為對(duì)應(yīng)五個(gè)階段：

0：未初始化。未調(diào)用open()方法。

1：啟動(dòng)。已經(jīng)調(diào)用open()方法，但未調(diào)用send()方法。

2：發(fā)送。已調(diào)用send()方法，但未收到響應(yīng)。

3： 接收。已經(jīng)接收到部分響應(yīng)數(shù)據(jù)。

4：完成。已經(jīng)接受到全部響應(yīng)數(shù)據(jù)。

readyState的值每變化一次，都會(huì)觸發(fā)一次readStatechange事件，我們定義一個(gè)事件處理函數(shù)onreadStatechange()，并監(jiān)聽readyState == 4狀態(tài)，就可以得知響應(yīng)數(shù)據(jù)已全部收到，并進(jìn)行下一步操作。那么就是文章開頭給出的代碼：

var xhr = new XMLHttpRequest();  // 創(chuàng)建XMLHttpRequest實(shí)例

xhr.onreadystatechange = function(){
  if (xhr.readyState == 4){   // 判斷請(qǐng)求響應(yīng)過程階段，4 階段代表已接收到數(shù)據(jù)
    if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {  // 校驗(yàn)HTTP狀態(tài)碼
      console.log(xhr.responseText);   // 輸出響應(yīng)的文本
    } else {
      console.error(xhr.status, xhr.statusText); // 打印其他HTTP狀態(tài)碼
    }
  }
};

xhr.open("get", "example.txt", true); // 初始化xhr實(shí)例，或者說啟動(dòng)請(qǐng)求
xhr.send(null);  // 設(shè)置HTTP請(qǐng)求攜帶參數(shù)，null為不帶參數(shù)

當(dāng)超出了設(shè)置時(shí)間還未收到響應(yīng)，就會(huì)觸發(fā)timeout事件，進(jìn)而調(diào)用ontimeout事件處理程序。同時(shí)timeout也是XHR的一個(gè)屬性，用于設(shè)置這個(gè)時(shí)間閾值。下面是用法：

xhr.ontimeout = function() {
  alert("timeout!")
}

xhr.open("get", "http://www.baidu.com", true)
xhr.timeout = 1000 // 時(shí)間閾值設(shè)為1秒
xhr.send(null)

load事件用于簡化對(duì)readState值的判斷，響應(yīng)數(shù)據(jù)全部接收完畢后（也就是readState == 4）會(huì)觸發(fā)load事件，使用onload事件處理函數(shù)進(jìn)行后續(xù)操作，onload會(huì)接收一個(gè)event對(duì)象，它的target屬性等于XHR對(duì)象，當(dāng)然我們?cè)诙x這個(gè)事件處理函數(shù)時(shí)也可以不傳入這個(gè)參數(shù)，來看下面的用法：

var xhr = new XMLHttpRequest()
xhr.onload = function () {
  if(xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {
    console.log(xhr.responseText);   // 輸出響應(yīng)的文本
  } else {
    console.error(xhr.status, xhr.statusText); // 打印其他HTTP狀態(tài)碼
  }
}
xhr.open("get", "http://www.baidu.com", true)
xhr.send(null)

這樣就不用去關(guān)心readyState值的變化情況了。當(dāng)然如果想在特定readyState值上做一些邏輯處理，還是要用之前的方法。

這個(gè)是很有用的一個(gè)事件，progress事件會(huì)在瀏覽器接收數(shù)據(jù)期間周期觸發(fā)，代表整個(gè)請(qǐng)求過程的進(jìn)度，它的事件處理程序onprogress接收一個(gè)event對(duì)象，event.target是XHR對(duì)象，另外event還有三個(gè)屬性：

lengthComputable：Boolean值，進(jìn)度信息是否可用。

position：已經(jīng)接收到的字節(jié)數(shù)。

totalSize：總共要接收的字節(jié)數(shù)，被定義在響應(yīng)報(bào)文的Content-Length字段中。

如果響應(yīng)報(bào)文中有Content-Length字段，那么我們就可以計(jì)算當(dāng)前時(shí)刻響應(yīng)數(shù)據(jù)的加載進(jìn)度了，這也是之前看到的一個(gè)面試題。看下面的代碼：

xhr.onprogress = function(event) {
  if(event.lengthComputable) {
    console.log(`Received: ${(event.position/event.totalSize).toFixed(4)*100}%`);
  }
}

其他還有很多有用的API，如FormData表單序列化，overrideMimeType()重寫XHR響應(yīng)的MIME類型等等，后面慢慢更新。