如何使用JS解析XML文件和XML字符串

這篇文章將為大家詳細講解有關如何使用JS解析XML文件和XML字符串，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

                                                           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>

關于如何使用JS解析XML文件和XML字符串就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。