JS跨瀏覽器解析XML應用過程詳解

更新時間：2020年10月16日 11:47:39 作者：cuisuqiang

這篇文章主要介紹了JS跨瀏覽器解析XML應用過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

首先介紹簡單的理論：

對于XML，我們可以理解它是一種樹結構，它包含根，元素，屬性，文本等內容。不同瀏覽器都有自己的解析器，把XML讀入內存，并把它轉換為可被 JavaScript 訪問的 XML DOM 對象。

微軟的 XML 解析器與其他瀏覽器中的解析器是有差異的。微軟的解析器支持對 XML 文件和 XML 字符串（文本）的加載，而其他瀏覽器使用單獨的解析器。不過，所有的解析器都含有遍歷 XML 樹、訪問、插入及刪除節(jié)點的函數(shù)。

如果你使用的是一個本地文件或者網絡文件且該文件在是在本服務器，那么對于IE和其他瀏覽器來說都可以通過load(uRl)，loadXML(strXML)來創(chuàng)建Xdom對象。但是對于文本，除IE外需要一個單獨的解析器來處理。

以下函數(shù)用于根據(jù)不同的瀏覽器來創(chuàng)建Xdom對象：

function loadXMLDoc() { 
  var xmlDoc; 
  // code for IE 
  if (window.ActiveXObject){ 
   xmlDoc=new ActiveXObject("Microsoft.XMLDOM");//創(chuàng)建空的微軟 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'); 
  } 
  //關閉異步加載，這樣可確保在文檔完整加載之前，解析器不會繼續(xù)執(zhí)行腳本 
  xmlDoc.async=false;  
  createTable(xmlDoc); 
}

方法內有具體的解析，我不再啰嗦，對于解析的內容，分為字符串和文本兩種。

首先定義一個字符串：

var xmlstr="<?xml version=\"1.0\" encoding=\"UTF-8\"?><goodss><goods id=\"1\"><name>數(shù)碼相機</name><price>3206(元)</price></goods><goods id=\"2\"><name>聯(lián)想筆記本電腦</name><price>3206(元)</price></goods></goodss>";

然后定義一個goods.xml文件：

文件內容為：

<?xml version="1.0" encoding="UTF-8"?> 
<goodss> 
  <goods id="1"> 
    <name>數(shù)碼相機</name> 
    <price>3206(元)</price> 
  </goods> 
  <goods id="2"> 
    <name>聯(lián)想筆記本電腦</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 />"); 
    } 
  }   
}

對于使用到的函數(shù)和屬性我們來解析一下：

/* 
一些典型的 DOM 屬性 
x.nodeName - x 的名稱 
x.nodeValue - x 的值 
x.parentNode - x 的父節(jié)點 
x.childNodes - x 的子節(jié)點 
x.attributes - x 的屬性節(jié)點 
x.firstChild - x 的第一個子節(jié)點，等同于childNodes[0] 
x.lastChild - x 的最后一個子節(jié)點 
x.data - x 的內容，等同nodeValue 
x.length - x 的長度 
x.nodeType - x 的類型：1,元素,2,屬性,3,文本,4,注釋,5,文檔 
在上面的列表中，x 是一個節(jié)點對象 
XML DOM 方法 
x.getElementsByTagName(name) - 獲取帶有指定標簽名稱的所有元素，返回的是數(shù)組 
x.getAttribute(name) - 返回屬性的值 
*/ 
/*出于安全方面的原因，現(xiàn)代的瀏覽器不允許跨域的訪問。 
這意味著，網頁以及它試圖加載的 XML 文件，都必須位于相同的服務器上。 
否則，xmlDoc.load() 將產生錯誤 "Access is denied"。 
*/

早頁面增加一個按鈕來調用函數(shù)：

頁面將會輸出XMl內節(jié)點的屬性和子節(jié)點的內容。對于一般應用來說，我覺得上面內容已經足夠了。我會在之后補充一些其他操作。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: