摘要：方法用于常規(guī)請(qǐng)求，它適用于當(dāng)完全指定請(qǐng)求資源，請(qǐng)求對(duì)服務(wù)器沒(méi)有任何副作用以及服務(wù)器響應(yīng)是可緩存的。不同的額外數(shù)據(jù)服務(wù)器可能返回不同的數(shù)據(jù)。四發(fā)送請(qǐng)求使用的最后一步是指定可選的請(qǐng)求主體并向服務(wù)器發(fā)送它。

瀏覽器在XMLHttpRequest類上定義了他們的HTTP API。 這個(gè)類的每一個(gè)實(shí)例都是一個(gè)獨(dú)立的請(qǐng)求/響應(yīng)對(duì)，這個(gè)對(duì)象的屬性和方法允許指定請(qǐng)求細(xì)節(jié)和提取響應(yīng)數(shù)據(jù)。

使用這個(gè)HTTP API的第一步就是實(shí)例化一個(gè)XMLHttpRequest對(duì)象：

var requestObj new XMLHttpRequest();

當(dāng)然，實(shí)際開(kāi)發(fā)中，不會(huì)這么簡(jiǎn)單，我們還要考慮兼容早版本的IE的問(wèn)題，在IE5和IE6中它只是一個(gè)ActiveX對(duì)象。IE7之前的版本不支持非標(biāo)準(zhǔn)化的XMLHttpRequest()構(gòu)造函數(shù)。我們需要這樣寫：

if (window.XMLHttpRequest) {
    requestObj = new XMLHttpRequest();
} else {
    requestObj = new ActiveXObject("Microsoft.XMLHTTP")//兼容早版本的ie, 如IE5 IE6
}

除了實(shí)例化一個(gè)XMLHttpRequest對(duì)象，我們也可以重用已有的對(duì)象，但要注意，這樣會(huì)終止之前通過(guò)該對(duì)象掛起的任何請(qǐng)求。

一個(gè)http請(qǐng)求由4部分組成：

方法或“動(dòng)作”

請(qǐng)求的 url

可選的請(qǐng)求頭集合，可能包含身份驗(yàn)證信息

可選的請(qǐng)求主體

HTTP響應(yīng)包含3部分：

狀態(tài)碼，顯示請(qǐng)求的狀態(tài)，如是否成功

響應(yīng)頭集合

響應(yīng)主體

發(fā)起HTTP請(qǐng)求的下一步是調(diào)用XMLHttpRequest對(duì)象的open（）方法：

request.open("方法", "URL")

open（）方法需要指定兩個(gè)必要部分：方法 和 url。第一個(gè)參數(shù)為“方法”，不區(qū)分大小寫，但通常使用大寫，常用的方法有 “GET” “POST”。GET 方法用于常規(guī)請(qǐng)求，它適用于當(dāng)URL完全指定請(qǐng)求資源，請(qǐng)求對(duì)服務(wù)器沒(méi)有任何副作用以及服務(wù)器響應(yīng)是可緩存的。POST方法常用于HTML表單，它在請(qǐng)求主體中包含額外數(shù)據(jù)，且這些數(shù)據(jù)常需要存儲(chǔ)到服務(wù)器的數(shù)據(jù)庫(kù)上（副作用）。不同的額外數(shù)據(jù)服務(wù)器可能返回不同的數(shù)據(jù)。

除了POST和GET方法，還有“DELETE” “HEAD” “OPTION” “PUT”等方法。他們都可以作為open（）方法的第一個(gè)參數(shù)。

open（）方法還有第三個(gè)參數(shù)，用來(lái)指定方法是同步還是異步的。而默認(rèn)是異步的，這個(gè)在文章后面會(huì)細(xì)講。

如果有請(qǐng)求頭的話，我們可以通過(guò)

requestObj.setRequestHeader("Content-Type",  "  ")

來(lái)設(shè)置請(qǐng)求頭。
要注意的是：對(duì)相同的頭調(diào)用setRequestHeader（）多次，新值不會(huì)取代舊值，相反，HTTP請(qǐng)求將包含這個(gè)頭的多個(gè)副本或這個(gè)頭將指定多個(gè)值。并不是所有的頭都可以設(shè)置，如“Content-length”"Date" "Referer" 和 "User-Agent"等，XMLHttpRequest將自動(dòng)添加這些頭而防止偽造它們。

使用XMLHttpRequest的最后一步是指定可選的請(qǐng)求主體并向服務(wù)器發(fā)送它。使用send（）方法：

requestObj.send(null)

GET方法沒(méi)有主體，我們?cè)趕end（）方法中傳入null或省略這個(gè)參數(shù)。POST請(qǐng)求通常擁有主體，同時(shí)應(yīng)該配合setRequestHeader（）指定的“Content-Type”頭。

