JS解析XML文件和XML字符串详解
内容摘要
JS解析XML文件
<script type='text/javascript'>
loadXML = function(xmlFile){
var xmlDoc=null;
//判断浏览器的类型
//支持IE浏览器
if(!window.DOMParser && window.A
<script type='text/javascript'>
loadXML = function(xmlFile){
var xmlDoc=null;
//判断浏览器的类型
//支持IE浏览器
if(!window.DOMParser && window.A
文章正文
JS解析XML文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <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字符串
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <?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> |
使用方法
1 2 3 4 5 6 | 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进行解析。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | <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内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?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> |
以上所述就是本文的全部内容了,希望大家能够喜欢。
代码注释