摘要：簡(jiǎn)而言之，可以讓向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶。請(qǐng)求在處理中通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒(méi)有完成響應(yīng)的生成。響應(yīng)已完成已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了。

Ajax全稱 Asynchronous(異步) JavaScript and XML，終結(jié)了“單擊，等待”的交互模式，它是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)，Ajax并不是一種技術(shù)，它是一系列規(guī)范的集合，包含：

基于web標(biāo)準(zhǔn)（standards-basedpresentation）XHTML+CSS的表示；

使用 DOM（Document ObjectModel）進(jìn)行動(dòng)態(tài)顯示及交互；

使用 XML 和 XSLT 進(jìn)行數(shù)據(jù)交換及相關(guān)操作；

使用 XMLHttpRequest 進(jìn)行異步數(shù)據(jù)查詢、檢索；

使用 JavaScript 將所有的東西綁定在一起。

Ajax應(yīng)用程序的優(yōu)勢(shì)在于：

通過(guò)異步模式，提升了用戶體驗(yàn)

優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用

Ajax引擎在客戶端運(yùn)行，承擔(dān)了一部分本來(lái)由服務(wù)器承擔(dān)的工作，從而減少了大用戶量下的服務(wù)器負(fù)載。

在使用Ajax之前，必須先了解客戶端和服務(wù)器間通信的基礎(chǔ)是怎樣的，在這里，他們使用的規(guī)則是HTTP協(xié)議，兩者之間通過(guò)一定格式的報(bào)文（請(qǐng)求報(bào)文和響應(yīng)報(bào)文）進(jìn)行交流，詳細(xì)的看這篇文章。鏈接：http://www.jianshu.com/p/8163...

支撐起Ajax大橋的便是XHR這個(gè)對(duì)象了，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之，XmlHttpRequest可以讓JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不阻塞用戶。通過(guò)XMLHttpRequest對(duì)象，Web開(kāi)發(fā)人員可以在頁(yè)面加載以后進(jìn)行頁(yè)面的局部更新。
在使用它之前，我們先來(lái)了解一下XHR對(duì)象，簡(jiǎn)單起見(jiàn)。關(guān)于不同瀏覽器之間的XHR對(duì)象暫時(shí)不敘述，直接使用原生XHR對(duì)象，在瀏覽器里面創(chuàng)建一個(gè)新的XHR對(duì)象var xhr = new XMLHttpRequest();，在調(diào)試窗口里面輸出它可以看到：

它是一個(gè)對(duì)象，擁有一些屬性，常見(jiàn)的如下：

readyState：該屬性表示請(qǐng)求/響應(yīng)過(guò)程的當(dāng)前活動(dòng)階段，可用取值如下：

0：請(qǐng)求未初始化（還沒(méi)有調(diào)用?open()）。
1：請(qǐng)求已經(jīng)建立，但是還沒(méi)有發(fā)送（還沒(méi)有調(diào)用?send()）。
2：請(qǐng)求已發(fā)送，正在處理中（通常現(xiàn)在可以從響應(yīng)中獲取內(nèi)容頭）。
3：請(qǐng)求在處理中；通常響應(yīng)中已有部分?jǐn)?shù)據(jù)可用了，但是服務(wù)器還沒(méi)有完成響應(yīng)的生成。
4：響應(yīng)已完成；已經(jīng)接收到全部響應(yīng)數(shù)據(jù)，而且已經(jīng)可以在客戶端使用了。

只要readyState屬性的值發(fā)生變化，便可以觸發(fā)readystatechange事件，下面來(lái)體驗(yàn)一下。

//演示readystatechange事件
var log = function(tmp){
    console.log(tmp);
};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
    log(xhr.readyState);
};
xhr.open("get","./content.txt",true);
xhr.send(null);

觀察運(yùn)行結(jié)果，可以很明確地看到狀態(tài)的發(fā)生改變。

responseText：作為響應(yīng)主體被返回的文本，無(wú)論內(nèi)容類型是什么，響應(yīng)主體的內(nèi)容都會(huì)保存在這里。

responseXML：如果響應(yīng)的內(nèi)容類型是text/xml或application/xml，這個(gè)屬性中將保存著響應(yīng)數(shù)據(jù)的XML DOM文檔。