到現(xiàn)在，我們可以看到一個(gè)完整的發(fā)送請(qǐng)求的過(guò)程：

var requestObj;

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

requestObj.open("方法", url, async);
requestObj.setRequestHeader("Content-Type", "xxxxxxxx") //根據(jù)方法設(shè)置相應(yīng)的頭
requestObj.send();

前面部分講了如何 發(fā)送ajax請(qǐng)求_，下面部分是如何 _取得響應(yīng)

一個(gè)完整的HTTP響應(yīng)由狀態(tài)碼、響應(yīng)頭集合和響應(yīng)主體組成。這些都可以通過(guò)XMLHttpRequest對(duì)象的屬性和方法使用。

status和statusText屬性以數(shù)字和文本的形式返回HTTP狀態(tài)碼。

getResponseHeader()和getAllResponseHeaders()能查詢響應(yīng)頭。

響應(yīng)主體可以從 reponseText 屬性中得到文本形式，從responseXML中得到Document形式。

在send（）方法發(fā)送后，我們需要知道我們的請(qǐng)求什么時(shí)候得到了響應(yīng)，請(qǐng)求是否成功等，這時(shí)候我們就要用到XMLHttpResquest對(duì)象上的 readyState 屬性，readyState屬性是一個(gè)整數(shù)，它指定了請(qǐng)求的狀態(tài)：

通過(guò)readyState我們就可以知道當(dāng)前的請(qǐng)求出于什么狀態(tài)了，那我們?cè)趺慈ケO(jiān)聽(tīng)readyState呢？其實(shí)在每次readyState改變的時(shí)候，都會(huì)觸發(fā)readystatechange事件，而我們可以通過(guò)onreadystatechange屬性去監(jiān)聽(tīng)readystatechange事件。所以通過(guò)onreadystatechange屬性就可以間接的監(jiān)聽(tīng)到readyState的改變了。當(dāng)然我們也可以使用addEventListener（）方法來(lái)監(jiān)聽(tīng)，但我們通常不這么做。

所以我們可以通過(guò)下面代碼來(lái)獲取響應(yīng)信息：

requestObj.onreadystatechange = function() {  // 監(jiān)聽(tīng)readyState的變化

  if (requestObj.readyState == 4) { // 判斷響應(yīng)是否完成
  
     if (requestObj.status == 200) {  // 判斷請(qǐng)求是否成功
     
        console.log(resquestObj.responseText);
     }
     
  }
  
}

所以到這里，我們應(yīng)該知道了一個(gè)完整的原生ajax請(qǐng)求是怎么樣的了。

// 實(shí)例化XMLHttpRequest
var requestObj;
if (window.XMLHttpResquest) {
   requestObj = new XMLHttpRequest();
} else {
  requestObj = new ActiveXObject("Microsoft.XMLHTTP")
}

// 發(fā)送請(qǐng)求
requestObj.open("TYPE", "URL");
requestObj.setRequestHeader("Content-Type", .....);
requestObj.send();

// 獲取響應(yīng)
requestObj.onreadystatechange = function() {
  if (requestObj.readyState == 4) {
      if (requestObj.status == 200) {
         console.log(requestObj.reponseText);
      }
  }
}

是否還記得前面說(shuō)到，open（）方法還有第三個(gè)參數(shù)，它指定請(qǐng)求是同步的還是異步的，而默認(rèn)值為true， 使得請(qǐng)求為異步請(qǐng)求。我們可以給它傳入false來(lái)實(shí)現(xiàn)同步請(qǐng)求。

requestObj.open(type, url, false);

這樣我們就不需要去監(jiān)聽(tīng)readyState的值來(lái)獲知請(qǐng)求何時(shí)得到了響應(yīng)了。

requestObj.open("TYPE", "URL", false);
requestObj.setRequestHeader("Content-Type", .....);
requestObj.send();

// 當(dāng)請(qǐng)求得到響應(yīng)才執(zhí)行
if (requestObj.status != 200) throw new Error(request.statusText);

console.log(requestObj.reponseText);

同步請(qǐng)求是吸引人的，但是同步請(qǐng)求意味著什么呢？意味著由于JavaScript是單線程的，當(dāng)send（）方法調(diào)用后，請(qǐng)求發(fā)出，send（）方法將阻塞這份代碼，send（）方法后面的代碼都不會(huì)被執(zhí)行，直到請(qǐng)求得到響應(yīng)，如果連接的服務(wù)器響應(yīng)慢，用戶的瀏覽器UI就會(huì)被凍結(jié)。所以不是特殊情況，最好不用同步請(qǐng)求。