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

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

完整的Ajax請求過程

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

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

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

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

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

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

var xhr = new XMLHttpRequest();

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

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

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

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

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

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

responseText：作為響應主體被返回的文本。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

lengthComputable：Boolean值，進度信息是否可用。

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

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

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

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

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