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 個狀态中每一個都有一個相關聯的非正式的名稱，下表列出了狀态、名稱和含義：

狀态	名稱	描述
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 請求參數

文法

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 請求

文法

如果通過調用 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()

文法

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 ）：

在 Internet Explorer 5 和 6 中：

執行個體

<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 / 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

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

XMLHttpRequest 對象基礎知識