javascript XMLHttpRequest對(duì)象全面剖析

2019-11-21 00:33:16

字體：大中小

供稿：網(wǎng)友

一、引言

　　異步JavaScript與XML(AJAX)是一個(gè)專用術(shù)語(yǔ)，用于實(shí)現(xiàn)在客戶端腳本與服務(wù)器之間的數(shù)據(jù)交互過程。這一技術(shù)的優(yōu)點(diǎn)在于，它向開發(fā)者提供了一種從Web服務(wù)器檢索數(shù)據(jù)而不必把用戶當(dāng)前正在觀察的頁(yè)面回饋給服務(wù)器。與現(xiàn)代瀏覽器的通過存取瀏覽器DOM結(jié)構(gòu)的編程代碼(JavaScript)動(dòng)態(tài)地改變被顯示內(nèi)容的支持相配合，AJAX讓開發(fā)者在瀏覽器端更新被顯示的HTML內(nèi)容而不必刷新頁(yè)面。換句話說，AJAX可以使基于瀏覽器的應(yīng)用程序更具交互性而且更類似傳統(tǒng)型桌面應(yīng)用程序。

　　Google的Gmail和Outlook Express就是兩個(gè)使用AJAX技術(shù)的我們所熟悉的例子。而且，AJAX可以用于任何客戶端腳本語(yǔ)言中，這包括JavaScript，Jscript和VBScript。

　　AJAX利用一個(gè)構(gòu)建到所有現(xiàn)代瀏覽器內(nèi)部的對(duì)象-XMLHttpRequest-來實(shí)現(xiàn)發(fā)送和接收HTTP請(qǐng)求與響應(yīng)信息。一個(gè)經(jīng)由XMLHttpRequest對(duì)象發(fā)送的HTTP請(qǐng)求并不要求頁(yè)面中擁有或回寄一個(gè)＜form＞元素。AJAX中的"A"代表了"異步"，這意味著XMLHttpRequest對(duì)象的send()方法可以立即返回，從而讓W(xué)eb頁(yè)面上的其它HTML/JavaScript繼續(xù)其瀏覽器端處理而由服務(wù)器處理HTTP請(qǐng)求并發(fā)送響應(yīng)。盡管缺省情況下請(qǐng)求是異步進(jìn)行的，但是，你可以選擇發(fā)送同步請(qǐng)求，這將會(huì)暫停其它Web頁(yè)面的處理，直到該頁(yè)面接收到服務(wù)器的響應(yīng)為止。

　　微軟在其Internet Explorer(IE) 5中作為一個(gè)ActiveX對(duì)象形式引入了XMLHttpRequest對(duì)象。其他的認(rèn)識(shí)到這一對(duì)象重要性的瀏覽器制造商也都紛紛在他們的瀏覽器內(nèi)實(shí)現(xiàn)了XMLHttpRequest對(duì)象，但是作為一個(gè)本地JavaScript對(duì)象而不是作為一個(gè)ActiveX對(duì)象實(shí)現(xiàn)。而如今，在認(rèn)識(shí)到實(shí)現(xiàn)這一類型的價(jià)值及安全性特征之后，微軟已經(jīng)在其IE 7中把XMLHttpRequest實(shí)現(xiàn)為一個(gè)窗口對(duì)象屬性。幸運(yùn)的是，盡管其實(shí)現(xiàn)(因而也影響到調(diào)用方式)細(xì)節(jié)不同，但是，所有的瀏覽器實(shí)現(xiàn)都具有類似的功能，并且實(shí)質(zhì)上是相同方法。目前，W3C組織正在努力進(jìn)行XMLHttpRequest對(duì)象的標(biāo)準(zhǔn)化，并且已經(jīng)發(fā)行了有關(guān)該W3C規(guī)范的一個(gè)草案。

　　本文將對(duì)XMLHttpRequest對(duì)象API進(jìn)行詳細(xì)討論，并將解釋其所有的屬性和方法。

　　二、 XMLHttpRequest對(duì)象的屬性和事件

　　XMLHttpRequest對(duì)象暴露各種屬性、方法和事件以便于腳本處理和控制HTTP請(qǐng)求與響應(yīng)。下面，我們將對(duì)此展開詳細(xì)的討論。
readyState屬性

　　當(dāng)XMLHttpRequest對(duì)象把一個(gè)HTTP請(qǐng)求發(fā)送到服務(wù)器時(shí)將經(jīng)歷若干種狀態(tài)：一直等待直到請(qǐng)求被處理；然后，它才接收一個(gè)響應(yīng)。這樣以來，腳本才正確響應(yīng)各種狀態(tài)-XMLHttpRequest對(duì)象暴露一個(gè)描述對(duì)象的當(dāng)前狀態(tài)的readyState屬性，如表格1所示。

