實用代碼-JavaScript之XMLHttpRequest對象屬性和方法

XMLHttpRequest簡介

XMLHttpRequest對象用於在後台與伺服器交換資料。是AJAX的用戶端核心對象。一個小例子：

 1 //初始化XMLHttpRequest對象 2 var xhr=null; 3 var textName=null; 4 var infoTag=null; 5 //建立XmlHttpRequest對象並返回 6 function CreateXMLHttpRequest(){ 7     var xmlHttp; 8     if(window.XMLHttpRequest){ 9         xmlHttp=new XMLHttpRequest();10     } 11     else if(window.ActiveXObject){12         xmlHttp=new ActiveXObject('Microsoft.XMLHTTP');13     }14     return xmlHttp;15 }16 //非同步檢查使用者名稱是否存在17 function Check(){18     textName=document.getElementById('user');19     infoTag=document.getElementById('info');20     var sendData='userName='+textName.value;21     if(textName.value!=""){22         xhr=CreateXMLHttpRequest();23         xhr.onreadystatechange=CallBack_ShowData; 24         xhr.open('Post','Server_php/ServerCheck.php',true);25         //post方式需要下面兩句設定Header26         xhr.setRequestHeader("content-length",sendData.length);27         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 28         //要POST的資料        29         xhr.send(sendData);30     }31     else{32     infoTag.innerHTML='請輸入使用者名稱';33     }34 }35 function CallBack_ShowData(){36     if(xhr.readyState == 4){37     if(xhr.status==200){38         var data=xhr.responseText;39         //如果使用者名稱存在則清空user，並使其獲得焦點40         if(data.split('|')[1]=='Error'){41             textName.value='';42             textName.focus();                    43         }44         //不存在則讓下一輸入框獲得焦點45         else{46             infoTag.focus();47         }48         //顯示非同步傳輸過來的資料49         infoTag.innerHTML=data.split('|')[0];50     }51     }52 }

一些方法和屬性：

方法	屬性
open()	onreadystatechange
setRequestHeader()	status
send()	readyState
getResponseHeader()	statusText
getAllResponseHeaders()	responseText responseXML responseBody responseStream

open

初始化HTTP請求參數,文法(method, url, async, username, password)：

method指定請求方式,一般是[GET、POST]不區分大小寫；url指定請求地址,大多數瀏覽器都限制在同域下[要求url與請求頁面具有相同的主機名稱和連接埠],可以為絕對位址也可以為相對位址；async指定請求是非同步還是同步,預設是非同步[true]則通常許指定一個onreadystatechange控制代碼[用於非同步回調],同步則指定為[false]；username 和 password 參數是可選的[及在請求的url需要授權時填寫]；setRequestHeader

單獨指定請求的某個http頭,文法(headerStr,valueStr)：

headerStr指定頭名稱, 如果存在則覆蓋；valueStr指定值[此方法必須在open方法後調用]。send

發送請求到http伺服器並接收回應,文法(varBody)：

指定請求中發送的資料;此方法的同步或非同步方式取決於open方法中的async參數,如果async == False,此方法將會等待請求完成或者逾時時才會返回;如果async == True，此方法將立即返回。getAllResponseHeaders

擷取響應的所有http頭,文法()：

每個http頭名稱和值用冒號分割，並以\r\n結束。當send方法完成後才可調用該方法。getResponseHeader

從響應資訊中擷取指定的http頭,文法(headerStr)：

headerStr指定頭名稱,當send方法成功後才可調用該方法。onreadystatechange

當readyState屬性改變時調用該屬性指定的方法

status

2**：操作成功收到，分析、接受[200常用]

4**：用戶端請求錯誤

5**：伺服器響應錯誤

statusText

statusText屬性和status屬性的功能基本相同．他們的區別在於status返回的是http狀態代碼[數字形式]； 而statusText返回的是以文本形式返回http狀態資訊.比如在請求一個不存在的網頁時status返回404, 而statusText則返回Not Found。

readyState

0	未初始化	還沒有調用send()方法
1	載入	已調用send()方法，正在發送請求
2	載入完成	send()方法執行完成，已經接收到全部響應內容
3	互動	正在解析響應內容
4	完成	響應內容解析完成，可以在用戶端調用了

responseText

responseText	將響應資訊作為字串返回;XMLHTTP預設將響應資料的編碼定為UTF-8;
responseXML	將響應資訊格式化為Xml Document對象並返回;如果響應資料不是有效XML文檔，此屬性本身不返回XMLDOMParseError，可以通過處理過的DOMDocument對象擷取錯誤資訊
responseBody	以unsigned array格式表示直接從伺服器返回的未經解碼的位元據
responseStream	以Ado Stream對象的形式返迴響應資訊

最後還有一個abort方法，用於取消當前請求。