XMLHttpRequest 對象基礎知識

XMLHttpRequest 對象

XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應，並且能夠以文本或者一個 DOM 文檔的形式返回內容。

儘管名爲 XMLHttpRequest ，它並不限於和 XML 文檔一起使用：它可以接收任何形式的文本文檔。

XMLHttpRequest 對象是名爲 AJAX 的 Web 應用程序架構的一項關鍵功能。

瀏覽器支持

XMLHttpRequest 得到了所有現代瀏覽器較好的支持。唯一的瀏覽器依賴性涉及 XMLHttpRequest 對象的創建。在 IE 5 和 IE 6 中，必須使用特定於 IE 的 ActiveXObject() 構造函數。正如在 XMLHttpRequest 對象 這一節所介紹的。

W3C 標準化

XMLHttpRequest 對象還沒有標準化，但是 W3C 已經開始了標準化的工作，本手冊介紹的內容都是基於標準化的工作草案。

當前的 XMLHttpRequest 實現已經相當一致。但是和標準有細微的不同。例如，一個實現可能返回 null ，而標準要求是空字符串，或者實現可能把 readyState 設置爲 3 而不保證所有的響應頭部都可用。

屬性

readyState

HTTP 請求的狀態. 當一個 XMLHttpRequest 初次創建時，這個屬性的值從 0 開始，直到接收到完整的 HTTP 響應，這個值增加到 4 。

5 個狀態中每一個都有一個相關聯的非正式的名稱，下表列出了狀態、名稱和含義：

狀態	名稱	描述
0	Uninitialized	初始化狀態。 XMLHttpRequest 對象已創建或已被 abort() 方法重置。
1	Open	open() 方法已調用，但是 send() 方法未調用。請求還沒有被髮送。
2	Sent	Send() 方法已調用， HTTP 請求已發送到 Web 服務器。未接收到響應。
3	Receiving	所有響應頭部都已經接收到。響應體開始接收但未完成。
4	Loaded	HTTP 響應已經完全接收。

readyState 的值不會遞減，除非當一個請求在處理過程中的時候調用了 abort() 或 open() 方法。每次這個屬性的值增加的時候，都會觸發 onreadystatechange 事件句柄。

responseText

目前爲止爲服務器接收到的響應體（不包括頭部），或者如果還沒有接收到數據的話，就是空字符串。

如果 readyState 小於 3 ，這個屬性就是一個空字符串。當 readyState 爲 3 ，這個屬性返回目前已經接收的響應部分。如果 readyState 爲 4 ，這個屬性保存了完整的響應體。

如果響應包含了爲響應體指定字符編碼的頭部，就使用該編碼。否則，假定使用 Unicode UTF-8 。

responseXML

對請求的響應，解析爲 XML 並作爲 Document 對象 返回。

status

由服務器返回的 HTTP 狀態代碼 ，如 200 表示成功，而 404 表示 "Not Found" 錯誤。當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。

statusText

這個屬性用名稱而不是數字指定了請求的 HTTP 的狀態代碼。也就是說，當狀態爲 200 的時候它是 "OK" ，當狀態爲 404 的時候它是 "Not Found" 。和 status 屬性一樣，當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。

事件句柄

onreadystatechange

每次 readyState 屬性改變的時候調用的事件句柄函數。當 readyState 爲 3 時，它也可能調用多次。

方法

abort()

取消當前響應，關閉連接並且結束任何未決的網絡活動。

這個方法把 XMLHttpRequest 對象重置爲 readyState 爲 0 的狀態，並且取消所有未決的網絡活動。例如，如果請求用了太長時間，而且響應不再必要的時候，可以調用這個方法。

getAllResponseHeaders()

把 HTTP 響應頭部作爲未解析的字符串返回。

如果 readyState 小於 3 ，這個方法返回 null 。否則，它返回服務器發送的所有 HTTP 響應的頭部。頭部作爲單個的字符串返回，一行一個頭部。每行用換行符 "/r/n" 隔開。

getResponseHeader()

返回指定的 HTTP 響應頭部的值。其參數是要返回的 HTTP 響應頭部的名稱。可以使用任何大小寫來制定這個頭部名字，和響應頭部的比較是不區分大小寫的。

該方法的返回值是指定的 HTTP 響應頭部的值，如果沒有接收到這個頭部或者 readyState 小於 3 則爲空字符串。如果接收到多個有指定名稱的頭部，這個頭部的值被連接起來並返回，使用逗號和空格分隔開各個頭部的值。

open()

初始化 HTTP 請求參數，例如 URL 和 HTTP 方法，但是並不發送請求。

send()

發送 HTTP 請求，使用傳遞給 open() 方法的參數，以及傳遞給該方法的可選請求體。