　　表格1.XMLHttpRequest對(duì)象的ReadyState屬性值列表。

ReadyState取值	描述
0	描述一種"未初始化"狀態(tài)；此時(shí)，已經(jīng)創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，但是還沒有初始化。
1	描述一種"發(fā)送"狀態(tài)；此時(shí)，代碼已經(jīng)調(diào)用了XMLHttpRequest open()方法并且XMLHttpRequest已經(jīng)準(zhǔn)備好把一個(gè)請(qǐng)求發(fā)送到服務(wù)器。
2	描述一種"發(fā)送"狀態(tài)；此時(shí)，已經(jīng)通過send()方法把一個(gè)請(qǐng)求發(fā)送到服務(wù)器端，但是還沒有收到一個(gè)響應(yīng)。
3	描述一種"正在接收"狀態(tài)；此時(shí)，已經(jīng)接收到HTTP響應(yīng)頭部信息，但是消息體部分還沒有完全接收結(jié)束。
4	描述一種"已加載"狀態(tài)；此時(shí)，響應(yīng)已經(jīng)被完全接收。

　　onreadystatechange事件

　　無(wú)論readyState值何時(shí)發(fā)生改變，XMLHttpRequest對(duì)象都會(huì)激發(fā)一個(gè)readystatechange事件。其中，onreadystatechange屬性接收一個(gè)EventListener值-向該方法指示無(wú)論readyState值何時(shí)發(fā)生改變，該對(duì)象都將激活。

　　responseText屬性

　　這個(gè)responseText屬性包含客戶端接收到的HTTP響應(yīng)的文本內(nèi)容。當(dāng)readyState值為0、1或2時(shí)，responseText包含一個(gè)空字符串。當(dāng)readyState值為3(正在接收)時(shí)，響應(yīng)中包含客戶端還未完成的響應(yīng)信息。當(dāng)readyState為4(已加載)時(shí)，該responseText包含完整的響應(yīng)信息。

　　responseXML屬性

　　此responseXML屬性用于當(dāng)接收到完整的HTTP響應(yīng)時(shí)(readyState為4)描述XML響應(yīng)；此時(shí)，Content-Type頭部指定MIME(媒體)類型為text/xml，application/xml或以+xml結(jié)尾。如果Content-Type頭部并不包含這些媒體類型之一，那么responseXML的值為null。無(wú)論何時(shí)，只要readyState值不為4，那么該responseXML的值也為null。

　　其實(shí)，這個(gè)responseXML屬性值是一個(gè)文檔接口類型的對(duì)象，用來描述被分析的文檔。如果文檔不能被分析(例如，如果文檔不是良構(gòu)的或不支持文檔相應(yīng)的字符編碼)，那么responseXML的值將為null。

　　status屬性

　　這個(gè)status屬性描述了HTTP狀態(tài)代碼，而且其類型為short。而且，僅當(dāng)readyState值為3(正在接收中)或4(已加載)時(shí)，這個(gè)status屬性才可用。當(dāng)readyState的值小于3時(shí)試圖存取status的值將引發(fā)一個(gè)異常。

　　statusText屬性

　　這個(gè)statusText屬性描述了HTTP狀態(tài)代碼文本；并且僅當(dāng)readyState值為3或4才可用。當(dāng)readyState為其它值時(shí)試圖存取statusText屬性將引發(fā)一個(gè)異常。

三、 XMLHttpRequest對(duì)象的方法

　　XMLHttpRequest對(duì)象提供了各種方法用于初始化和處理HTTP請(qǐng)求，下列將逐個(gè)展開詳細(xì)討論。

　　abort()方法

　　你可以使用這個(gè)abort()方法來暫停與一個(gè)XMLHttpRequest對(duì)象相聯(lián)系的HTTP請(qǐng)求，從而把該對(duì)象復(fù)位到未初始化狀態(tài)。

　　open()方法

