摘要：文章標(biāo)題采用命名規(guī)范。所以，實(shí)際上是由微軟發(fā)明了。將用于處理請求的函數(shù)綁定在對象的事件上即可。代表異步，代表同步。首先，這個(gè)函數(shù)需要跟蹤請求的狀態(tài)變化。如果狀態(tài)返回值為，代表服務(wù)器響應(yīng)完成，否則，你需要繼續(xù)跟蹤狀態(tài)。使用來判斷請求是否成功。

文章標(biāo)題采用BEM命名規(guī)范。
因?yàn)楣P者想重新夯實(shí)一下技術(shù)，因此翻譯了MDN上的ajax介紹。英文原文

Ajax全名是Asynchronous javascript and xml，是一種利用xmlhttprequest對象與服務(wù)端腳本通信的機(jī)制。Ajax可以傳輸?shù)臄?shù)據(jù)格式包括JSON、XML、HTML和text文件。Ajax對Web應(yīng)用帶來巨大的變革的主要原因是，Ajax支持異步，一個(gè)頁面可以在不進(jìn)行整頁刷新的情況下進(jìn)行局部元素刷新，這個(gè)機(jī)制使得Web應(yīng)用的交互體驗(yàn)更多的接近桌面應(yīng)用。

Ajax的兩大特性：

不用刷新頁面即可向服務(wù)器請求數(shù)據(jù)

可以從服務(wù)端請求數(shù)據(jù)并進(jìn)行處理

為了能夠通過javascript創(chuàng)建一個(gè)HTTP請求，你需要一個(gè)實(shí)現(xiàn)該功能的實(shí)體類，也就是XMLHttpRequest。一開始，由IE首先提出了一個(gè)叫做XMLHTTP的ActiveX 對象，然后火狐，safari和其他瀏覽器也開始在瀏覽器中內(nèi)置XMLHttpRequest對象來實(shí)現(xiàn)XMLHttp的功能。所以，實(shí)際上是由微軟發(fā)明了XMLHttpRequest。

//僅用于表面兩者的關(guān)系，現(xiàn)在并不需要這樣，XMLHTTPRequest已經(jīng)被所有瀏覽器支持
if(window.XMLHttpRequest){    
   httpRequest = new XMLHttpRequest();
}
else if(window.ActiveXObject){    
   httpRequest = new ActiveXObject();
}

接下來，你需要決定請求到的數(shù)據(jù)，怎么處理。此時(shí)，你需要告訴XMLHttpRequest對象用什么js函數(shù)來處理訪問請求。將用于處理請求的函數(shù)綁定在xmlhttprequest對象的onreadystatechange事件上即可。

httpRequest.onreadystatechange = function(){   //這里放請求的處理邏輯。 }

現(xiàn)在，你可以開始發(fā)起請求了，請求對象的open和send方法可以用于發(fā)起請求。

httpRequest.open("Get","http://example.com",true);
httpRequest.send(null);

open（）是Http請求方法，第一個(gè)參數(shù)為請求類型，例如GET、POST、HEAD等（為了保證每個(gè)瀏覽器都能識別，這里請使用大寫）。更多的Http請求信息請查看W3C specs

第二個(gè)元素是與請求的URL地址，切記不可跨域訪問。如果的確想跨域，請查看HTTP access control

第三個(gè)元素是控制是否是異步請求。TRUE代表異步，F(xiàn)ALSE代表同步。

在使用POST請求時(shí)，你可以利用send（）方法發(fā)送數(shù)據(jù)，格式可以是XML、JSON、SOAP等，也可以是查詢字符串：

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"

在發(fā)送請求前，你還需要設(shè)置一下請求的MIME類型。

httpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

上面已經(jīng)講了，你可以設(shè)置js方法來處理服務(wù)器請求。

httpRequest.onreadystatechange = nameOfTheFunction；

首先，這個(gè)函數(shù)需要跟蹤請求的狀態(tài)變化。如果狀態(tài)返回值為XMLHTTPRequest.DONE（4)，代表服務(wù)器響應(yīng)完成，否則，你需要繼續(xù)跟蹤狀態(tài)。

if(httpRequest.readyState == XMLHttpRequest.DONE){
  //返回?cái)?shù)據(jù)接收到的處理流程
}else{
  //請求還在繼續(xù)
}

狀態(tài)通過readyState來跟蹤，狀態(tài)的枚舉值如下：

0(uninitialized)// 請求對象已經(jīng)創(chuàng)建，尚未完成初始化（open方法還未調(diào)用）

1(loading)//open方法已經(jīng)調(diào)用，send方法還未調(diào)用

2(loaded) //send方法已經(jīng)調(diào)用，還沒獲取到數(shù)據(jù)返回

3(interactive) //一些數(shù)據(jù)已經(jīng)返回，responseText還沒完全返回

4(complete) //說有請求數(shù)據(jù)已經(jīng)返回

下一個(gè)事情，是需要檢查HTTP的服務(wù)端返回碼。使用200 ok來判斷請求是否成功。

if(httpRequest.status === 200){
  //成功請求
}else{
  //請求有問題，比如404（請求地址沒找到）500(內(nèi)部服務(wù)器錯(cuò)誤)
}

所有的服務(wù)端返回碼請查看W3C site

現(xiàn)在，在你檢查完請求狀態(tài)和HTTP狀態(tài)碼后，你可以開始隨心所欲的處理請求數(shù)據(jù)了。你可以使用下面兩種數(shù)據(jù)模式：

httpRequest.responseText -以文本格式返回?cái)?shù)據(jù)

httpRequest.responseXML -以XML對象形式返回?cái)?shù)據(jù)，后續(xù)可以在JS中轉(zhuǎn)化為JS對象

注意：上面說的流程是異步流程，在同步流程中，不用這么麻煩，你可以在send（）方法后直接獲取請求數(shù)據(jù)。

示例項(xiàng)就不翻譯了，感興趣的童鞋可以查看原文示例