JS解析XML文件和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和火狐分别作了对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字符串详解相关文章请关注PHP中文网！