　　你需要調(diào)用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一個(gè)XMLHttpRequest對(duì)象。其中，method參數(shù)是必須提供的-用于指定你想用來發(fā)送請(qǐng)求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。為了把數(shù)據(jù)發(fā)送到服務(wù)器，應(yīng)該使用POST方法；為了從服務(wù)器端檢索數(shù)據(jù)，應(yīng)該使用GET方法。另外，uri參數(shù)用于指定XMLHttpRequest對(duì)象把請(qǐng)求發(fā)送到的服務(wù)器相應(yīng)的URI。借助于window.document.baseURI屬性，該uri被解析為一個(gè)絕對(duì)的URI-換句話說，你可以使用相對(duì)的URI-它將使用與瀏覽器解析相對(duì)的URI一樣的方式被解析。async參數(shù)指定是否請(qǐng)求是異步的-缺省值為true。為了發(fā)送一個(gè)同步請(qǐng)求，需要把這個(gè)參數(shù)設(shè)置為false。對(duì)于要求認(rèn)證的服務(wù)器，你可以提供可選的用戶名和口令參數(shù)。在調(diào)用open()方法后，XMLHttpRequest對(duì)象把它的readyState屬性設(shè)置為1(打開)并且把responseText、responseXML、status和statusText屬性復(fù)位到它們的初始值。另外，它還復(fù)位請(qǐng)求頭部。注意，如果你調(diào)用open()方法并且此時(shí)readyState為4，則XMLHttpRequest對(duì)象將復(fù)位這些值。

　　send()方法

　　在通過調(diào)用open()方法準(zhǔn)備好一個(gè)請(qǐng)求之后，你需要把該請(qǐng)求發(fā)送到服務(wù)器。僅當(dāng)readyState值為1時(shí)，你才可以調(diào)用send()方法；否則的話，XMLHttpRequest對(duì)象將引發(fā)一個(gè)異常。該請(qǐng)求被使用提供給open()方法的參數(shù)發(fā)送到服務(wù)器。當(dāng)async參數(shù)為true時(shí)，send()方法立即返回，從而允許其它客戶端腳本處理繼續(xù)。在調(diào)用send()方法后，XMLHttpRequest對(duì)象把readyState的值設(shè)置為2(發(fā)送)。當(dāng)服務(wù)器響應(yīng)時(shí)，在接收消息體之前，如果存在任何消息體的話，XMLHttpRequest對(duì)象將把readyState設(shè)置為3(正在接收中)。當(dāng)請(qǐng)求完成加載時(shí)，它把readyState設(shè)置為4(已加載)。對(duì)于一個(gè)HEAD類型的請(qǐng)求，它將在把readyState值設(shè)置為3后再立即把它設(shè)置為4。

　　send()方法使用一個(gè)可選的參數(shù)-該參數(shù)可以包含可變類型的數(shù)據(jù)。典型地，你使用它并通過POST方法把數(shù)據(jù)發(fā)送到服務(wù)器。另外，你可以顯式地使用null參數(shù)調(diào)用send()方法，這與不用參數(shù)調(diào)用它一樣。對(duì)于大多數(shù)其它的數(shù)據(jù)類型，在調(diào)用send()方法之前，應(yīng)該使用setRequestHeader()方法(見后面的解釋)先設(shè)置Content-Type頭部。如果在send(data)方法中的data參數(shù)的類型為DOMString，那么，數(shù)據(jù)將被編碼為UTF-8。如果數(shù)據(jù)是Document類型，那么將使用由data.xmlEncoding指定的編碼串行化該數(shù)據(jù)。

　　setRequestHeader()方法

　　該setRequestHeader(DOMString header，DOMString value)方法用來設(shè)置請(qǐng)求的頭部信息。當(dāng)readyState值為1時(shí)，你可以在調(diào)用open()方法后調(diào)用這個(gè)方法；否則，你將得到一個(gè)異常。

　　getResponseHeader()方法

　　getResponseHeader(DOMString header，value)方法用于檢索響應(yīng)的頭部值。僅當(dāng)readyState值是3或4(換句話說，在響應(yīng)頭部可用以后)時(shí)，才可以調(diào)用這個(gè)方法；否則，該方法返回一個(gè)空字符串。

　　getAllResponseHeaders()方法

　　該getAllResponseHeaders()方法以一個(gè)字符串形式返回所有的響應(yīng)頭部（每一個(gè)頭部占單獨(dú)的一行）。如果readyState的值不是3或4，則該方法返回null。

四、發(fā)送請(qǐng)求

　　在AJAX中，許多使用XMLHttpRequest的請(qǐng)求都是從一個(gè)HTML事件（例如一個(gè)調(diào)用JavaScript函數(shù)的按鈕點(diǎn)擊(onclick)或一個(gè)按鍵(onkeypress)）中被初始化的。AJAX支持包括表單校驗(yàn)在內(nèi)的各種應(yīng)用程序。有時(shí)，在填充表單的其它內(nèi)容之前要求校驗(yàn)一個(gè)唯一的表單域。例如要求使用一個(gè)唯一的UserID來注冊(cè)表單。如果不是使用AJAX技術(shù)來校驗(yàn)這個(gè)UserID域，那么整個(gè)表單都必須被填充和提交。如果該UserID不是有效的，這個(gè)表單必須被重新提交。例如，一個(gè)相應(yīng)于一個(gè)要求必須在服務(wù)器端進(jìn)行校驗(yàn)的Catalog ID的表單域可能按下列形式指定：

