淺談使用XMLHttpRequest與DOM對象_Xml教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
推薦：如何了解認識XMLXML被設(shè)計用來描述數(shù)據(jù)，其焦點是數(shù)據(jù)的內(nèi)容。 HTML被設(shè)計用來顯示數(shù)據(jù)，其焦點是數(shù)據(jù)的外觀。 應(yīng)該掌握的基礎(chǔ)知識： 在您繼續(xù)學(xué)習(xí)之前，需要對以下知識有基本的了解： HTML / XHTML JavaScript or VBScript 什么是XML? XML指 可擴展標記語言 （EXtensible M
XMLHttpRequest對象在使用XMLHttpRequest對象發(fā)送請求和處理響應(yīng)之前，必須先用JavaScript創(chuàng)建一個XMLHttpRequest對象。由于XMLHttpRequest不是一個W3C標準，所以可以采用多種方法使用JavaScript來創(chuàng)建XMLHttpRequest的實例。IE把XMLHttpRequest實現(xiàn)一個ActiveX對象，其他瀏覽器(如Firefox、Safari和Opera)把他實現(xiàn)為一個本地JavaScript對象。由于存在這些差別，JavaScript代碼中必須包含有關(guān)的邏輯，從而使用ActiveX技術(shù)或者使用本地JavaScript對象技術(shù)來創(chuàng)建XMLHttpRequest的一個事例。
如果瀏覽器支持ActiveX對象，就可以使用ActiveX來創(chuàng)建XMLHttpRequest對象。否則，就要使用本地JavaScript對象技術(shù)來創(chuàng)建。代碼清單2-1展示了編寫跨瀏覽器的JavaScript代碼來創(chuàng)建XMLHttpRequest對象實例。
代碼清單2-1 創(chuàng)建XMLHttpRequest對象的一個實例
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
可以看到，創(chuàng)建XMLHttpRequest對象相當容易。首先，要創(chuàng)建一個全局作用域變量xmlHttp來保存這個對象的引用。createXMLHttpRequest方法完成創(chuàng)建XMLHttpRequest實例的具體工作。這個方法只有簡單的分支邏輯(選擇邏輯)來確定如果創(chuàng)建對象。對window.ActiveXObject的調(diào)用會返回一個對象，也可能返回null，if語句會把調(diào)用返回的結(jié)果看作是true或false(如果返回對象則為true，返回null則為false)，以此指示瀏覽器是否支持ActiveX控件，相應(yīng)地得知瀏覽器是不是IE。如果確定是，則通過實例化ActiveXObject的一個新實例來創(chuàng)建XMLHttpRequest對象，并傳入一個串指示要創(chuàng)建何種類型的ActiveX對象。在這個例子中，為構(gòu)造函數(shù)提供的字符串是Microsoft.XMLHTTP，這說明我們想創(chuàng)建XMLHttpRequest的一個實例。
如果window.ActiveXObject調(diào)用失敗(返回null)，JavaScript就會轉(zhuǎn)到else語句分支，確定瀏覽器是否把XMLHttpRequest實現(xiàn)為一個本地JavaScript對象。如果存在window.XMLHttpRequest,就會創(chuàng)建XMLHttpRequest的一個實例。
XMLHttpRequest對象的屬性：
onreadystatechange 狀態(tài)改變的事件觸發(fā)器
readyState 對象狀態(tài)(integer): 0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 交互中 4 = 完成
responseText 服務(wù)器進程返回數(shù)據(jù)的文本版本
responseXML 服務(wù)器進程返回數(shù)據(jù)的兼容DOM的XML文檔對象
status 服務(wù)器返回的狀態(tài)碼, 如：404 = "文件未找到" 、200 ="成功"
statusText 服務(wù)器返回的狀態(tài)文本信息
readyState 對象狀態(tài)(integer): 0 = 未初始化 1 = 讀取中 2 = 已讀取 3 = 交互中 4 = 完成
responseText 服務(wù)器進程返回數(shù)據(jù)的文本版本
responseXML 服務(wù)器進程返回數(shù)據(jù)的兼容DOM的XML文檔對象
status 服務(wù)器返回的狀態(tài)碼, 如：404 = "文件未找到" 、200 ="成功"
statusText 服務(wù)器返回的狀態(tài)文本信息
XMLHttpRequest對象的方法：
abort() 停止當前請求
getAllResponseHeaders() 作為字符串返回完整的headers
getResponseHeader("headerLabel") 作為字符串返回單個的header標簽
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設(shè)置未決的請求的目標 URL，方法，和其他參數(shù)
send(content) 發(fā)送請求
setRequestHeader("label", "value") 設(shè)置header并和請求一起發(fā)送
getAllResponseHeaders() 作為字符串返回完整的headers
getResponseHeader("headerLabel") 作為字符串返回單個的header標簽
open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 設(shè)置未決的請求的目標 URL，方法，和其他參數(shù)
send(content) 發(fā)送請求
setRequestHeader("label", "value") 設(shè)置header并和請求一起發(fā)送
方法的詳細說明：
void open(string method,string url,boolean asynch,string username,string password):
這個方法會建立對服務(wù)器的調(diào)用。這是初始化一個請求的純腳本方法，它有兩個必要參數(shù)，還有3個可選參數(shù)。要提供調(diào)用的特定方法(GET、POST 或 PUT)，還要提供所調(diào)用資源的URL。另外還可以傳遞一個Boolean值，指示這個調(diào)用是異步的還是同步的。默認值為true，表示請求本質(zhì)上是異步的。如果這個參數(shù)為false，處理就會等待，直到從服務(wù)器返回響應(yīng)為止。由于異步調(diào)用是使用Ajax的主要優(yōu)勢之一，所以倘若這個參數(shù)設(shè)置為false，從某種程度上XMLHttpRequest對象的初衷不太相符。不過，前面已經(jīng)說過，在某些情況下這個參數(shù)設(shè)置為false也是有用的，比如在持久存儲頁面之前可以先驗證用戶的輸入。最后兩個參數(shù)不說自明，允許你指定一個特定的用戶名和密碼。
void send(content):
這個方法具體向服務(wù)器發(fā)出請求。如果請求聲明為異步的，這個方法就會立即返回，否則它會等待直到接收到響應(yīng)為止�？蛇x參數(shù)可以是DOM對象的實例、輸入流、或者串。傳入這個方法的內(nèi)容會作為請求體的一部分發(fā)送。
void serRequestHeader(string header,string value):
這個方法為HTTP請求中一個指定的首部設(shè)置值。他有兩個參數(shù)，第一個串表示要設(shè)置的首部，第二個串表示要在首部中放置的值。需要說明，這個方法的內(nèi)容會作為請求體的一部分發(fā)送。
void abort():
顧名思義，這個方法就是要停止請求。
string getAllResponseHeaders():
這個方法的核心功能對Web應(yīng)用開發(fā)人員應(yīng)該很熟悉了，它返回一個串，其中包含HTTP請求的所有響應(yīng)首部，首部包括ContentLength、Date和URI。
string getResponseHeader(string header):
這個方法與getAllResponseHeaders()是對應(yīng)的，不過它有一個參數(shù)表示你希望得到的指定首部值，并且把這個值作為串返回。
DOM對象
文檔對象模型是與平臺和語言無關(guān)的接口，允許程序和腳本動態(tài)地訪問和更新文檔的內(nèi)容，結(jié)構(gòu)和樣式。文檔可以進一步處理，處理的結(jié)果可以放回到所提供的頁面中。如果服務(wù)端返回的是XML，使用responseXML即可直接創(chuàng)建DOM來操作這個文件。
childNodes 返回當前元素所有子元素集合
firstChil 返回當前元素的第一個子元素
lastChild 返回當前元素的最后一個子元素
nextSibling 返回緊跟在當前元素后面的元素（平級）
previousSibling 返回緊跟在當前元素之前的元素（平級）
nodeValue 指定表示元素值的讀/寫屬性
parentNode 返回元素的父節(jié)點
firstChil 返回當前元素的第一個子元素
lastChild 返回當前元素的最后一個子元素
nextSibling 返回緊跟在當前元素后面的元素（平級）
previousSibling 返回緊跟在當前元素之前的元素（平級）
nodeValue 指定表示元素值的讀/寫屬性
parentNode 返回元素的父節(jié)點
DOM對象的方法：
getElementById(id) (document) 獲取有指定唯一ID屬性值文檔中的元素
getElementsByTagName(name) 返回當前元素中有指定標記名的子元素的集合
hasChildNodes() 返回一個布爾值，指示元素是否有子元素
getAttribute(name) 返回元素的屬性值，屬性由name指定
getElementsByTagName(name) 返回當前元素中有指定標記名的子元素的集合
hasChildNodes() 返回一個布爾值，指示元素是否有子元素
getAttribute(name) 返回元素的屬性值，屬性由name指定
動態(tài)創(chuàng)建內(nèi)容所用的W3C DOM屬性和方法
document.createElement(tagName) 文檔對象上的createElement方法可以創(chuàng)建由tagName指定的元素。如果以串div作為方法參數(shù)，就會生成一個div元素
document.createTextNode(text) 文檔對象的createTextNode方法會創(chuàng)建一個包含靜態(tài)文本的節(jié)點
element.appendChild(childNode) appendChild方法將指定的節(jié)點childNode增加到當前元素的子節(jié)點列表
element.getAttribut(name)
element.setAttribut(name, value)獲取和設(shè)置元素中name屬性的值
element.insertBefore(newNode, targetNode) 這個方法將節(jié)點newNode作為當前元素的子節(jié)點插到targetNode元素前面
element.removeAttribute(name) 這個方法從元素中刪除屬性name
element.removeChild(childNode) 從元素中刪除子元素childNode
element.replaceChild(newNode，oldNode) 將節(jié)點oldNode替換為節(jié)點newNode
element.hasChildnodes() 返回一個布爾值,指示元素是否有子元素
document.createTextNode(text) 文檔對象的createTextNode方法會創(chuàng)建一個包含靜態(tài)文本的節(jié)點
element.appendChild(childNode) appendChild方法將指定的節(jié)點childNode增加到當前元素的子節(jié)點列表
element.getAttribut(name)
element.setAttribut(name, value)獲取和設(shè)置元素中name屬性的值
element.insertBefore(newNode, targetNode) 這個方法將節(jié)點newNode作為當前元素的子節(jié)點插到targetNode元素前面
element.removeAttribute(name) 這個方法從元素中刪除屬性name
element.removeChild(childNode) 從元素中刪除子元素childNode
element.replaceChild(newNode，oldNode) 將節(jié)點oldNode替換為節(jié)點newNode
element.hasChildnodes() 返回一個布爾值,指示元素是否有子元素
分享：解析XML是如何被利用的？理解這一點很重要，即XML是被設(shè)計為存儲、傳輸以及交換數(shù)據(jù)的。XML不是被設(shè)計為用來顯示數(shù)據(jù)的。 XML可以將HTML與數(shù)據(jù)分離 通過使用XML，您的數(shù)據(jù)可存儲于HTML之外。 當我們使用HTML來顯示數(shù)據(jù)時，數(shù)據(jù)存儲于HTML中。通過使用XML，數(shù)據(jù)可以被存儲在單獨的XML
相關(guān)Xml教程：
- 相關(guān)鏈接：
- 教程說明：
Xml教程-淺談使用XMLHttpRequest與DOM對象
。