JS解析XML文件

<script type='text/javascript'>loadXML = function(xmlFile){var xmlDoc=null;//判斷瀏覽器的類型//支持IE瀏覽器if(!window.DOMParser && window.ActiveXObject){var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];for(var i=0;i<xmlDomVersions.length;i++){try{xmlDoc = new ActiveXObject(xmlDomVersions[i]);break;}catch(e){}}}//支持Mozilla瀏覽器else if(document.implementation && document.implementation.createDocument){try{/* document.implementation.createDocument('','',null); 方法的三個參數說明* 第一個參數是包含文檔所使用的命名空間URI的字符串；* 第二個參數是包含文檔根元素名稱的字符串；* 第三個參數是要創建的文檔類型（也稱為doctype）*/xmlDoc = document.implementation.createDocument('','',null);}catch(e){}}else{return null;}if(xmlDoc!=null){xmlDoc.async = false;xmlDoc.load(xmlFile);}return xmlDoc;}</script>

JS解析XML字符串

<script type='text/javascript'>loadXML = function(xmlString){var xmlDoc=null;//判斷瀏覽器的類型//支持IE瀏覽器if(!window.DOMParser && window.ActiveXObject){ //window.DOMParser 判斷是否是非ie瀏覽器var xmlDomVersions = ['MSXML.2.DOMDocument.6.0','MSXML.2.DOMDocument.3.0','Microsoft.XMLDOM'];for(var i=0;i<xmlDomVersions.length;i++){try{xmlDoc = new ActiveXObject(xmlDomVersions[i]);xmlDoc.async = false;xmlDoc.loadXML(xmlString); //loadXML方法載入xml字符串break;}catch(e){}}}//支持Mozilla瀏覽器else if(window.DOMParser && document.implementation && document.implementation.createDocument){try{/* DOMParser 對象解析 XML 文本并返回一個 XML Document 對象。* 要使用 DOMParser，使用不帶參數的構造函數來實例化它，然后調用其 parseFromString() 方法* parseFromString(text, contentType) 參數text:要解析的 XML 標記 參數contentType文本的內容類型* 可能是 "text/xml" 、"application/xml" 或 "application/xhtml+xml" 中的一個。注意，不支持 "text/html"。*/domParser = new DOMParser();xmlDoc = domParser.parseFromString(xmlString, 'text/xml');}catch(e){}}else{return null;}return xmlDoc;}</script>

測試XML

<?xml version="1.0" encoding="utf-8" ?><DongFang><Company><cNname>1</cNname><cIP>1</cIP></Company><Company><cNname>2</cNname><cIP>2</cIP></Company><Company><cNname>3</cNname><cIP>3</cIP></Company><Company><cNname>4</cNname><cIP>4</cIP></Company><Company><cNname>5</cNname><cIP>5</cIP></Company><Company><cNname>6</cNname><cIP>6</cIP></Company></DongFang>

使用方法

var xmldoc=loadXML(text.xml)var elements = xmlDoc.getElementsByTagName("Company");for (var i = 0; i < elements.length; i++) {var name = elements[i].getElementsByTagName("cNname")[0].firstChild.nodeValue;var ip = elements[i].getElementsByTagName("cIP")[0].firstChild.nodeValue;}

以上方法適合IE，下面我們來探討下IE和火狐瀏覽器下解析XML的問題

分別針對ie和火狐分別作了對xml文檔和xml字符串的解析，所有代碼都注釋掉了，想看哪部分功能，
去掉注釋就可以了。

至于在ajax環境下解析xml，其實原理是一樣的，只不過放在了ajax里，還是要對返回的xml進行解析。

<script> //解析xml文檔///////////////////////////////////////////////////// var xmlDoc=null; //支持IE瀏覽器 if(window.ActiveXObject){   xmlDoc=new ActiveXObject("Microsoft.XMLDOM");  } //支持Mozilla瀏覽器 else if(document.implementation && document.implementation.createDocument){   xmlDoc = document.implementation.createDocument('','',null); } else{  alert("here"); } if(xmlDoc!=null){   xmlDoc.async = false;   xmlDoc.load("house.xml"); } //ie和火狐不僅解析器不一樣，解析過程也不一樣。如下; //ie解析xml文檔 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//彈出150萬 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//彈出一室三居 //層層遍歷解析childNodes[1] //alert(xmlDoc.childNodes[1].childNodes[1].childNodes[0].childNodes[0].nodeValue);//彈出200萬 //alert(xmlDoc.childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue);//彈出150萬 //alert(xmlDoc.childNodes[1].childNodes[0].childNodes[1].childNodes[0].nodeValue);//彈出一室三居 //還可以用item(i)進行遍歷 //var nodes=xmlDoc.documentElement.childNodes; //alert(nodes.item(0).childNodes.item(0).childNodes.item(0).text); //彈出150萬 //alert(nodes.item(0).childNodes.item(1).childNodes.item(0).text); //彈出一室三居 //火狐解析xml文檔 //火狐瀏覽器和ie解析xml不一樣節點的值用textContent。 //并且他會在有的層次child節點前后都加上"/n"換行符。（這個搞不清楚為什么，用firebug調試的時候就是這個樣子，所以寫過的代碼最好測試一下，換個環境就不對了） //也就是說第1個節點是"/n",第2個節點才是真正的第一個節點。 //第3個節點是"/n",第4個節點才是真正的第二個節點。 //層層獲取解析childNodes[0] //alert(xmlDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//彈出150萬 //alert(xmlDoc.childNodes[0].childNodes[1].childNodes[3].textContent);//彈出一室三居 //直接獲取節點名解析getElementsByTagName("address") //alert(xmlDoc.getElementsByTagName("address")[0].textContent);//彈出150萬 一室三居 200萬 300萬 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].textContent);//彈出150萬 一室三居 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[1].textContent);//彈出150萬 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[1].childNodes[3].textContent);//彈出一室三居 //alert(xmlDoc.getElementsByTagName("address")[0].childNodes[3].textContent);//彈出200萬  //火狐也可以用item(1)函數遍歷，注意也是有的層次節點前后都加了節點"/n"。 //第一個節點是item(1)，第二個節點是item(3)，第三個節點是item(5) //item(1)函數遍歷解析 //var nodes=xmlDoc.documentElement.childNodes; //alert(nodes.item(1).textContent); //彈出150萬 一室三居 //alert(nodes.item(1).childNodes.item(1).textContent); //彈出150萬  //alert(nodes.item(1).childNodes.item(3).textContent); //一室三居  //解析xml字符串///////////////////////////////////////////////////////////////////////// var str="<car>"+ "<brand><price>50萬</price><pattern>A6</pattern></brand>"+ "<brand><price>65萬</price><pattern>A8</pattern></brand>"+ "<brand><price>17萬</price></brand>"+ "</car>";  //跨瀏覽器，ie和火狐解析xml使用的解析器是不一樣的。 var xmlStrDoc=null; if (window.DOMParser){// Mozilla Explorer  parser=new DOMParser();  xmlStrDoc=parser.parseFromString(str,"text/xml"); }else{// Internet Explorer  xmlStrDoc=new ActiveXObject("Microsoft.XMLDOM");  xmlStrDoc.async="false";  xmlStrDoc.loadXML(str); } //ie解析xml字符串 //alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[0].childNodes[0].nodeValue);//彈出50萬 //alert(xmlStrDoc.getElementsByTagName("car")[0].childNodes[0].childNodes[1].childNodes[0].nodeValue);//彈出A6  //還可以用item(i)進行遍歷 //var strNodes=xmlStrDoc.documentElement.childNodes; //alert(strNodes.item(0).childNodes.item(0).childNodes.item(0).text); //彈出50萬 //alert(strNodes.item(0).childNodes.item(1).childNodes.item(0).text); //彈出A6  //火狐解析xml字符串 //火狐瀏覽器和ie解析xml不一樣節點的值用textContent。 //并且他會在有的層次child節點前后都加上"/n"換行符。 //也就是說第1個節點是"/n",第2個節點才是真正的第一個節點。 //第3個節點是"/n",第4個節點才是真正的第二個節點。 //alert(xmlStrDoc.childNodes[0].childNodes[1].textContent);//彈出65萬 A8 //alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[1].textContent);//A8 //alert(xmlStrDoc.childNodes[0].childNodes[1].childNodes[0].textContent);//彈出65萬  //火狐也可以用item(1)函數遍歷，注意也是有的層次節點前后都加了節點"/n"。 //第一個節點是item(1)，第二個節點是item(3)，第三個節點是item(5) //var nodes=xmlStrDoc.documentElement.childNodes; //alert(nodes.item(1).textContent); //彈出65萬 A8 //alert(nodes.item(1).childNodes.item(0).textContent); //彈出65萬  //alert(nodes.item(1).childNodes.item(1).textContent); //彈出A8   </script> 

其中xml每個節點所在層次是最煩人的問題，只能一次次去試，只要出來一個正確的，
就很好確定節點的層次關系了，或者debug一下。
感覺這方面json還是更好閱讀和理解。這個解析太費勁了！

文檔house.xml內容如下：

<?xml version="1.0" encoding="utf-8" ?>  <address>   <city name="北京">     <price>150萬</price>     <type>一室三居</type>   </city>   <city name="上海">     <price>200萬 </price>   </city>   <city name="杭州">     <price>230萬</price>   </city>   <city name="南京"></city> </address> 

以上所述就是本文的全部內容了，希望大家能夠喜歡。