ajax是asynchronous javascript and XML的簡寫萝玷，中文翻譯是異步的javascript和XML，這一技術(shù)能夠向服務(wù)器請求額外的數(shù)據(jù)而無須卸載頁面怪蔑，會帶來更好的用戶體驗。雖然名字中包含XML瑟啃，但ajax通信與數(shù)據(jù)格式無關(guān)先蒋。
創(chuàng)建
ajax技術(shù)的核心是XMLHttpRequest對象(簡稱XHR)，XHR為向服務(wù)器發(fā)送請求和解析服務(wù)器響應(yīng)提供了流暢的接口辩撑，能夠以異步方式從服務(wù)器取得更多信息界斜，意味著用戶單擊后，可以不必刷新頁面也能取得新數(shù)據(jù)合冀。
創(chuàng)建一個XHR對象各薇，也叫實例化一個XHR對象，因為XMLHTTPRequest()是一個構(gòu)造函數(shù)君躺。下面是創(chuàng)建XHR對象的兼容寫法
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
發(fā)送請求
open()
在使用XHR對象時峭判，要調(diào)用的第一個方法是open()，它接受3個參數(shù)：要發(fā)送的請求的類型 ("get"棕叫、"post"等)林螃、請求的URL和表示是否異步發(fā)送請求的布爾值
xhr.open("get","example.php", false);
URL是相對于執(zhí)行代碼的當(dāng)前頁面，且只能向同一個域中使用相同端口和協(xié)議的URL發(fā)送請求俺泣。如果URL與啟動請求的頁面有任何差別疗认，都會引發(fā)安全錯誤
send()
send()方法接收一個參數(shù)，即要作為請求主體發(fā)送的數(shù)據(jù)伏钠。調(diào)用send()方法后横漏，請求被分派到服務(wù)器
xhr.open("get", "example.txt", false);
xhr.send(null);
接收響應(yīng)
在收到響應(yīng)后，響應(yīng)的數(shù)據(jù)會自動填充XHR對象的屬性熟掂，主要有以下4個屬性
responseText: 作為響應(yīng)主體被返回的文本
responseXML: 如果響應(yīng)的內(nèi)容類型是'text/xml'或'application/xml'缎浇，這個屬性中將保存著響應(yīng)數(shù)據(jù)的XML DOM文檔
status: 響應(yīng)的HTTP狀態(tài)
statusText: HTTP狀態(tài)的說明
在接收到響應(yīng)后，第一步是檢查status屬性打掘，以確定響應(yīng)已經(jīng)成功返回华畏。可以將HTTP狀態(tài)碼為200作為成功的標(biāo)志尊蚁。此時亡笑，responseText屬性的內(nèi)容已經(jīng)就緒，而且在內(nèi)容類型正確的情況下横朋，responseXML也可以訪問了仑乌。此外，狀態(tài)碼為304表示請求的資源并沒有被修改，可以直接使用瀏覽器中緩存的版本晰甚；當(dāng)然衙传，也意味著響應(yīng)是有效的
無論內(nèi)容類型是什么，響應(yīng)主體的內(nèi)容都會保存到responseText屬性中厕九，而對于非XML數(shù)據(jù)而言蓖捶，responseXML屬性的值將為null
if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){
alert(xhr.responseText);
}else{
alert('request was unsuccessful:' + xhr.status);
}
異步
如果需要接收的是異步響應(yīng)，這就需要檢測XHR對象的readyState屬性扁远，該屬性表示請求/響應(yīng)過程的當(dāng)前活動階段俊鱼。這個屬性可取的值如下：
0(UNSENT):未初始化。尚未調(diào)用open()方法
1(OPENED):啟動畅买。已經(jīng)調(diào)用open()方法并闲，但尚未調(diào)用send()方法
2(HEADERS_RECEIVED):發(fā)送。己經(jīng)調(diào)用send()方法谷羞，且接收到頭信息
3(LOADING):接收帝火。已經(jīng)接收到部分響應(yīng)主體信息
4(DONE):完成。已經(jīng)接收到全部響應(yīng)數(shù)據(jù)湃缎，而且已經(jīng)可以在客戶端使用了
只要readyState屬性值由一個值變成另一個值犀填，都會觸發(fā)一次readystatechange事件∩のィ可以利用這個事件來檢測每次狀態(tài)變化后readyState的值宏浩。通常，我們對readyState值為4的階段感興趣靠瞎，因為這時所有數(shù)據(jù)都已就緒
必須在調(diào)用open()之前指定onreadystatechange 事件處理程序才能確北茸跨瀏覽器兼容性，否則將無法接收readyState屬性為0和1的情況
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status == 200){
alert(xhr.responseText);
}
}
}