setRequestHeader()

向一個打開但未發送的請求設置或添加一個 HTTP 請求。

XMLHttpRequest.open()

初始化 HTTP 請求參數

語法

open(method, url, async, username, password)

method 參數是用於請求的 HTTP 方法。值包括 GET 、POST 和 HEAD 。

url 參數是請求的主體。大多數瀏覽器實施了一個同源安全策略，並且要求這個 URL 與包含腳本的文本具有相同的主機名和端口。

async 參數指示請求使用應該異步地執行。如果這個參數是 false ，請求是同步的，後續對 send() 的調用將阻塞，直到響應完全接收。如果這個參數是 true 或省略，請求是異步的，且通常需要一個 onreadystatechange 事件句柄。

username 和 password 參數是可選的，爲 url 所需的授權提供認證資格。如果指定了，它們會覆蓋 url 自己指定的任何資格。

說明

這個方法初始化請求參數以供 send() 方法稍後使用。它把 readyState 設置爲 1 ，刪除之前指定的所有請求頭部，以及之前接收的所有響應頭部，並且把 responseText 、responseXML 、status 以及 statusText 參數設置爲它們的默認值。當 readyState 爲 0 的時候（當 XMLHttpRequest 對象剛創建或者 abort() 方法調用後）以及當 readyState 爲 4 時（已經接收響應時），調用這個方法是安全的。當針對任何其他狀態調用的時候，open() 方法的行爲是爲指定的。

除了保存供 send() 方法使用的請求參數，以及重置 XMLHttpRequest 對象以便複用，open() 方法沒有其他的行爲。要特別注意，當這個方法調用的時候，實現通常不會打開一個到 Web 服務器的網絡連接。

XMLHttpRequest.send()

發送一個 HTTP 請求

語法

send(body)

如果通過調用 open() 指定的 HTTP 方法是 POST 或 PUT ，body 參數指定了請求體，作爲一個字符串或者 Document 對象 。如果請求體不適必須的話，這個參數就爲 null 。對於任何其他方法，這個參數是不可用的，應該爲 null （有些實現不允許省略該參數）。

說明

這個方法導致一個 HTTP 請求發送。如果之前沒有調用 open() ，或者更具體地說，如果 readyState 不是 1 ，send() 拋出一個異常。否則，它發送一個 HTTP 請求，該請求由以下幾部分組成：

• 之前調用 open() 時指定的 HTTP 方法、 URL 以及認證資格（如果有的話）。
• 之前調用 setRequestHeader() 時指定的請求頭部（如果有的話）。
• 傳遞給這個方法的 body 參數。

一旦請求發佈了，send() 把 readyState 設置爲 2 ，並觸發 onreadystatechange 事件句柄。

如果之前調用的 open() 參數 async 爲 false ，這個方法會阻塞並不會返回，直到 readyState 爲 4 並且服務器的響應被完全接收。否則，如果 async 參數爲 true ，或者這個參數省略了，send() 立即返回，並且正如後面所介紹的，服務器響應將在一個後臺線程中處理。

如果服務器響應帶有一個 HTTP 重定向，send() 方法或後臺線程自動遵從重定向。當所有的 HTTP 響應頭部已經接收，send() 或後臺線程把 readyState 設置爲 3 並觸發 onreadystatechange 事件句柄。如果響應較長，send() 或後臺線程可能在狀態 3 中觸發 onreadystatechange 事件句柄：這可以作爲一個下載進度指示器。最後，當響應完成，send() 或後臺線程把 readyState 設置爲 4 ，並最後一次觸發事件句柄。

XMLHttpRequest.setRequestHeader()

語法

setRequestHeader(name, value)

name 參數是要設置的頭部的名稱。這個參數不應該包括空白、冒號或換行。

value 參數是頭部的值。這個參數不應該包括換行。

說明

setRequestHeader() 方法指定了一個 HTTP 請求的頭部，它應該包含在通過後續 send() 調用而發佈的請求中。這個方法只有當 readyState 爲 1 的時候才能調用，例如，在調用了 open() 之後，但在調用 send() 之前。

如果帶有指定名稱的頭部已經被指定了，這個頭部的新值就是：之前指定的值，加上逗號、空白以及這個調用指定的值。

如果 open() 調用指定了認證資格，XMLHttpRequest 自動發送一個適當的 Authorization 請求頭部。但是，你可以使用 setRequestHeader() 來來添加這個頭部。類似地，如果 Web 服務器已經保存了和傳遞給 open() 的 URL 相關聯的 cookie ，適當的 Cookie 或 Cookie2 頭部也自動地包含到請求中。可以通過調用 setRequestHeader() 來把這些 cookie 添加到頭部。XMLHttpRequest 也可以爲 User-Agent 頭部提供一個默認值。如果它這麼做，你爲該頭部指定的任何值都會添加到這個默認值後面。

