JavaScript Ajax
簡介
Ajax彩倚，Asynchronous JavaScript + XML堵未，核心是XMLHttpRequest對象。
IE7+赂苗，Chrome愉耙，F(xiàn)irefox，Safari原生支持XHR對象拌滋。
在JavaScript中一個(gè)客戶端Http請求通常有四個(gè)部分組成朴沿。
- Http請求方法或動(dòng)作；
- 正在請求的URL；
- 一個(gè)可選的請求頭集合赌渣，其中可能包括身份驗(yàn)證信息魏铅；
- 一個(gè)可選的請求主體。
一個(gè)服務(wù)端返回的HTTP響應(yīng)包含3個(gè)部分坚芜。
- 一個(gè)數(shù)字和文字組成的狀態(tài)碼览芳，用顯示請求的成功和失敗鸿竖；
- 一個(gè)響應(yīng)頭集合沧竟；
- 一個(gè)響應(yīng)主體。
XMLHttpRequest()使用
使用XHR建立http請求代碼示例.
var xhr = new XMLHttpRequest();
//打開http請求,第一個(gè)參數(shù) http請求的方法或動(dòng)作,第二次參數(shù)http的請求URL,第三個(gè)參數(shù)ajax是否為異步執(zhí)行缚忧。
xhr.open("get","example.php?value1=a&value2=b",false);
// 設(shè)置可選的請求頭集合悟泵，主要包括對請求主體、當(dāng)前瀏覽器環(huán)節(jié)闪水、cookie的信息糕非。
//使用多個(gè)setRequestHeader()方法會(huì)對請求合集增加內(nèi)容。
xhr.setRequsetHeader("Content-Type","text/plain");
//設(shè)置請求主體,對于get方法參數(shù)在url中填寫,故使用null代替球榆。
xhr.send(null);
使用XHR處理服務(wù)器返回響應(yīng)
//本端代碼插入上端第10行和第1行之間朽肥。
//對XHR對象中自帶onreadyStatechange事件,添加事件函數(shù)。該事件監(jiān)聽readyState值的變化持钉。
xhr.onreadyStatechange = function(){
//xhr.readyState表示請求或響應(yīng)過程中的活動(dòng)階段,0表示初始化鞠呈；1表示啟動(dòng);2表示發(fā)送;3表示接受;4表示完成。
//處理服務(wù)器返回響應(yīng),在請求或響應(yīng)過程完成階段右钾。
if(xhr.readyState == 4){
//xhr.status表示響應(yīng)的HTTP狀態(tài)碼,200表示成功,304表示請求資源沒有修改可以使用緩存中的版本,這兩個(gè)狀態(tài)碼表示響應(yīng)有效蚁吝。
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
//解析響應(yīng)頭集合,識(shí)別響應(yīng)主體內(nèi)容
var type = xhr.getResponseHeader("Content-Type");
if(type.match(/^text/)){
//處理響應(yīng)主體
alert(xhr.responseText);
}
}
}
}
