onreadystatechange事件
無論readyState值何時發生改變,XMLHttpRequest對象都會激發一個readystatechange事件。其中,onreadystatechange屬性接收一個EventListener值-向該方法指示無論readyState值何時發生改變,該對象都將激活。
responseText屬性
這個responseText屬性包含客戶端接收到的HTTP響應的文本內容。當readyState值為0、1或2時,responseText包含一個空字符串。當readyState值為3(正在接收)時,響應中包含客戶端還未完成的響應信息。當readyState為4(已加載)時,該responseText包含完整的響應信息。
responseXML屬性
此responseXML屬性用於當接收到完整的HTTP響應時(readyState為4)描述XML響應;此時,Content-Type頭部指定MIME(媒體)類型為text/xml,application/xml或以+xml結尾。如果Content-Type頭部並不包含這些媒體類型之一,那麼responseXML的值為null。無論何時,只要readyState值不為4,那麼該responseXML的值也為null。
其實,這個responseXML屬性值是一個文檔接口類型的對象,用來描述被分析的文檔。如果文檔不能被分析(例如,如果文檔不是良構的或不支持文檔相應的字符編碼),那麼responseXML的值將為null。
status屬性
這個status屬性描述了HTTP狀態代碼,而且其類型為short。而且,僅當readyState值為3(正在接收中)或4(已加載)時,這個status屬性才可用。當readyState的值小於3時試圖存取status的值將引發一個異常。
statusText屬性
這個statusText屬性描述了HTTP狀態代碼文本;並且僅當readyState值為3或4才可用。當readyState為其它值時試圖存取statusText屬性將引發一個異常。
三、 XMLHttpRequest對象的方法
XMLHttpRequest對象提供了各種方法用於初始化和處理HTTP請求,下列將逐個展開詳細討論。
abort()方法
你可以使用這個abort()方法來暫停與一個XMLHttpRequest對象相聯系的HTTP請求,從而把該對象復位到未初始化狀態。
open()方法
你需要調用open(DOMString method,DOMString uri,boolean async,DOMString username,DOMString password)方法初始化一個XMLHttpRequest對象。其中,method參數是必須提供的-用於指定你想用來發送請求的HTTP方法(GET,POST,PUT,DELETE或HEAD)。為了把數據發送到服務器,應該使用POST方法;為了從服務器端檢索數據,應該使用GET方法。另外,uri參數用於指定XMLHttpRequest對象把請求發送到的服務器相應的URI。借助於window.document.baseURI屬性,該uri被解析為一個絕對的URI-換句話說,你可以使用相對的URI-它將使用與浏覽器解析相對的URI一樣的方式被解析。async參數指定是否請求是異步的-缺省值為true。為了發送一個同步請求,需要把這個參數設置為false。對於要求認證的服務器,你可以提供可選的用戶名和口令參數。在調用open()方法後,XMLHttpRequest對象把它的readyState屬性設置為1(打開)並且把responseText、responseXML、status和statusText屬性復位到它們的初始值。另外,它還復位請求頭部。注意,如果你調用open()方法並且此時readyState為4,則XMLHttpRequest對象將復位這些值。
send()方法
在通過調用open()方法准備好一個請求之後,你需要把該請求發送到服務器。僅當readyState值為1時,你才可以調用send()方法;否則的話,XMLHttpRequest對象將引發一個異常。該請求被使用提供給open()方法的參數發送到服務器。當async參數為true時,send()方法立即返回,從而允許其它客戶端腳本處理繼續。在調用send()方法後,XMLHttpRequest對象把readyState的值設置為2(發送)。當服務器響應時,在接收消息體之前,如果存在任何消息體的話,XMLHttpRequest對象將把readyState設置為3(正在接收中)。當請求完成加載時,它把readyState設置為4(已加載)。對於一個HEAD類型的請求,它將在把readyState值設置為3後再立即把它設置為4。
send()方法使用一個可選的參數-該參數可以包含可變類型的數據。典型地,你使用它並通過POST方法把數據發送到服務器。另外,你可以顯式地使用null參數調用send()方法,這與不用參數調用它一樣。對於大多數其它的數據類型,在調用send()方法之前,應該使用setRequestHeader()方法(見後面的解釋)先設置Content-Type頭部。如果在send(data)方法中的data參數的類型為DOMString,那麼,數據將被編碼為UTF-8。如果數據是Document類型,那麼將使用由data.xmlEncoding指定的編碼串行化該數據。
setRequestHeader()方法
該setRequestHeader(DOMString header,DOMString value)方法用來設置請求的頭部信息。當readyState值為1時,你可以在調用open()方法後調用這個方法;否則,你將得到一個異常。
getResponseHeader()方法
getResponseHeader(DOMString header,value)方法用於檢索響應的頭部值。僅當readyState值是3或4(換句話說,在響應頭部可用以後)時,才可以調用這個方法;否則,該方法返回一個空字符串。
getAllResponseHeaders()方法
該getAllResponseHeaders()方法以一個字符串形式返回所有的響應頭部(每一個頭部占單獨的一行)。如果readyState的值不是3或4,則該方法返回null。
四、 發送請求
在AJAX中,許多使用XMLHttpRequest的請求都是從一個HTML事件(例如一個調用JavaScript函數的按鈕點擊(onclick)或一個按鍵(onkeypress))中被初始化的。AJAX支持包括表單校驗在內的各種應用程序。有時,在填充表單的其它內容之前要求校驗一個唯一的表單域。例如要求使用一個唯一的UserID來注冊表單。如果不是使用AJAX技術來校驗這個UserID域,那麼整個表單都必須被填充和提交。如果該UserID不是有效的,這個表單必須被重新提交。例如,一個相應於一個要求必須在服務器端進行校驗的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來顯示相應於這個輸入域Catalog Id的一個校驗消息。onkeyup事件調用一個JavaScript sendRequest()函數。這個sendRequest()函數創建一個XMLHttpRequest對象。創建一個XMLHttpRequest對象的過程因浏覽器實現的不同而有所區別。如果浏覽器支持XMLHttpRequest對象作為一個窗口屬性(所有普通的浏覽器都是這樣的,除了IE 5和IE 6之外),那麼,代碼可以調用XMLHttpRequest的構造器。如果浏覽器把XMLHttpRequest對象實現為一個ActiveXObject對象(就象在IE 5和IE 6中一樣),那麼,代碼可以使用ActiveXObject的構造器。下面的函數將調用一個init()函數,它負責檢查並決定要使用的適當的創建方法-在創建和返回對象之前。
<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對象-指定HTTP方法和要使用的服務器URL。
var catalogId=encodeURIComponent(document.getElementById("catalogId").value);
xmlHttpReq.open("GET", "validateForm?catalogId=" + catalogId, true);
默認情況下,使用XMLHttpRequest發送的HTTP請求是異步進行的,但是你可以顯式地把async參數設置為true,如上面所展示的。
在這種情況下,對URL validateForm的調用將激活服務器端的一個servlet,但是你應該能夠注意到服務器端技術不是根本性的;實際上,該URL可能是一個ASP,ASP.NET或PHP頁面或一個Web服務-這無關緊要,只要該頁面能夠返回一個響應-指示CatalogID值是否是有效的-即可。因為你在作一個異步調用,所以你需要注冊一個XMLHttpRequest對象將調用的回調事件處理器-當它的readyState值改變時調用。記住,readyState值的改變將會激發一個readystatechange事件。你可以使用onreadystatechange屬性來注冊該回調事件處理器。
xmlHttpReq.onreadystatechange=processRequest;
然後,我們需要使用send()方法發送該請求。因為這個請求使用的是HTTP GET方法,所以,你可以在不指定參數或使用null參數的情況下調用send()方法。
xmlHttpReq.send(null);
五、 處理請求
在這個示例中,因為HTTP方法是GET,所以在服務器端的接收servlet將調用一個doGet()方法,該方法將檢索在URL中指定的catalogId參數值,並且從一個數據庫中檢查它的有效性。
本文示例中的這個servlet需要構造一個發送到客戶端的響應;而且,這個示例返回的是XML類型,因此,它把響應的HTTP內容類型設置為text/xml並且把Cache-Control頭部設置為no-cache。設置Cache-Control頭部可以阻止浏覽器簡單地從緩存中重載頁面。
public void doGet(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
...
...
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
}
來自於服務器端的響應是一個XML DOM對象,此對象將創建一個XML字符串-其中包含要在客戶端進行處理的指令。另外,該XML字符串必須有一個根元素。
out.println("<catalogId>valid</catalogId>");
【注意】XMLHttpRequest對象的設計目的是為了處理由普通文本或XML組成的響應;但是,一個響應也可能是另外一種類型,如果用戶代理(UA)支持這種內容類型的話。
當請求狀態改變時,XMLHttpRequest對象調用使用onreadystatechange注冊的事件處理器。因此,在處理該響應之前,你的事件處理器應該首先檢查readyState的值和HTTP狀態。當請求完成加載(readyState值為4)並且響應已經完成(HTTP狀態為"OK")時,你就可以調用一個JavaScript函數來處理該響應內容。下列腳本負責在響應完成時檢查相應的值並調用一個processResponse()方法。
function processRequest(){
if(xmlHttpReq.readyState==4){
if(xmlHttpReq.status==200){
processResponse();
}
}
}
該processResponse()方法使用XMLHttpRequest對象的responseXML和responseText屬性來檢索HTTP響應。如上面所解釋的,僅當在響應的媒體類型是text/xml,application/xml或以+xml結尾時,這個responseXML才可用。這個responseText屬性將以普通文本形式返回響應。對於一個XML響應,你將按如下方式檢索內容:
var msg=xmlHttpReq.responseXML;
借助於存儲在msg變量中的XML,你可以使用DOM方法getElementsByTagName()來檢索該元素的值:
var catalogId=msg.getElementsByTagName("catalogId")[0].firstChild.nodeValue;
最後,通過更新Web頁面的validationMessage div中的HTML內容並借助於innerHTML屬性,你可以測試該元素值以創建一個要顯示的消息:
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";
}
六、 小結
上面就是XMLHttpRequest對象使用的所有細節實現。通過不必把Web頁面寄送到服務器而實現數據傳送,XMLHttpRequest對象為客戶端與服務器之間提供了一種動態的交互能力。你可以使用JavaScript啟動一個請求並處理相應的返回值,然後使用浏覽器的DOM方法更新頁面中的數據。