＜form name="validationForm" action="validateForm" method="post"＞
＜table＞
　＜tr＞＜td＞Catalog Id:＜/td＞
　　＜td＞
　　　＜input type="text" size="20" id="catalogId" name="catalogId" autocomplete="off" onkeyup="sendRequest()"＞
　　＜/td＞
　　＜td＞＜div id="validationMessage"＞＜/div＞＜/td＞
　＜/tr＞
＜/table＞＜/form＞

　　前面的HTML使用validationMessage div來顯示相應(yīng)于這個(gè)輸入域Catalog Id的一個(gè)校驗(yàn)消息。onkeyup事件調(diào)用一個(gè)JavaScript sendRequest()函數(shù)。這個(gè)sendRequest()函數(shù)創(chuàng)建一個(gè)XMLHttpRequest對(duì)象。創(chuàng)建一個(gè)XMLHttpRequest對(duì)象的過程因?yàn)g覽器實(shí)現(xiàn)的不同而有所區(qū)別。如果瀏覽器支持XMLHttpRequest對(duì)象作為一個(gè)窗口屬性(所有普通的瀏覽器都是這樣的，除了IE 5和IE 6之外)，那么，代碼可以調(diào)用XMLHttpRequest的構(gòu)造器。如果瀏覽器把XMLHttpRequest對(duì)象實(shí)現(xiàn)為一個(gè)ActiveXObject對(duì)象(就象在IE 5和IE 6中一樣)，那么，代碼可以使用ActiveXObject的構(gòu)造器。下面的函數(shù)將調(diào)用一個(gè)init()函數(shù)，它負(fù)責(zé)檢查并決定要使用的適當(dāng)?shù)膭?chuàng)建方法-在創(chuàng)建和返回對(duì)象之前。

＜script type="text/javascript"＞
function sendRequest(){
　var xmlHttpReq=init();
　function init(){
　　if (window.XMLHttpRequest) {
　　　return new XMLHttpRequest();
　　}
　else if (window.ActiveXObject) {
　　return new ActiveXObject("Microsoft.XMLHTTP");
　}
}
＜/script＞

　　接下來，你需要使用Open()方法初始化XMLHttpRequest對(duì)象-指定HTTP方法和要使用的服務(wù)器URL。

var catalogId=encodeURIComponent(document.getElementById("catalogId").value);
xmlHttpReq.open("GET"， "validateForm?catalogId=" + catalogId， true);

　　默認(rèn)情況下，使用XMLHttpRequest發(fā)送的HTTP請(qǐng)求是異步進(jìn)行的，但是你可以顯式地把a(bǔ)sync參數(shù)設(shè)置為true，如上面所展示的。
在這種情況下，對(duì)URL validateForm的調(diào)用將激活服務(wù)器端的一個(gè)servlet，但是你應(yīng)該能夠注意到服務(wù)器端技術(shù)不是根本性的；實(shí)際上，該URL可能是一個(gè)ASP，ASP.NET或PHP頁(yè)面或一個(gè)Web服務(wù)-這無(wú)關(guān)緊要，只要該頁(yè)面能夠返回一個(gè)響應(yīng)-指示CatalogID值是否是有效的-即可。因?yàn)槟阍谧饕粋€(gè)異步調(diào)用，所以你需要注冊(cè)一個(gè)XMLHttpRequest對(duì)象將調(diào)用的回調(diào)事件處理器-當(dāng)它的readyState值改變時(shí)調(diào)用。記住，readyState值的改變將會(huì)激發(fā)一個(gè)readystatechange事件。你可以使用onreadystatechange屬性來注冊(cè)該回調(diào)事件處理器。

xmlHttpReq.onreadystatechange=processRequest;

　　然后，我們需要使用send()方法發(fā)送該請(qǐng)求。因?yàn)檫@個(gè)請(qǐng)求使用的是HTTP GET方法，所以，你可以在不指定參數(shù)或使用null參數(shù)的情況下調(diào)用send()方法。

xmlHttpReq.send(null);

五、處理請(qǐng)求

