JS跨瀏覽器解析XML應(yīng)用過程詳解
首先介紹簡(jiǎn)單的理論:
對(duì)于XML,我們可以理解它是一種樹結(jié)構(gòu),它包含根,元素,屬性,文本等內(nèi)容。不同瀏覽器都有自己的解析器,把XML讀入內(nèi)存,并把它轉(zhuǎn)換為可被 JavaScript 訪問的 XML DOM 對(duì)象。
微軟的 XML 解析器與其他瀏覽器中的解析器是有差異的。微軟的解析器支持對(duì) XML 文件和 XML 字符串(文本)的加載,而其他瀏覽器使用單獨(dú)的解析器。不過,所有的解析器都含有遍歷 XML 樹、訪問、插入及刪除節(jié)點(diǎn)的函數(shù)。
如果你使用的是一個(gè)本地文件或者網(wǎng)絡(luò)文件且該文件在是在本服務(wù)器,那么對(duì)于IE和其他瀏覽器來說都可以通過load(uRl),loadXML(strXML)來創(chuàng)建Xdom對(duì)象。但是對(duì)于文本,除IE外需要一個(gè)單獨(dú)的解析器來處理。
以下函數(shù)用于根據(jù)不同的瀏覽器來創(chuàng)建Xdom對(duì)象:
function loadXMLDoc() { var xmlDoc; // code for IE if (window.ActiveXObject){ xmlDoc=new ActiveXObject('Microsoft.XMLDOM');//創(chuàng)建空的微軟 XML 文檔對(duì)象 //xmlDoc.load(uRl); //loadXML() 方法用于加載字符串(文本),而 load() 用于加載文件 xmlDoc.loadXML(xmlstr); } // code for Mozilla, Firefox, Opera, etc. else if(document.implementation&&document.implementation.createDocument){ xmlDoc=document.implementation.createDocument('','',null); //xmlDoc.load(uRl); //Internet Explorer 使用 loadXML() 方法來解析 XML 字符串,而其他瀏覽器使用 DOMParser 對(duì)象 parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,'text/xml'); }else{ alert(’Your browser cannot handle this script’); } //關(guān)閉異步加載,這樣可確保在文檔完整加載之前,解析器不會(huì)繼續(xù)執(zhí)行腳本 xmlDoc.async=false; createTable(xmlDoc); }
方法內(nèi)有具體的解析,我不再??攏?雜誚馕齙哪諶藎?治?址??臀謀玖街幀?/p>
首先定義一個(gè)字符串:
var xmlstr='<?xml version='1.0' encoding='UTF-8'?><goodss><goods id='1'><name>數(shù)碼相機(jī)</name><price>3206(元)</price></goods><goods id='2'><name>聯(lián)想筆記本電腦</name><price>3206(元)</price></goods></goodss>';
然后定義一個(gè)goods.xml文件:
文件內(nèi)容為:
<?xml version='1.0' encoding='UTF-8'?> <goodss> <goods id='1'> <name>數(shù)碼相機(jī)</name> <price>3206(元)</price> </goods> <goods id='2'> <name>聯(lián)想筆記本電腦</name> <price>3206(元)</price> </goods> </goodss>
通過取消和注釋方式來選擇是文本還是字符串。
這個(gè)方法可以是通用的,下面再來解析這個(gè)Xdom對(duì)象:
function createTable(xmldoc){ var goodss=xmldoc.getElementsByTagName('goods'); for(var i=0;i<goodss.length;i++){ var g=goodss[i]; if (g.nodeType==1){ var name=g.getElementsByTagName('name')[0].childNodes[0].nodeValue; var price=g.getElementsByTagName('price')[0].childNodes[0].nodeValue; var id=g.getAttribute('id'); document.write(id + '-->' + name + '-->' + price); document.write('<br />'); } } }
對(duì)于使用到的函數(shù)和屬性我們來解析一下:
/* 一些典型的 DOM 屬性 x.nodeName - x 的名稱 x.nodeValue - x 的值 x.parentNode - x 的父節(jié)點(diǎn) x.childNodes - x 的子節(jié)點(diǎn) x.attributes - x 的屬性節(jié)點(diǎn) x.firstChild - x 的第一個(gè)子節(jié)點(diǎn),等同于childNodes[0] x.lastChild - x 的最后一個(gè)子節(jié)點(diǎn) x.data - x 的內(nèi)容,等同nodeValue x.length - x 的長(zhǎng)度 x.nodeType - x 的類型:1,元素,2,屬性,3,文本,4,注釋,5,文檔 在上面的列表中,x 是一個(gè)節(jié)點(diǎn)對(duì)象 XML DOM 方法 x.getElementsByTagName(name) - 獲取帶有指定標(biāo)簽名稱的所有元素,返回的是數(shù)組 x.getAttribute(name) - 返回屬性的值 */ /*出于安全方面的原因,現(xiàn)代的瀏覽器不允許跨域的訪問。 這意味著,網(wǎng)頁(yè)以及它試圖加載的 XML 文件,都必須位于相同的服務(wù)器上。 否則,xmlDoc.load() 將產(chǎn)生錯(cuò)誤 'Access is denied'。 */
早頁(yè)面增加一個(gè)按鈕來調(diào)用函數(shù):
<input type='button' name='bxml' value='Read' onclick='loadXMLDoc()' />
頁(yè)面將會(huì)輸出XMl內(nèi)節(jié)點(diǎn)的屬性和子節(jié)點(diǎn)的內(nèi)容。對(duì)于一般應(yīng)用來說,我覺得上面內(nèi)容已經(jīng)足夠了。我會(huì)在之后補(bǔ)充一些其他操作。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ASP中格式化時(shí)間短日期補(bǔ)0變兩位長(zhǎng)日期的方法2. 存儲(chǔ)于xml中需要的HTML轉(zhuǎn)義代碼3. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁(yè)4. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)5. asp知識(shí)整理筆記4(問答模式)6. 怎樣才能用js生成xmldom對(duì)象,并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島?7. 小技巧處理div內(nèi)容溢出8. js的一些潛在規(guī)則使用分析9. ASP實(shí)現(xiàn)加法驗(yàn)證碼10. XML解析錯(cuò)誤:未組織好 的解決辦法
