什么是 AJAX ？
AJAX = 異步 JavaScript 和 XML
AJAX 是一種用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁的技術(shù)。通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實(shí)現(xiàn)異步更新。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。而傳統(tǒng)的網(wǎng)頁（不使用AJAX）如果需要更新內(nèi)容，必需重載整個(gè)網(wǎng)頁面。
創(chuàng)建AJAX的過程
XMLHttpRequest 是 AJAX 的基礎(chǔ)，用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個(gè)網(wǎng)頁的情況下，對(duì)網(wǎng)頁的某部分進(jìn)行更新。
(1) 創(chuàng)建 XMLHttpRequest 對(duì)象
var xmlhttp = new XMLHttpRequest(); //IE7及以上
var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); //IE5 和 IE6
(2) 打開連接
xmlhttp.open( method, url, async );
- method：請(qǐng)求的類型，GET 或 POST
- url：文件在服務(wù)器上的位置
- async：true（異步）或 false（同步）
同步：指發(fā)出數(shù)據(jù)后，等接收到響應(yīng)以后再發(fā)送下一個(gè)數(shù)據(jù)包的通訊方式。
異步：指發(fā)出數(shù)據(jù)后，不用等待接收到響應(yīng)，接著發(fā)送下一個(gè)數(shù)據(jù)包的通訊方式。
(3) 向服務(wù)器發(fā)送請(qǐng)求
xmlhttp.send(string);
GET 請(qǐng)求:
xmlhttp.send();
POST 請(qǐng)求:
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 向請(qǐng)求添加HTTP頭
xmlhttp.send("fname=Bill&lname=Gates");
GET 還是 POST?
與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請(qǐng)使用 POST 請(qǐng)求：
?a. 無法使用緩存文件（更新服務(wù)器上的文件或數(shù)據(jù)庫）；
?b. 向服務(wù)器發(fā)送大量數(shù)據(jù)（POST 沒有數(shù)據(jù)量限制）；
?c. 發(fā)送包含未知字符的用戶輸入時(shí)，POST 比 GET 更穩(wěn)定也更可靠。
(4) 接收服務(wù)器響應(yīng)
當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)。
XMLHttpRequest 對(duì)象有三個(gè)重要的屬性：
-
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（HTTP狀態(tài)碼）
??- 1字頭：消息。這一類型的狀態(tài)碼，代表請(qǐng)求已被接受，需要繼續(xù)處理。
??- 2字頭：成功。這一類型的狀態(tài)碼，代表請(qǐng)求已成功被服務(wù)器接收、理解、并接受。( 200:'OK' )
??- 3字頭：重定向。這類狀態(tài)碼代表需要客戶端采取進(jìn)一步的操作才能完成請(qǐng)求。( 304:'Not Modified' )
??- 4字頭：請(qǐng)求錯(cuò)誤。這類的狀態(tài)碼代表了客戶端看起來可能發(fā)生了錯(cuò)誤，妨礙了服務(wù)器的處理。
??- 5、6字頭：服務(wù)器錯(cuò)誤。這類狀態(tài)碼代表了服務(wù)器在處理請(qǐng)求的過程中有錯(cuò)誤或者異常狀態(tài)發(fā)生。
每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件。
在onreadystatechange 事件中，我們規(guī)定當(dāng)服務(wù)器響應(yīng)已做好被處理的準(zhǔn)備時(shí)所執(zhí)行的任務(wù)。
當(dāng)readyState 等于 4 且 status 為 2字頭或 304 時(shí)，表示響應(yīng)已就緒：
xmlhttp. onreadystatechange = function( ){
if (xmlhttp.readyState==4 && xmlhttp.status>=200 && xmlhttp.status<300 || xmlhttp.status==304){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; //responseText 獲得字符串形式的響應(yīng)數(shù)據(jù)
}
}
下面是封裝的ajax函數(shù)：
GET 方式：
function ajax(url,success,error){
if(window.XMLHttpRequest){
var oAjax = new XMLHttpRequest();
}else{
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
oAjax.open('GET',url,true);
oAjax.send();
oAjax.onreadystatechange = function(){
if(oAjax.readyState==4){
if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
success&&success(oAjax.responseText); //成功的回調(diào)函數(shù)
}else{
error&&error(oAjax.status); //失敗的回調(diào)函
}
}
};
}
POST 方式：
function ajax(url,success,error){
if(window.XMLHttpRequest){
var oAjax = new XMLHttpRequest();
}else{
var oAjax = new ActiveXObject('Microsoft.XMLHTTP');
}
oAjax.open('POST ',url,true);
oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
oAjax.send('fname=Bill&lname=Gates');
oAjax.onreadystatechange = function(){
if(oAjax.readyState==4){
if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){
success&&success(oAjax.responseText); //成功的回調(diào)函數(shù)
}else{
error&&error(oAjax.status); //失敗的回調(diào)函
}
}
};
}