　　在這個(gè)示例中，因?yàn)镠TTP方法是GET，所以在服務(wù)器端的接收servlet將調(diào)用一個(gè)doGet()方法，該方法將檢索在URL中指定的catalogId參數(shù)值，并且從一個(gè)數(shù)據(jù)庫(kù)中檢查它的有效性。

　　本文示例中的這個(gè)servlet需要構(gòu)造一個(gè)發(fā)送到客戶端的響應(yīng)；而且，這個(gè)示例返回的是XML類型，因此，它把響應(yīng)的HTTP內(nèi)容類型設(shè)置為text/xml并且把Cache-Control頭部設(shè)置為no-cache。設(shè)置Cache-Control頭部可以阻止瀏覽器簡(jiǎn)單地從緩存中重載頁(yè)面。

public void doGet(HttpServletRequest request，
HttpServletResponse response)
throws ServletException， IOException {
　...
　...
　response.setContentType("text/xml");
　response.setHeader("Cache-Control"， "no-cache");
}

　　來自于服務(wù)器端的響應(yīng)是一個(gè)XML DOM對(duì)象，此對(duì)象將創(chuàng)建一個(gè)XML字符串-其中包含要在客戶端進(jìn)行處理的指令。另外，該XML字符串必須有一個(gè)根元素。

out.println("＜catalogId＞valid＜/catalogId＞");

　　【注意】XMLHttpRequest對(duì)象的設(shè)計(jì)目的是為了處理由普通文本或XML組成的響應(yīng)；但是，一個(gè)響應(yīng)也可能是另外一種類型，如果用戶代理(UA)支持這種內(nèi)容類型的話。

　　當(dāng)請(qǐng)求狀態(tài)改變時(shí)，XMLHttpRequest對(duì)象調(diào)用使用onreadystatechange注冊(cè)的事件處理器。因此，在處理該響應(yīng)之前，你的事件處理器應(yīng)該首先檢查readyState的值和HTTP狀態(tài)。當(dāng)請(qǐng)求完成加載（readyState值為4）并且響應(yīng)已經(jīng)完成（HTTP狀態(tài)為"OK"）時(shí)，你就可以調(diào)用一個(gè)JavaScript函數(shù)來處理該響應(yīng)內(nèi)容。下列腳本負(fù)責(zé)在響應(yīng)完成時(shí)檢查相應(yīng)的值并調(diào)用一個(gè)processResponse()方法。

function processRequest(){
　if(xmlHttpReq.readyState==4){
　　if(xmlHttpReq.status==200){
　　　processResponse();
　　}
　}
}

　　該processResponse()方法使用XMLHttpRequest對(duì)象的responseXML和responseText屬性來檢索HTTP響應(yīng)。如上面所解釋的，僅當(dāng)在響應(yīng)的媒體類型是text/xml，application/xml或以+xml結(jié)尾時(shí)，這個(gè)responseXML才可用。這個(gè)responseText屬性將以普通文本形式返回響應(yīng)。對(duì)于一個(gè)XML響應(yīng)，你將按如下方式檢索內(nèi)容：

var msg=xmlHttpReq.responseXML;

　　借助于存儲(chǔ)在msg變量中的XML，你可以使用DOM方法getElementsByTagName()來檢索該元素的值：

var catalogId=msg.getElementsByTagName("catalogId")[0].firstChild.nodeValue;

　　最后，通過更新Web頁(yè)面的validationMessage div中的HTML內(nèi)容并借助于innerHTML屬性，你可以測(cè)試該元素值以創(chuàng)建一個(gè)要顯示的消息：

if(catalogId=="valid"){
　var validationMessage = document.getElementById("validationMessage");
　validationMessage.innerHTML = "Catalog Id is Valid";
}
else
{
　var validationMessage = document.getElementById("validationMessage");
　validationMessage.innerHTML = "Catalog Id is not Valid";
}

　　六、小結(jié)

　　上面就是XMLHttpRequest對(duì)象使用的所有細(xì)節(jié)實(shí)現(xiàn)。通過不必把Web頁(yè)面寄送到服務(wù)器而實(shí)現(xiàn)數(shù)據(jù)傳送，XMLHttpRequest對(duì)象為客戶端與服務(wù)器之間提供了一種動(dòng)態(tài)的交互能力。你可以使用JavaScript啟動(dòng)一個(gè)請(qǐng)求并處理相應(yīng)的返回值，然后使用瀏覽器的DOM方法更新頁(yè)面中的數(shù)據(jù)。

上一篇：google 搜索框添加關(guān)鍵字實(shí)現(xiàn)代碼

下一篇：javascript之AJAX框架使用說明