4.6.2 XMLHttpRequest 對象的屬性和方法
IE5.0 開始,開發人員可以在 Web 頁面內部使用 XMLHTTP ActiveX 組件擴展自身的功能,不用從當前的 Web 頁面導航就可以直接將數據傳輸到服務器或者從服務器接收數據。 Mozilla1.0 以及 NetScape7 則是創建繼承 XML 的代理類 XMLHttpRequest ;對于大多數情況, XMLHttpRequest 對象和 XMLHttp 組件很相似,方法和屬性類似,只是部分屬性不同。例程 4-25 的代碼段顯示了如何在 IE 瀏覽器和 Mozilla 瀏覽器中創建 XMLHttp- Request 對象。
例程 4-25 創建 XMLHttpRequest 對象
<script language="javascript">
var http_request = false;
//IE 瀏覽器
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request = new ActiveXObject("Microsoft.XMLHTTP");
//Mozilla 瀏覽器
http_request = new XMLHttpRequest();
</script>
不同版本的 IE 瀏覽器采用不同方式創建 XMLHttpRequest 對象,某些舊版本使用 Microsoft.XMLHTTP ,而較新的版本則使用 Msxml2.XMLHTTP 。通常,為了保證 Ajax 程序的瀏覽器兼容性,需要注意創建 XMLHttpRequest 對象的程序,要同時支持這兩種創建方式。
X MLHttpRequest 對象提供了一系列屬性和方法,來向服務器發起異步 http 請求,監 聽服務 器的狀態,并在服務器完成數據響應處理之后接收服務器返回的信息數據。表 4-1 7 列出了 XMLHttpRequest 對象的屬性。
表 4-17 XMLHttpRequest 對象屬性
屬 性 |
描 述 |
onreadystatechange |
指定當 readyState 屬性改變時的事件處理句柄,屬性為只寫 |
readyState |
返回當前請求的狀態,屬性為只讀 |
responseBody |
將回應信息正文以 unsigned byte 數組形式返回,屬性為只讀 |
responseStream |
以 Ado Stream 對象的形式返回響應信息,屬性為只讀 |
responseText |
以字符串的形式返回服務器響應信息,屬性為只讀 |
responseXML |
將響應信息格式化為 XML Document 對象返回,屬性為只讀 |
status |
返回當前 HTTP 請求的狀態碼,屬性為只讀。如: 404 = " 文件未找到 " 、 200 = " 成功 " |
statusText |
返回當前 HTTP 請求的狀態行,屬性為只讀 |
XMLHttpRequest 對象屬性 readyState 返回當前 XMLHttp 請求的狀態,這些狀態用長 度為 4 的整形數據表示,其屬性的狀態含義如表 4-18 所示:
表 4-18 readyState 屬性的狀態
狀 態 |
含 義 |
說 明 |
0 |
未初始化 |
對象已經建立,但是未初始化,即尚未調用 open 方法創建 http 請求 |
1 |
初始化 |
對象已經建立,但是為調用 send 方法發送 http 請求 |
2 |
發送數據 |
send 方法已經被調用,但是當前的狀態以及 http 頭未知 |
3 |
數據傳送中 |
已經接收部分數據,因為響應及 http 頭不全,這是通過 response 系列方法獲取部分數據會出現錯誤 |
4 |
傳送完成 |
數據接收完畢,此時可以通過 response 系列方法獲取完整的回應數據 |
XMLHttpRequest 對象屬性 onreadystatechange 是 readyState 狀態改變的事件觸發器,用來指定當 readyState 屬性發生改變時的處理事件。在使用過程中,通常通過將事件處理函數名稱賦予 onreadystatechange 的方式,來為 XMLHttpRequest 指定事件觸發器,而在事件處理函數中判斷 readyState 狀態值并做相應的處理。例程 4-26 的代碼段指定 doState- ReadyHandler 函數作為事件處理函數,并在 doStateReadyHandler 函數體內在 readyState 狀態為 4 時彈出一個顯示“完成”信息的對話框。
例程 4-26 指定 XMLHttpRequest 對象的回調函數
var http_request = null;
http_request = new ActiveXObject("Msxml2.XMLHTTP");
function send() {
http_request.onreadystatechange = doStateReadyHandler;
http_request.open("GET","http://localhost/sample.xml",true);
http_request.send();
}
function doStateReadyHandler() {
if(http_request.readySatate==4) window.alert(" 完成 ");
}
XMLHttpRequest 對象屬性 responseText 將響應信息以字符串的形式返回。 XMLHttp- Request 嘗試將響應信息解碼為 Unicode 字符串,默認的響應數據編碼方式為 UTF-8 。如果服務器返回的數據帶有 BOM ( byte-order mark ),則 XMLHttpRequest 可以解碼任何的 UCS-2 或者 UCS-4 數據。如果服務器返回的是 XML 文檔,此屬性不處理 XML 文檔中的編碼聲明,僅將整個 XML 文檔作為字符串返回。
如果服務器以 XML 文檔的格式返回響應數據,這時應該采用 responseXML 屬性加以處理。如果響應數據不是有效的 XML 文檔,此屬性本身不返回 XMLDOMParseError ,可以通過處理過的 DOMDocument 對象獲取錯誤信息。在使用 responseXML 將服務器響應數據以 XML 文檔的形式返回之前,先要將響應的內容類型設置為 application/xml 。
XMLHttpRequest 對象屬性 status 代表當前 http 請求的狀態,為長整型數據。其值及其含義如表 4-19 所示。
表 4-19 http 請求狀態及其含義
值 |
描 述 |
值 |
描 述 |
100 |
客戶必須繼續發出請求 |
404 |
沒有發現文件、查詢或 URl |
101 |
客戶要求服務器根據請求轉換 HTTP 協議版本 |
405 |
用戶在 Request-Line 字段定義的方法不允許 |
200 |
交易成功 |
406 |
根據用戶發送的 Accept 拖,請求資源不可訪問 |
201 |
提示知道新文件的 URL |
407 |
類似 401 ,用戶必須首先在代理服務器上得到授權 |
202 |
接受和處理、但處理未完成 |
408 |
客戶端沒有在用戶指定的餓時間內完成請求 |
203 |
返回信息不確定或不完整 |
409 |
對當前資源狀態,請求不能完成 |
204 |
請求收到,但返回信息為空 |
410 |
服務器上不再有此資源且無進一步的參考地址 |
205 |
服務器完成了請求,用戶代理必須復位當前已經瀏覽過的文件 |
411 |
服務器拒絕用戶定義的 Content-Length 屬性請求 |
206 |
服務器已經完成了部分用戶的 GET 請求 |
412 |
一個或多個請求頭字段在當前請求中錯誤 |
300 |
請求的資源可在多處得到 |
413 |
請求的資源大于服務器允許的大小 |
301 |
刪除請求數據 |
414 |
請求的資源 URL 長于服務器允許的長度 |
302 |
在其他地址發現了請求數據 |
415 |
請求資源不支持請求項目格式 |
303 |
建議客戶訪問其他 URL 或訪問方式 |
416 |
請求中包含 Range 請求頭字段,在當前請求資源范圍內沒有 range 指示值,請求也不包含 If-Range 請求頭字段 |
304 |
客戶端已經執行了 GET ,但文件未變化 |
417 |
服務器不滿足請求 Expect 頭字段指定的期望值,如果是代理服務器,可能是下一級服務器不能滿足請求 |
305 |
請求的資源必須從服務器指定的地址得到 |
500 |
服務器產生內部錯誤 |
307 |
申明請求的資源臨時性刪除 |
501 |
服務器不支持請求的函數 |
400 |
錯誤請求,如語法錯誤 |
502 |
服務器暫時不可用,有時是為了防止發生系統過載 |
401 |
請求授權失敗 |
503 |
服務器過載或暫停維修 |
402 |
保留有效 ChargeTo 頭響應 |
504 |
關口過載,服務器使用另一個關口或服務來響應用戶,等待時間設定值較長 |
403 |
請求不允許 |
505 |
服務器不支持或拒絕支請求頭中指定的 HTTP 版本 |
在這些狀 態中,最常用到的是“ 404 ”。通常,在類似例子 4-20 中 doStateReady Handler 的事件處理函數中,判斷 status 的狀態,然后做相應的處理。
XM LHttpRequest 對象提供了包括 send 、 open 在內的六種方法,用來向服務器發送 http 請求,并設置相應的頭信息。表 4-20 列出 XMLHttpRequest 對象提供的方法及其含義。
表 4-20 XMLHttpRequest 對象的方法及其含義
方 法 |
描 述 |
abort |
取消當前請求 |
getAllResourceHeaders |
獲取相應的全部 http 頭信息 |
getResourceHeader |
從響應信息中獲取指定的 http 頭信息 |
open |
創建一個新的 http 請求,并指定此請求的方法、 URL 、以及驗證信息(用戶名 / 密碼) |
send |
發送請求到 http 服務器并接收回應 |
setRequestHeader |
單獨設定請求的某個 http 頭 |
方 法 abort 的語法為: http_request.abort(); 調用此方法,當前請求返回 UNINITIALIZED 狀態。
方法 getAllResourceHeaders 像 JSP 中的 HttpServletRequest 對象一樣,獲取 http 請求的請求頭信息。其語法為: headers = http_request.getAllResourceHeaders();
相對, getResourceHeader 方法則是獲取某個指定的 http 頭信息,傳入的參數為這個頭信息的名稱,其語法為: header = http_request.getResourceHeader(“header-name”);
getAllResourceHeaders 和 getResourceHeader 這兩種方法,必須等到 http 請求發送成功即 send 方法成功執行之后才能夠執行,否則會報錯。
例程 4-27 使用 getAllResourceHeaders 和 getResourceHeader 兩種方法取得相應的頭信息,并將這些信息以彈出對話框的形式顯示出來。其執行效果如圖 4-23 所示。
圖 4-23 獲取 http 請求頭信息
例程 4-27 sample4_21.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Ch04-- 獲取請求頭信息 </title>
<script language="javascript">
var http_request = false;
function send_request() {// 初始化、指定處理函數、發送請求的函數
http_request = false;
// 開始初始化 XMLHttpRequest 對象
if(window.XMLHttpRequest) { //Mozilla 瀏覽器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {// 設置 MiME 類別
http_request.overrideMimeType('text/xml');
}
}
else if (window.ActiveXObject) { // IE 瀏覽器
try {
http_request = new ActiveXObject("Msxml2.XML HTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft. XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 異常,創建對象實例失敗
window.alert(" 不能創建 XMLHttpRequest 對象實例 .");
return false;
}
// 確定發送請求的方式和 URL 以及是否異步執行下段代碼
http_request.open("GET","sample4_19.htm", false);
http_request.send(null);
window.alert(" 全部頭信息如下: /n"+http_request.getAll Response Headers() +
"/n"+" 頭信息編碼類型: /n"+http_request.getResponseHeader ("Content-Type"));
}
</script>
</head>
<body>
<input type="button" name="button" value=" 顯示頭信息 " onClick="send_ request()">
</body>
</html>
XMLHttpRequest 對象的 open 方法用來新建一個 http 請求,并設置請求的方法、 URL 以及驗證信息等。其具體語法為:
http_request.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
bstrMethod 代表 http 方法,可選值為 POST 、 GET 、 PUT 和 PROPFIND ,大小寫不敏感。 bstrUrl 為請求的目標 URL 地址,可以是絕對地址也可以是相對地址。 varAsync 為布爾型參數,指定該請求是否為異步方式,默認為 true ;如果為真,當 state 狀態改變時會調用 onreadystatechange 屬性指向的回調函數。如果服務器需要驗證,則應該指定 bstrUser 參數為要驗證的用戶名, bstrPassword 參數為要驗證的密碼。如果 bstrUser 、 bstrPassword 參數不指定,則在服務器需要驗證的時候,會彈出驗證對話框。
創建 http 請求之后,就可以向服務器發送 http 請求, send 方法被調用,其語法為:
http_request.send(varBody);
參數 varBody 為要發送給服務器的內容。如果沒有內容要發送, varBody 參數可以省 略。此方法的同步或異步方式取決于 open 方法中的 varAsync 參數,如果 varAsync 為 False , 此方法將會等待請求完成或者超時時才會返回,如果 varAsync 為 True ,此方法將立即返回。如果發送的數據為 BSTR ,則回應被編碼為 UTF-8 ,必須在適當位置設置一個包含 charset 的文檔類型頭。如果發送的數據為 XML DOM object ,則回應將被編碼為在 xml 文檔中聲明的編碼,如果在 xml 文檔中沒有聲明編碼,則使用默認的 UTF-8 。
在 Ajax 應用程序中,有兩種方法可以向服務器發送請求內容。一種是以“ & 內容名稱 = 內容值”的形式直接附加在目標 URL 后面,通過 open() 方法設置發送內容。另外一種是將要發送的內容作為 send() 方法的參數,內容名稱及其值也是成對出現的,中間用 & 字符隔開。
<!-- page -->
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
