1，首先我們先了解下什么是Ajax以及為什么要使用ajax？
??????? Ajax（Asynchronous JavaScript and XML），即為異步的JavaScript和xml，是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)。首先，我們要知道，Ajax 不是一種新的編程語(yǔ)言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。使用 JavaScript 向服務(wù)器提出請(qǐng)求并處理響應(yīng)而不阻塞用戶！核心對(duì)象XMLHTTPRequest。通過(guò)這個(gè)對(duì)象，您的 JavaScript 可在不重載頁(yè)面的情況與 Web 服務(wù)器交換數(shù)據(jù)，即在不需要刷新頁(yè)面的情況下，就可以產(chǎn)生局部刷新的效果。其次，了解到它是異步，這樣就可使網(wǎng)頁(yè)從服務(wù)器請(qǐng)求少量的信息，而不是整個(gè)頁(yè)面。
?????? 而什么是異步？跟同步有什么區(qū)別呢？當(dāng)你理解這個(gè)之后，你就明白為什么要使用ajax了。在Ajax之前，當(dāng)我們需要先服務(wù)器請(qǐng)求數(shù)據(jù)時(shí)，我們向服務(wù)器發(fā)送一個(gè)請(qǐng)求，發(fā)送之后我們只能等待服務(wù)器的響應(yīng)，給我們返回?cái)?shù)據(jù)回來(lái)，而在這個(gè)期間我們什么都干不了，只能等待，這就是同步。而ajax的出現(xiàn)則幫我們解決了這個(gè)問(wèn)題，我們先看下ajax的工作原理，如圖1所示
有了ajax之后，我們只需要把請(qǐng)求服務(wù)器這一塊，交給ajax去做就行了，ajax就相當(dāng)于“中間商”或者“中介”什么的，替我們?nèi)ァ芭芡取?，這樣，我們就不需要刷新整個(gè)頁(yè)面去等待服務(wù)器的響應(yīng)了，只需要利用JavaScript向服務(wù)器發(fā)送請(qǐng)求即可，就可以再不刷新頁(yè)面的情況下，實(shí)現(xiàn)局部頁(yè)面數(shù)據(jù)更新的效果。
2，Ajax本地運(yùn)行的環(huán)境搭建。
?????? 在ajax運(yùn)行之前，我們要先搭建好環(huán)境。使用wampServer或者xampp都可以，瀏覽器搜索下載即可。以wampserver為例來(lái)說(shuō)明，下載完之后運(yùn)行即可。在安裝的目錄中，有一個(gè)叫www的文件夾，我們把要運(yùn)行的的文件放在它里面即可。首先，檢查wampserver是否運(yùn)行了，在瀏覽器輸入localhost回車，看到圖2說(shuō)明已經(jīng)啟動(dòng)了。之后我們輸入要執(zhí)行的文件。假如我要執(zhí)行的是www目錄下的index.html文件，在瀏覽器輸入localhost/index.html回車即可運(yùn)行。
3，Ajax的運(yùn)行流程是怎樣的？
使用ajax只需要以下幾個(gè)步驟即可：
1，創(chuàng)建XMLHTTPRequest對(duì)象
var xhr = new XMLHttpRequest();在ie6及以下，我們要這樣設(shè)置xhr = new ActiveXObject('Microsoft.XMLHTTP');將其合并為：
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
2，創(chuàng)建http請(qǐng)求
利用open方法，有三個(gè)參數(shù)：第一個(gè)，設(shè)置請(qǐng)求方式get/post；第二個(gè)，設(shè)置請(qǐng)求地址，url；第三個(gè)，是否為異步，默認(rèn)為true，即為異步，可不填。如：
xhr.open(method,url,true);
3，發(fā)送請(qǐng)求
xhr.send();
4，服務(wù)器響應(yīng)
xhr.onreadystatechange = function(){
if (xhr.readyState==4 && xhr.status==200 ) {
console.log(xhr.responseText);//請(qǐng)求成功后我們可以在這處理數(shù)據(jù)
} else {
alert('出錯(cuò)了,Err：' + xhr.status);
}
}
readyState: ajax的工作狀態(tài),存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
0: 請(qǐng)求未初始化
1: 服務(wù)器連接已建立
2: 請(qǐng)求已接收
3: 請(qǐng)求處理中
4: 請(qǐng)求已完成，且響應(yīng)已就緒
responseText: ajax的請(qǐng)求返回的數(shù)據(jù)（字符串形式）
state: 服務(wù)器狀態(tài),服務(wù)器常用的狀態(tài)碼及其對(duì)應(yīng)的含義如下：
200：服務(wù)器響應(yīng)正常。
304：該資源在上次請(qǐng)求之后沒(méi)有任何修改（這通常用于瀏覽器的緩存機(jī)制，使用GET請(qǐng)求時(shí)尤其需要注意）。
400：無(wú)法找到請(qǐng)求的資源。
401：訪問(wèn)資源的權(quán)限不夠。
403：沒(méi)有權(quán)限訪問(wèn)資源。
404：需要訪問(wèn)的資源不存在。
405：需要訪問(wèn)的資源被禁止。
407：訪問(wèn)的資源需要代理身份驗(yàn)證。
414：請(qǐng)求的URL太長(zhǎng)。
500：服務(wù)器內(nèi)部錯(cuò)誤。
