您好,登錄后才能下訂單哦!
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); }
方法內有具體的解析,我不再啰嗦,對于解析的內容,分為字符串和文本兩種。
首先定義一個字符串:
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()" />
看完上述內容,你們掌握JS如何跨瀏覽器進行解析XML應用的方法了嗎?如果還想學到更多技能或想了解更多相關內容,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。