status：響應(yīng)的HTTP狀態(tài)，就是HTTP的狀態(tài)代碼，200,304（表示請(qǐng)求的資源沒(méi)有被修改，可以直接使用瀏覽器中緩存的版本）這些，確保接收到適當(dāng)?shù)捻憫?yīng)。

statusText：HTTP狀態(tài)的說(shuō)明

var xhr = new XMLHttpRequest();
//創(chuàng)建一個(gè)XHR對(duì)象
xhr.open("get","test.txt",true);
//啟動(dòng)一個(gè)請(qǐng)求以備發(fā)送，這個(gè)時(shí)候xhr的readyState為1
xhr.send(null);
//正式發(fā)送請(qǐng)求，readyState為2，隨后請(qǐng)求成功，readyState為4

我們來(lái)詳細(xì)說(shuō)一下細(xì)節(jié)。

首先是open方法：
第一個(gè)參數(shù)是HTTP的請(qǐng)求方式，常用的比如get和post，第二個(gè)參數(shù)是請(qǐng)求的url，如果是get方式的話那么一般請(qǐng)求的參數(shù)就附加在這里。第三個(gè)參數(shù)是控制同步或者異步，true表示異步，false表示同步。簡(jiǎn)單來(lái)說(shuō)，如果使用同步的話，那么會(huì)阻塞后面的代碼，必須等到本次請(qǐng)求完畢才可以，異步則是另開(kāi)一個(gè)線程去執(zhí)行ajax，下面代碼繼續(xù)進(jìn)行。

再說(shuō)send方法：
send方法有一個(gè)參數(shù)，這個(gè)參數(shù)將被寫(xiě)入到請(qǐng)求報(bào)文里面?zhèn)鬟f，上面說(shuō)到了get方式的參數(shù)是直接寫(xiě)到url里面的，所以對(duì)于這種方法，send的參數(shù)應(yīng)該為null，而對(duì)于post方式，url和請(qǐng)求參數(shù)是分離的，所以需要寫(xiě)入到send方法里。

我們可以使用已有的API來(lái)對(duì)上面創(chuàng)建的請(qǐng)求報(bào)文進(jìn)行增添或?qū)憫?yīng)報(bào)文進(jìn)行處理，比如設(shè)置Cookie。

xhr.setRequestHeader("imake","myValue");//添加頭部信息
xhr.getResponseHeader(headerName);//獲取頭部信息
xhr.getAllResponseHeaders();//獲取全部頭部信息

GET方法將需要查詢的字符串追加到URL的末尾，也就是在XHR的open方法的URL末尾進(jìn)行添加，需要進(jìn)行encodeURIComponent()處理，對(duì)此封裝函數(shù)如下：

function addURLParam(url,name,value){
    url+=(url.indexOf("?") == -1 ? "?" : "&");
    url+=encodeURIComponent(name)+"="+encodeURIComponent(value);
}
xhr.open("get",url,true);

討論P(yáng)OST之前，我們先回想一下，POST主要用在表單提交，表單提交的寫(xiě)法很多，比如：

提交

我用來(lái)提交表單

var sub = document.getElementById("submit");
sub.addEventListener("click",function(){
    document.getElementById("test").submit();
});

前兩種方式在使用的時(shí)候非常不便，比如我們?cè)贆z測(cè)它們點(diǎn)擊之前需要進(jìn)行表單驗(yàn)證，那么因?yàn)樗鼈冏陨砭哂心J(rèn)的提交功能，所以我們得把它們的默認(rèn)功能阻止一下，所以使用第三種比較舒服。
在表單進(jìn)行post時(shí)，背地里它將請(qǐng)求的Content-Type設(shè)置為了application/x-www-form-urlencoded（這種類型是上傳不了文件的，先挖個(gè)坑），并且把表單序列化了。我們來(lái)演示一下：

明白了傳統(tǒng)的post表單提交之后，我們來(lái)說(shuō)說(shuō)Ajax，其實(shí)它也是模仿表單提交，所以要主動(dòng)地告訴服務(wù)器，我是post方式，比較復(fù)雜，你做好準(zhǔn)備，所以要設(shè)置Content-Type頭部信息為application/x-www-form-urlencoded，其次是對(duì)表單進(jìn)行序列化，我們可以使用jQuery里面的serialize()方法，測(cè)試如下：