XMLHttpRequest對象(簡稱XHR)是ajax技術的核心潦嘶,ajax可以無刷新更新頁面得益于xhr捉撮。
一、創(chuàng)建
var xhr = new XMLHttpRequest();
二治笨、發(fā)送請求
open()
xhr.open("get","example.php", false);
1.第一個參數(shù)指定請求方式
2.第二個參數(shù)url
3.第三個參數(shù)表示是否同步峦耘,默認為true(異步)
4.如果請求一個受密碼保護的URL剔蹋,把用于認證的用戶名和密碼作為第4和第5個參數(shù)傳遞給open()方法
send()
如果是GET方法,send()方法無參數(shù)贡歧,或參數(shù)為null滩租;如果是POST方法,send()方法的參數(shù)為要發(fā)送的數(shù)據(jù)
調(diào)用send()方法后利朵,請求被分派到服務器
xhr.open("get", "example.txt", false);
xhr.send(null);
三律想、接收響應
responseText: 作為響應主體被返回的文本(文本形式)
responseXML: 如果響應的內(nèi)容類型是'text/xml'或'application/xml',這個屬性中將保存著響應數(shù)據(jù)的XML DOM文檔(document形式)
status: HTTP狀態(tài)碼(數(shù)字形式)
statusText: HTTP狀態(tài)說明(文本形式)
四绍弟、同步
如果接受的是同步響應技即,則需要將open()方法的第三個參數(shù)設置為false,那么send()方法將阻塞直到請求完成樟遣。一旦send()返回而叼,僅需要檢查XHR對象的status和responseText屬性即可。
同步請求是吸引人的豹悬,但應該避免使用它們葵陵。客戶端javascript是單線程的瞻佛,當send()方法阻塞時脱篙,它通常會導致整個瀏覽器UI凍結。如果連接的服務器響應慢伤柄,那么用戶的瀏覽器將凍結绊困。
五、異步
如果需要接收的是異步響應适刀,這就需要檢測XHR對象的readyState屬性秤朗,該屬性表示請求/響應過程的當前活動階段。
0(UNSENT):未初始化笔喉。尚未調(diào)用open()方法
1(OPENED):啟動取视。已經(jīng)調(diào)用open()方法硝皂,但尚未調(diào)用send()方法
2(HEADERS_RECEIVED):發(fā)送。己經(jīng)調(diào)用send()方法贫途,且接收到頭信息
3(LOADING):接收吧彪。已經(jīng)接收到部分響應主體信息
4(DONE):完成。已經(jīng)接收到全部響應數(shù)據(jù)丢早,而且已經(jīng)可以在客戶端使用了
理論上,只要readyState屬性值由一個值變成另一個值秧倾,都會觸發(fā)一次readystatechange事件严蓖〔园可以利用這個事件來檢測每次狀態(tài)變化后readyState的值。
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//異步接受響應
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
//實際操作
result.innerHTML += xhr.responseText;
}
}
}
//發(fā)送請求
xhr.open('get','message.xml',true);
xhr.send();