表2-1 標準XMLHttpRequest操作
|
方 法 |
描 述 |
|
abort() |
停止當前請求 |
|
getAllResponseHeaders() |
把HTTP請求的所有響應首部作爲鍵/值對返回 |
|
getResponseHeader("header") |
返回指定首部的串值 |
|
open("method", "url") |
建立對服務器的調用。method參數可以是GET、POST或PUT。url參數可以是相對URL或絕對URL。這個方法還包括3個可選的參數 |
|
send(content) |
向服務器發送請求 |
|
setRequestHeader("header", "value") |
把指定首部設置爲所提供的值。在設置任何首部之前必須先調用open() |
下面來更詳細地討論這些方法。
void open(string method, string url, boolean asynch, string username, string password)：這個方法會建立對服務器的調用。這是初始化一個請求的純腳本方法。它有兩個必要的參數，還有3個可選參數。要提供調用的特定方法（GET、POST或PUT），還要提供所調用資源的URL。另外還可以傳遞一個Boolean值，指示這個調用是異步的還是同步的。默認值爲true，表示請求本質上是異步的。如果這個參數爲false，處理就會等待，直到從服務器返回響應爲止。由於異步調用是使用Ajax的主要優勢之一，所以倘若將這個參數設置爲false，從某種程度上講與使用XMLHttpRequest對象的初衷不太相符。不過，前面已經說過，在某些情況下這個參數設置爲false也是有用的，比如在持久存儲頁面之前可以先驗證用戶的輸入。最後兩個參數不說自明，允許你指定一個特定的用戶名和密碼。
void send(content)：這個方法具體向服務器發出請求。如果請求聲明爲異步的，這個方法就會立即返回，否則它會等待直到接收到響應爲止。可選參數可以是DOM對象的實例、輸入流，或者串。傳入這個方法的內容會作爲請求體的一部分發送。
void setRequestHeader(string header, string value)：這個方法爲HTTP請求中一個給定的首部設置值。它有兩個參數，第一個串表示要設置的首部，第二個串表示要在首部中放置的值。需要說明，這個方法必須在調用open()之後才能調用。
在所有這些方法中，最有可能用到的就是open()和send()。XMLHttpRequest對象還有許多屬性，在設計Ajax交互時這些屬性非常有用。
void abort()：顧名思義，這個方法就是要停止請求。
string getAllResponseHeaders()：這個方法的核心功能對Web應用開發人員應該很熟悉了，它返回一個串，其中包含HTTP請求的所有響應首部，首部包括Content-
Length、Date和URI。
string getResponseHeader(string header)：這個方法與getAllResponseHeaders()是對應的，不過它有一個參數表示你希望得到的指定首部值，並且把這個值作爲串返回。
除了這些標準方法，XMLHttpRequest對象還提供了許多屬性，如表2-2所示。處理XMLHttpRequest時可以大量使用這些屬性。
表2-2 標準XMLHttpRequest屬性
|
屬 性 |
描 述 |
|
onreadystatechange |
每個狀態改變時都會觸發這個事件處理器，通常會調用一個JavaScript函數 |
|
readyState |
請求的狀態。有5個可取值：0 = 未初始化，1 = 正在加載，2 = 已加載，3 = 交互中，4 = 完成 |
|
responseText |
服務器的響應，表示爲一個串 |
|
responseXML |
服務器的響應，表示爲XML。這個對象可以解析爲一個DOM對象 |
|
status |
服務器的HTTP狀態碼（200對應OK，404對應Not Found（未找到），等等） |
|
statusText |
HTTP狀態碼的相應文本（OK或Not Found（未找到）等等） |
不同於標準Web客戶中所用的標準請求/響應方法，Ajax應用的做法稍有差別。
1. 一個客戶端事件觸發一個Ajax事件。從簡單的onchange事件到某個特定的用戶動作，很多這樣的事件都可以觸發Ajax事件。可以有如下的代碼：
<input type="text"d="email" name="email" οnblur="validateEmail()";>
2. 創建XMLHttpRequest對象的一個實例。使用open()方法建立調用，並設置URL以及所希望的HTTP方法（通常是GET或POST）。請求實際上通過一個send()方法調用觸發。可能的代碼如下所示：
var xmlHttp;
function validateEmail() {
var email = document.getElementById("email");
var url = "validate?email=" + escape(email.value);
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open("GET", url);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
3. 向服務器做出請求。可能調用servlet、CGI腳本，或者任何服務器端技術。
4. 服務器可以做你想做的事情，包括訪問數據庫，甚至訪問另一個系統。
5. 請求返回到瀏覽器。Content-Type設置爲text/xml——XMLHttpRequest對象只能處理text/html類型的結果。在另外一些更復雜示例中，響應可能涉及更廣，還包括JavaScript、DOM管理以及其他相關的技術。需要說明，你還需要設置另外一些首部，使瀏覽器不會在本地緩存結果。爲此可以使用下面的代碼：
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Pragma", "no-cache");[1]
6. 在這個示例中，XMLHttpRequest對象配置爲處理返回時要調用callback()函數。這個函數會檢查XMLHttpRequest對象的readyState屬性，然後查看服務器返回的狀態碼。如果一切正常，callback()函數就會在客戶端上做些有意思的工作。以下就是一個典型的回調方法：
function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
//do something interesting here
}
}
}
表3-1 用於處理XML文檔的DOM元素屬性
|
屬性名 |
描述 |
|
childNodes |
返回當前元素所有子元素的數組 |
|
firstChild |
返回當前元素的第一個下級子元素 |
|
lastChild |
返回當前元素的最後一個子元素 |
|
nextSibling |
返回緊跟在當前元素後面的元素 |
|
nodeValue |
指定表示元素值的讀/寫屬性 |
|
parentNode |
返回元素的父節點 |
|
previousSibling |
返回緊鄰當前元素之前的元素 |
表3-2 用於遍歷XML文檔的DOM元素方法
|
方法名 |
描述 |
|
getElementById(id) (document) |
獲取有指定惟一ID屬性值文檔中的元素 |
|
getElementsByTagName(name) |
返回當前元素中有指定標記名的子元素的數組 |
|
hasChildNodes() |
返回一個布爾值，指示元素是否有子元素 |
|
getAttribute(name) |
返回元素的屬性值，屬性由name指定 |
表3-3 動態創建內容時所用的W3C DOM屬性和方法
|
屬性/方法 |
描述 |
|
document.createElement(tagName) |
文檔對象上的createElement方法可以創建由tagName指定的元素。如果以串div作爲方法參數，就會生成一個div元素 |
|
document.createTextNode(text) |
文檔對象的createTextNode方法會創建一個包含靜態文本的節點 |
|
<element>.appendChild(childNode) |
appendChild方法將指定的節點增加到當前元素的子節點列表（作爲一個新的子節點）。例如，可以增加一個option元素，作爲select元素的子節點 |
|
<element>.getAttribute(name) <element>.setAttribute(name, value) |
這些方法分別獲得和設置元素中name屬性的值 |
|
<element>.insertBefore(newNode, targetNode) |
這個方法將節點newNode作爲當前元素的子節點插到targetNode元素前面 |
|
<element>.removeAttribute(name) |
這個方法從元素中刪除屬性name |
|
<element>.removeChild(childNode) |
這個方法從元素中刪除子元素childNode |
|
<element>.replaceChild(newNode, oldNode) |
這個方法將節點oldNode替換爲節點newNode |
|
<element>.hasChildnodes() |
這個方法返回一個布爾值，指示元素是否有子元素 |