什么是AJAX?
AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和 XML），是一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(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)頁面。
AJAX的工作原理
Ajax的工作原理相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層(AJAX引擎)，使用戶操作與服務(wù)器響應(yīng)異步化?？蛻舳税l(fā)送請(qǐng)求，請(qǐng)求交給xhr，xhr把請(qǐng)求提交給服務(wù)器，服務(wù)器進(jìn)行業(yè)務(wù)處理，服務(wù)器響應(yīng)數(shù)據(jù)交給xhr對(duì)象，xhr對(duì)象接收數(shù)據(jù)，由javascript把數(shù)據(jù)寫到頁面上，如下圖所示：
AJAX請(qǐng)求的五個(gè)步驟
1.建立XMLHttpRequest對(duì)象;
2.設(shè)置回調(diào)函數(shù);
3.配置請(qǐng)求信息，(如open,get方法)，使用open方法與服務(wù)器建立鏈接;
4.向服務(wù)器發(fā)送數(shù)據(jù);
5.在回調(diào)函數(shù)中針對(duì)不同的響應(yīng)狀態(tài)進(jìn)行處理;
復(fù)制代碼
1.創(chuàng)建XMLHttpRequest異步對(duì)象
var xhr; //定義一個(gè)變量,用于存放XMLHttpRequest對(duì)象
if(window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
復(fù)制代碼
2.設(shè)置回調(diào)函數(shù)
xhr.onreadystatechange = callback；
復(fù)制代碼
3.使用open方法與服務(wù)器建立連接
// get 方式
xhr.open("get", "test.php", true)
// post 方式發(fā)送數(shù)據(jù) 需要設(shè)置請(qǐng)求頭
xhr.open("post", "test.php", true)
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
復(fù)制代碼
4.向服務(wù)器發(fā)送數(shù)據(jù)
// get 不需要傳遞參數(shù)
xhr.send(null)
// post 需要傳遞參數(shù)
xhr.send("name=jay&age=18")
復(fù)制代碼
5.在回調(diào)函數(shù)中對(duì)不同的響應(yīng)狀態(tài)進(jìn)行處理
function callback() {
// 判斷異步對(duì)象的狀態(tài)
if(xhr.readyState == 4) {
// 判斷交互是否成功
if(xhr.status == 200) {
// 獲取服務(wù)器響應(yīng)的數(shù)據(jù)
var res = xhr.responseText
// 解析數(shù)據(jù)
res = JSON.parse(res)
}
}
}
復(fù)制代碼
- ajax中的五種狀態(tài)碼
-
0：請(qǐng)求未初始化
-
1：服務(wù)器連接已建立(已調(diào)用open方法，但還未調(diào)用send)
-
2：請(qǐng)求已接收(已調(diào)用send方法)
-
3：請(qǐng)求處理中(請(qǐng)求已到達(dá)服務(wù)端，正在處理)
-
4：請(qǐng)求已完成，且響應(yīng)已就緒
-
狀態(tài)： 200——正確、404——未找到頁面、500——錯(cuò)誤
AJAX請(qǐng)求成功和失敗判斷
ajax 的 success 和 error 方法根據(jù)響應(yīng)狀態(tài)碼來觸發(fā)。
當(dāng) XMLHttpRequest.status 為 200 的時(shí)候，表示響應(yīng)成功，此時(shí)觸發(fā) success(). 其他狀態(tài)碼則觸發(fā) error()。
- error判斷，請(qǐng)求失敗
error: function (data) {
var json = JSON.stringify(data);
alert(json);
}
復(fù)制代碼
【readyState】：
0 － （未初始化）還沒有調(diào)用send()方法
1 － （載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求
2 － （載入完成）send()方法執(zhí)行完成，已經(jīng)接收到全部響應(yīng)內(nèi)容
3 － （交互）正在解析響應(yīng)內(nèi)容
4 － （完成）響應(yīng)內(nèi)容解析完成，可以在客戶端調(diào)用了
復(fù)制代碼
完整的AJAX實(shí)例
// -----1.創(chuàng)建XMLHttpRequest對(duì)象，也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象
var xhr = new XMLHttpRequest();
// -----3. 創(chuàng)建一個(gè)新的HTTP請(qǐng)求，并指定該請(qǐng)求的方法、URL及驗(yàn)證信息
xhr.open('post','www.xxx.com',true)
// 接收返回值
// -----2、設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)------5.回調(diào)函數(shù)對(duì)不同狀態(tài)進(jìn)行處理
xhr.onreadystatechange = function(){ //xhr.onreadystatechange = callback;時(shí)間回調(diào)
if(xhr.readyState === 4) {
if(xhr.status >= 200 && xhr.status < 300 || CharacterData.status == 304) {
console.log(xhr.responseText);
}
}
}
// -----處理請(qǐng)求參數(shù)
postData = {"name1": "value1", "name2": "value2"};
postData = (function(value){
var dataString = "";
for(var key in value){
dataString += key+"="+value[key]+"&";
};
return dataString;
}(postData));
// 設(shè)置請(qǐng)求頭
xhr.setRequestHeader("Content-type", "applicationx-www-form-urlencoded");
// 異常處理
xhr.onerror = function() {
console.log('Network request failed')
}
// 跨域攜帶cookie
xhr.withCredentials = true;
// ----4.發(fā)出請(qǐng)求
xhr.send(postData);
復(fù)制代碼
參考文檔：參考文檔1、參考文檔2
|
