快捷導(dǎo)航

JS跨瀏覽器解析XML應(yīng)用過(guò)程詳解

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

這篇文章主要介紹了JS跨瀏覽器解析XML應(yīng)用過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

首先介紹簡(jiǎn)單的理論：

對(duì)于XML，我們可以理解它是一種樹(shù)結(jié)構(gòu)，它包含根，元素，屬性，文本等內(nèi)容。不同瀏覽器都有自己的解析器，把XML讀入內(nèi)存，并把它轉(zhuǎn)換為可被 JavaScript 訪問(wèn)的 XML DOM 對(duì)象。

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

如果你使用的是一個(gè)本地文件或者網(wǎng)絡(luò)文件且該文件在是在本服務(wù)器，那么對(duì)于IE和其他瀏覽器來(lái)說(shuō)都可以通過(guò)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)有具體的解析，我不再啰嗦，對(duì)于解析的內(nèi)容，分為字符串和文本兩種。

首先定義一個(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>

通過(guò)取消和注釋方式來(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èn)。 
這意味著，網(wǎng)頁(yè)以及它試圖加載的 XML 文件，都必須位于相同的服務(wù)器上。 
否則，xmlDoc.load() 將產(chǎn)生錯(cuò)誤 "Access is denied"。 
*/

早頁(yè)面增加一個(gè)按鈕來(lái)調(diào)用函數(shù)：

頁(yè)面將會(huì)輸出XMl內(nèi)節(jié)點(diǎn)的屬性和子節(jié)點(diǎn)的內(nèi)容。對(duì)于一般應(yīng)用來(lái)說(shuō)，我覺(jué)得上面內(nèi)容已經(jīng)足夠了。我會(huì)在之后補(bǔ)充一些其他操作。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: