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

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

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

使用 DOM（Document ObjectModel）進行動態(tài)顯示及交互；

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

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

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

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

通過異步模式，提升了用戶體驗

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

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

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

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

它是一個對象，擁有一些屬性，常見的如下：

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

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

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

//演示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);

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

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

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

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

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

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

我們來詳細說一下細節(jié)。

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

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

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

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

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

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

討論POST之前，我們先回想一下，POST主要用在表單提交，表單提交的寫法很多，比如：

提交

我用來提交表單

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

前兩種方式在使用的時候非常不便，比如我們再檢測它們點擊之前需要進行表單驗證，那么因為它們自身具有默認的提交功能，所以我們得把它們的默認功能阻止一下，所以使用第三種比較舒服。
在表單進行post時，背地里它將請求的Content-Type設(shè)置為了application/x-www-form-urlencoded（這種類型是上傳不了文件的，先挖個坑），并且把表單序列化了。我們來演示一下：

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