AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的技術(shù)别凹。
通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新画机。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下摊沉，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新。
傳統(tǒng)的網(wǎng)頁(yè)（不使用 AJAX）如果需要更新內(nèi)容哲嘲，必需重載整個(gè)網(wǎng)頁(yè)面。
基礎(chǔ)知識(shí):
IE7+,Firefox,Chrome,Safari 以及 Opera 均內(nèi)建 XMLHttpRequest 對(duì)象媳禁。
1）創(chuàng)建 XMLHttpRequest 對(duì)象的語(yǔ)法：
variable = new XMLHttpRequest();
老版本的IE（IE5 和 IE6）使用ActiveX對(duì)象：
variable = new ActiveXObject("Microsoft.XMLHTTP");
為了應(yīng)對(duì)所有的現(xiàn)代瀏覽器眠副，包括IE5和IE6，請(qǐng)檢查瀏覽器是否支持XMLHttpRequest對(duì)象竣稽。如果支持囱怕，則創(chuàng)建XMLHttpRequest對(duì)象。
如果不支持毫别，則創(chuàng)建ActiveXObject：
var xmlhttp;
if( window.XMLHttpRequest ) {
// code for IE7+,Firefox,chrome,Opera,Safari
xmlhttp = new XMLHttpRequest();
}else{
// code for IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
2）向服務(wù)器發(fā)送請(qǐng)求
XMLHttpRequest對(duì)象的 open() 和 send() 方法：
xmlhttp.open('GET',"test1.txt",true); // open(method,url,async) 規(guī)定請(qǐng)求的類型娃弓，URL以及是否異步處理請(qǐng)求。async= true (異步) 或async = false(同步)
GET 還是 POST岛宦？
與POST 相比台丛，GET 更簡(jiǎn)單也更快，并且在大部分情況下都能用砾肺。
然而挽霉，在以下情況中，請(qǐng)使用POST請(qǐng)求：
a. 無(wú)法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫(kù)）;
b. 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒(méi)有數(shù)據(jù)量限制）;
c. 發(fā)送包含未知字符的用戶輸入時(shí)变汪，POST 比 GET 更穩(wěn)定也更可靠
例子：
一個(gè)簡(jiǎn)單的 GET 請(qǐng)求：
xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();
上面例子中侠坎，可能得到是緩存的結(jié)果。
為了避免這種情況裙盾，可以向 URL 添加一個(gè)唯一的ID：
xmlhttp.open("GET","demp_get.asp?t="+ Math.random(),true);
xmlhttp.send();
一個(gè)簡(jiǎn)單的post請(qǐng)求：
xmlhttp.open("POST","demp_post.asp",true);
xmlhttp.close();
如果需要像 HTML 表單那樣 POST 數(shù)據(jù)实胸，使用 setRequestHeader() 添加 HTTP 頭他嫡。然后在 send() 方法中規(guī)定希望發(fā)送的數(shù)據(jù)：
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");
Async = true
當(dāng)使用async = true 時(shí)，請(qǐng)規(guī)定在響應(yīng)處于 onreadystatechange 事件中的就緒狀態(tài)時(shí)執(zhí)行的函數(shù)：
xmlhttp.onreadystatechange = function(){
if( xmlhttp.readyState == 4 && xmlhttp.status == 200 ){
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.close();
3) 服務(wù)器響應(yīng)
如需獲取服務(wù)器的響應(yīng)庐完，可以使用XMLHttpRequest對(duì)象的 responseText 或 responseXML 屬性涮瞻。
responseText: 獲取字符串形式的響應(yīng)數(shù)據(jù)
responseXML: 獲取 XML 形式的響應(yīng)數(shù)據(jù)
例：
a. responseText document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
b. responseXML
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementByTagName("ARTIST");
for( i=0;i<x.length;i++ ){
txt = txt + x[i].childNodes[0].nodeValue + "<br/>";
}
document.getElementByID("myDiv").innerHTML = txt;
onreadystatechange 事件
當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)假褪。每當(dāng)readyState 改變時(shí)署咽，就會(huì)觸發(fā) onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息生音。
onreadystatechange：存儲(chǔ)函數(shù)（或函數(shù)名）宁否，每當(dāng)readyState 屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)缀遍。
readyState: 存有 XMLHttpRequest 的狀態(tài)慕匠。 從 0到4 發(fā)生變化。
0: 請(qǐng)求未初始化域醇。
1：服務(wù)器連接已建立台谊。
2：請(qǐng)求已接收。
3：請(qǐng)求處理中譬挚。
4：請(qǐng)求已完成锅铅，且響應(yīng)已就緒。
status: 200: 'OK'; 404: 未找到頁(yè)面减宣。
在onreadystatechange 事件中盐须，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)。
當(dāng)readyState 等于4 且狀態(tài)為 200 時(shí)漆腌，表示響應(yīng)已就緒：
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
