使用XMLHttpRequest與DOM對象

XMLHttpRequest對象

在使用XMLHttpRequest對象發送請求和處理響應之前，必須先用JavaScript創建一個XMLHttpRequest對象。由於XMLHttpRequest不是一個W3C標準，所以可以採用多種方法使用JavaScript來創建XMLHttpRequest的實例。IE把XMLHttpRequest實現一個ActiveX對象，其他瀏覽器(如Firefox、Safari和Opera)把他實現爲一個本地JavaScript對象。由於存在這些差別，JavaScript代碼中必須包含有關的邏輯，從而使用ActiveX技術或者使用本地JavaScript對象技術來創建XMLHttpRequest的一個事例。

如果瀏覽器支持ActiveX對象，就可以使用ActiveX來創建XMLHttpRequest對象。否則，就要使用本地JavaScript對象技術來創建。代碼清單2-1展示了編寫跨瀏覽器的JavaScript代碼來創建XMLHttpRequest對象實例。

代碼清單2-1 創建XMLHttpRequest對象的一個實例

var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}

可以看到，創建XMLHttpRequest對象相當容易。首先，要創建一個全局作用域變量xmlHttp來保存這個對象的引用。createXMLHttpRequest方法完成創建XMLHttpRequest實例的具體工作。這個方法只有簡單的分支邏輯(選擇邏輯)來確定如果創建對象。對window.ActiveXObject的調用會返回一個對象，也可能返回null，if語句會把調用返回的結果看作是true或false(如果返回對象則爲true，返回null則爲false)，以此指示瀏覽器是否支持ActiveX控件，相應地得知瀏覽器是不是IE。如果確定是，則通過實例化ActiveXObject的一個新實例來創建XMLHttpRequest對象，並傳入一個串指示要創建何種類型的ActiveX對象。在這個例子中，爲構造函數提供的字符串是Microsoft.XMLHTTP，這說明我們想創建XMLHttpRequest的一個實例。

如果window.ActiveXObject調用失敗(返回null)，JavaScript就會轉到else語句分支，確定瀏覽器是否把XMLHttpRequest實現爲一個本地JavaScript對象。如果存在window.XMLHttpRequest,就會創建XMLHttpRequest的一個實例。

XMLHttpRequest對象的屬性：

onreadystatechange 狀態改變的事件觸發器
readyState 對象狀態(integer): 0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 交互中 4 = 完成
responseText 服務器進程返回數據的文本版本
responseXML 服務器進程返回數據的兼容DOM的XML文檔對象
status 服務器返回的狀態碼, 如：404 = "文件未找到" 、200 ="成功"
statusText 服務器返回的狀態文本信息

XMLHttpRequest對象的方法：

abort() 停止當前請求
getAllResponseHeaders() 作爲字符串返回完整的headers
getResponseHeader("headerLabel") 作爲字符串返回單個的header標籤
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設置未決的請求的目標 URL，方法，和其他參數
send(content) 發送請求
setRequestHeader("label", "value") 設置header並和請求一起發送

方法的詳細說明：
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 serRequestHeader(string header,string value):
這個方法爲HTTP請求中一個指定的首部設置值。他有兩個參數，第一個串表示要設置的首部，第二個串表示要在首部中放置的值。需要說明，這個方法的內容會作爲請求體的一部分發送。

void abort():
顧名思義，這個方法就是要停止請求。

string getAllResponseHeaders():
這個方法的核心功能對Web應用開發人員應該很熟悉了，它返回一個串，其中包含HTTP請求的所有響應首部，首部包括ContentLength、Date和URI。

string getResponseHeader(string header):
這個方法與getAllResponseHeaders()是對應的，不過它有一個參數表示你希望得到的指定首部值，並且把這個值作爲串返回。

DOM對象

文檔對象模型是與平臺和語言無關的接口，允許程序和腳本動態地訪問和更新文檔的內容，結構和樣式。文檔可以進一步處理，處理的結果可以放回到所提供的頁面中。如果服務端返回的是XML，使用responseXML即可直接創建DOM來操作這個文件。

childNodes 返回當前元素所有子元素集合
firstChil 返回當前元素的第一個子元素
lastChild 返回當前元素的最後一個子元素
nextSibling 返回緊跟在當前元素後面的元素（平級）
previousSibling 返回緊跟在當前元素之前的元素（平級）
nodeValue 指定表示元素值的讀/寫屬性
parentNode 返回元素的父節點

DOM對象的方法：

getElementById(id) (document) 獲取有指定唯一ID屬性值文檔中的元素
getElementsByTagName(name) 返回當前元素中有指定標記名的子元素的集合
hasChildNodes() 返回一個布爾值，指示元素是否有子元素
getAttribute(name) 返回元素的屬性值，屬性由name指定

動態創建內容所用的W3C DOM屬性和方法

document.createElement(tagName) 文檔對象上的createElement方法可以創建由tagName指定的元素。如果以串div作爲方法參數，就會生成一個div元素
document.createTextNode(text) 文檔對象的createTextNode方法會創建一個包含靜態文本的節點
element.appendChild(childNode) appendChild方法將指定的節點childNode增加到當前元素的子節點列表
element.getAttribut(name)
element.setAttribut(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() 返回一個布爾值,指示元素是否有子元素