有些請求頭部由 XMLHttpRequest 自動設置而不是由這個方法設置，以符合 HTTP 協議。這包括如下和代理相關的頭部：

• Host
• Connection
• Keep-Alive
• Accept-charset
• Accept-Encoding
• If-Modified-Since
• If-None-Match
• If-Range
• Range

 

 

 

 

 

 

XMLHttpRequest 對象提供了在網頁加載後與服務器進行通信的方法。

什麼是 XMLHttpRequest 對象？

XMLHttpRequest 對象是開發者的夢想 ，因爲您能夠：

• 在不重新加載頁面的情況下更新網頁
• 在頁面已加載後從服務器請求數據
• 在頁面已加載後從服務器接收數據
• 在後臺向服務器發送數據

所有現代的瀏覽器都支持 XMLHttpRequest 對象。

實例：當鍵入文本時與服務器進行 XML HTTP 通信 。

創建 XMLHttpRequest 對象

通過一行簡單的 JavaScript 代碼，我們就可以創建 XMLHttpRequest 對象。

在所有現代瀏覽器中（包括 IE 7 ）：

xmlhttp=new XMLHttpRequest()

在 Internet Explorer 5 和 6 中：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

實例

 

<mce:script type="text/javascript"><!-- var xmlhttp; function loadXMLDoc(url) { xmlhttp=null; if (window.XMLHttpRequest) {// code for all new browsers xmlhttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {// code for IE5 and IE6 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlhttp!=null) { xmlhttp.onreadystatechange=state_Change; xmlhttp.open("GET",url,true); xmlhttp.send(null); } else { alert("Your browser does not support XMLHTTP."); } } function state_Change() { if (xmlhttp.readyState==4) {// 4 = "loaded" if (xmlhttp.status==200) {// 200 = OK // ...our code here... } else { alert("Problem retrieving XML data"); } } } // --></mce:script> 

TIY

註釋：onreadystatechange 是一個事件句柄。它的值 (state_Change) 是一個函數的名稱，當 XMLHttpRequest 對象的狀態發生改變時，會觸發此函數。狀態從 0 (uninitialized) 到 4 (complete) 進行變化。僅在狀態爲 4 時，我們才執行代碼。

爲什麼使用 Async=true ？

我們的實例在 open() 的第三個參數中使用了 "true" 。

該參數規定請求是否異步處理。

True 表示腳本會在 send() 方法之後繼續執行，而不等待來自服務器的響應。

onreadystatechange 事件使代碼複雜化了。但是這是在沒有得到服務器響應的情況下，防止代碼停止的最安全的方法。

通過把該參數設置爲 "false" ，可以省去額外的 onreadystatechange 代碼。如果在請求失敗時是否執行其餘的代碼無關緊要，那麼可以使用這個參數。

TIY

更多實例

通過 XML HTTP 把一個 textfile 載入一個 div 元素中

通過 XML HTTP 進行 HEAD 請求

通過 XML HTTP 進行指定的 HEAD 請求

通過 XML HTTP 列出 XML 文件中的數據

XML / ASP

您也可以把 XML 文檔打開併發送到服務器上的 ASP 頁面，分析此請求，然後傳回結果。

<html> <body> <mce:script type="text/javascript"><!-- xmlHttp=null; if (window.XMLHttpRequest) {// code for IE7, Firefox, Opera, etc. xmlHttp=new XMLHttpRequest(); } else if (window.ActiveXObject) {// code for IE6, IE5 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } if (xmlHttp!=null) { xmlHttp.open("GET", "note.xml", false); xmlHttp.send(null); xmlDoc=xmlHttp.responseText; xmlHttp.open("POST", "demo_dom_http.asp", false); xmlHttp.send(xmlDoc); document.write(xmlHttp.responseText); } else { alert("Your browser does not support XMLHTTP."); } // --></mce:script> </body> </html> ASP 頁面，由 VBScript 編寫： <% set xmldoc = Server.CreateObject("Microsoft.XMLDOM") xmldoc.async=false xmldoc.load(request) for each x in xmldoc.documentElement.childNodes if x.NodeName = "to" then name=x.text next response.write(name) %>

通過使用 response.write 屬性把結果傳回客戶端。

TIY

XMLHttpRequest 對象是 W3C 的標準嗎？

任何 W3C 推薦標準均未規定 XMLHttpRequest 對象。

不過，W3C DOM Level 3 的 "Load and Save" 規範包含了一些相似的功能性，但是還沒有任何瀏覽器實現它們。

參閱

XML DOM 參考手冊: XMLHttpRequest 對象

 

 

轉自：http://www.w3school.com.cn