思路:
1:Javascript監(jiān)聽瀏覽器網(wǎng)頁事件(點(diǎn)擊,提交,更改等)
2:由javascript創(chuàng)建Ajax引擎對象
3:通過Ajax引擎對象發(fā)出請求
4:Ajax引擎等待并且接受服務(wù)器的響應(yīng)內(nèi)容
5:javascript再從 Ajax引擎對象 中獲取響應(yīng)內(nèi)容,
并且通過dom改變網(wǎng)頁界面顯示效果
(1)創(chuàng)建Ajax引擎對象
就是XMLHtttpRequest對象,所有現(xiàn)代瀏覽器均支持XMLHttpRequest對象
(IE5 和 IE6 使用 ActiveXObject)它同時(shí)也是一個(gè)Javascript對象.
Ajax引擎(XMLHttpRequest)
兼容處理
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest;
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
(2) 配置請求對象的信息
xhr.open('GET/POST','url地址',['是否異步']);
注意:如果使用post請求,就一定要設(shè)置請求頭
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312");
(3) 發(fā)送請求
xhr.send([post請求參數(shù)字符串]);
發(fā)送請求分為兩種情況:
【1】監(jiān)控用戶的事件(onclick,onchange等),通過ajax發(fā)送請求
【2】監(jiān)控瀏覽器的事件(onload),通過ajax發(fā)送請求.
(4) 監(jiān)聽Ajax引擎對象的改變(是否正確做出了響應(yīng))
xmlHttpRequest.onreadystatechange = function(){
if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
//xmlHttpRequest.responseText
}
}
【1】 詳解onreadystatechange
onreadystatechange屬性是一個(gè)方法,
監(jiān)控到響應(yīng)內(nèi)容的返回,
根據(jù)響應(yīng)內(nèi)容使用javascript改變當(dāng)前頁面的部分html代碼,從而達(dá)到不刷新改變局部html代碼.
當(dāng)Ajax引擎的狀態(tài)發(fā)生改變時(shí)都會執(zhí)行onreadystatechange屬性對應(yīng)的方法
其他方法:
abort:取消當(dāng)前請求
getAllResponseHeaders:獲取響應(yīng)的所有http頭
getResponseHeader:從響應(yīng)信息中獲取指定的http頭
open(方式get/post砖第,url地址攻走,同步異步):
創(chuàng)建一個(gè)新的http請求喜最,打開請求识樱,并指定此請求的方法、URL以及驗(yàn)證信息(用戶名/密碼)
send():發(fā)送請求到http服務(wù)器并接收回應(yīng)
setRequestHeader:單獨(dú)指定請求的某個(gè)http頭,header()設(shè)置http頭協(xié)議信息
其他屬性:
onreadystatechange:指定當(dāng)readyState屬性改變時(shí)的事件處理句柄。
readyState:返回當(dāng)前請求的狀態(tài)周偎,ajax行進(jìn)過程中不同狀態(tài)
responseBody:將回應(yīng)信息正文以unsigned byte數(shù)組形式返回.
responseStream:以Ado Stream對象的形式返回響應(yīng)信息。
responseText:將響應(yīng)信息作為字符串返回.只讀
responseXML:將響應(yīng)信息格式化為Xml Document對象并返回撑帖,只讀
status:返回當(dāng)前請求的http狀態(tài)碼. 200 ok 304 緩存蓉坎;
404 not found; 403 沒有權(quán)限 501 服務(wù)器級別錯(cuò)誤
statusText:返回當(dāng)前請求的響應(yīng)行狀態(tài)文本, ok not found forbidden
【4】 - 詳解Ajax引擎的狀態(tài)屬性 readyState(0 1 2 3 4)
*0.請求未初始化
*1.服務(wù)器連接已建立
*2.請求已接收
*3.請求處理中
*4.請求已完成,并且響應(yīng)已就緒
當(dāng)Ajax引擎的狀態(tài)屬性為readyState為4時(shí),說明服務(wù)器的響應(yīng)已經(jīng)發(fā)送給Ajax請求了.
但是響應(yīng)的狀態(tài)嗎為200時(shí):說明響應(yīng)的內(nèi)容是正確的,這時(shí)才會根據(jù)相應(yīng)內(nèi)容對當(dāng)前頁面的html處理
總結(jié):
var xhr = new XMLHttpRequest;
xhr.open('GET/POST','url地址',['是否異步']);
xhr.send([post請求參數(shù)字符串]);
xhr.onreadystatechange = function(){
if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) {
//xhr.responseText
}
}