JS跨瀏覽器解析XML應用過程詳解
首先介紹簡單的理論:
對于XML,我們可以理解它是一種樹結構,它包含根,元素,屬性,文本等內容。不同瀏覽器都有自己的解析器,把XML讀入內存,并把它轉換為可被 JavaScript 訪問的 XML DOM 對象。
微軟的 XML 解析器與其他瀏覽器中的解析器是有差異的。微軟的解析器支持對 XML 文件和 XML 字符串(文本)的加載,而其他瀏覽器使用單獨的解析器。不過,所有的解析器都含有遍歷 XML 樹、訪問、插入及刪除節點的函數。
如果你使用的是一個本地文件或者網絡文件且該文件在是在本服務器,那么對于IE和其他瀏覽器來說都可以通過load(uRl),loadXML(strXML)來創建Xdom對象。但是對于文本,除IE外需要一個單獨的解析器來處理。
以下函數用于根據不同的瀏覽器來創建Xdom對象:
function loadXMLDoc() { var xmlDoc; // code for IE if (window.ActiveXObject){ xmlDoc=new ActiveXObject('Microsoft.XMLDOM');//創建空的微軟 XML 文檔對象 //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 對象 parser=new DOMParser(); xmlDoc=parser.parseFromString(txt,'text/xml'); }else{ alert(’Your browser cannot handle this script’); } //關閉異步加載,這樣可確保在文檔完整加載之前,解析器不會繼續執行腳本 xmlDoc.async=false; createTable(xmlDoc); }
方法內有具體的解析,我不再??攏?雜誚馕齙哪諶藎?治?址??臀謀玖街幀?/p>
首先定義一個字符串:
var xmlstr='<?xml version='1.0' encoding='UTF-8'?><goodss><goods id='1'><name>數碼相機</name><price>3206(元)</price></goods><goods id='2'><name>聯想筆記本電腦</name><price>3206(元)</price></goods></goodss>';
然后定義一個goods.xml文件:
文件內容為:
<?xml version='1.0' encoding='UTF-8'?> <goodss> <goods id='1'> <name>數碼相機</name> <price>3206(元)</price> </goods> <goods id='2'> <name>聯想筆記本電腦</name> <price>3206(元)</price> </goods> </goodss>
通過取消和注釋方式來選擇是文本還是字符串。
這個方法可以是通用的,下面再來解析這個Xdom對象:
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 />'); } } }
對于使用到的函數和屬性我們來解析一下:
/* 一些典型的 DOM 屬性 x.nodeName - x 的名稱 x.nodeValue - x 的值 x.parentNode - x 的父節點 x.childNodes - x 的子節點 x.attributes - x 的屬性節點 x.firstChild - x 的第一個子節點,等同于childNodes[0] x.lastChild - x 的最后一個子節點 x.data - x 的內容,等同nodeValue x.length - x 的長度 x.nodeType - x 的類型:1,元素,2,屬性,3,文本,4,注釋,5,文檔 在上面的列表中,x 是一個節點對象 XML DOM 方法 x.getElementsByTagName(name) - 獲取帶有指定標簽名稱的所有元素,返回的是數組 x.getAttribute(name) - 返回屬性的值 */ /*出于安全方面的原因,現代的瀏覽器不允許跨域的訪問。 這意味著,網頁以及它試圖加載的 XML 文件,都必須位于相同的服務器上。 否則,xmlDoc.load() 將產生錯誤 'Access is denied'。 */
早頁面增加一個按鈕來調用函數:
<input type='button' name='bxml' value='Read' onclick='loadXMLDoc()' />
頁面將會輸出XMl內節點的屬性和子節點的內容。對于一般應用來說,我覺得上面內容已經足夠了。我會在之后補充一些其他操作。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。
相關文章: