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和其他瀏覽器來(lái)說(shuō)都可以通過load(uRl),loadXML(strXML)來(lái)創(chuàng)建Xdom對(duì)象。但是對(duì)于文本,除IE外需要一個(gè)單獨(dú)的解析器來(lái)處理。
以下函數(shù)用于根據(jù)不同的瀏覽器來(lái)創(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() 方法來(lái)解析 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>
通過取消和注釋方式來(lái)選擇是文本還是字符串。
這個(gè)方法可以是通用的,下面再來(lái)解析這個(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ù)和屬性我們來(lái)解析一下:
/* 一些典型的 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è)按鈕來(lái)調(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)用來(lái)說(shuō),我覺得上面內(nèi)容已經(jīng)足夠了。我會(huì)在之后補(bǔ)充一些其他操作。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 使用ProcessBuilder調(diào)用外部命令,并返回大量結(jié)果2. 通過工廠模式返回Spring Bean方法解析3. 使用css實(shí)現(xiàn)全兼容tooltip提示框4. JSP實(shí)現(xiàn)客戶信息管理系統(tǒng)5. Intellij IDEA連接Navicat數(shù)據(jù)庫(kù)的方法6. python 批量下載bilibili視頻的gui程序7. python中HTMLParser模塊知識(shí)點(diǎn)總結(jié)8. CSS自定義滾動(dòng)條樣式案例詳解9. Ajax提交post請(qǐng)求案例分析10. 關(guān)于Mysql-connector-java驅(qū)動(dòng)版本問題總結(jié)
