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