js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
分别针对ie和火狐分别作了对xml文档和xml字符串的解析，所有代码都注释掉了，想看哪部分功能，去掉注释就可以了。
至于在ajax环境下解析xml，其实原理是一样的，只不过放在了ajax里，还是要对返回的xml进行解析。
代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Author" content="lushuaiyin">
</head>
<body>
用js解析xml文档和xml字符串
</body>
</html>
<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还是更好阅读和理解。这个解析太费劲了
代码如下:
<?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实例分析
本文实例讲述了JS解析XML的方法.分享给大家供大家参考.具体实现方法如下: <script type="javascript"> var txt="<note>"; txt=txt+"<to>George</to>"; txt=txt+"<from>John</from>"; txt=txt+"<heading>Reminder&l
-
JS提交并解析后台返回的XML的代码
复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- function createRequestObject() { try { xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); //for IE explorer usewin = "msxml"; } catch(e) { try { xmlhttp=new ActiveXObject(&quo
-
js 加载并解析XML字符串的代码
JS加载xml文档实例books.xml 复制代码 代码如下: <?xml version="1.0" encoding="ISO-8859-1"?> <bookstore> <book category="children"> <title lang="en">www.jb51.net</title> <author>J K. Rowling</a
-
js使用递归解析xml
xml结构: 复制代码 代码如下: <RightMenuItems> <Item Code="New" Name="新建" GroupCode="Edit" GroupName="编辑"/> <Item Code="Open" Name="打开" GroupCode="Edit" GroupName="编辑"&
-
JQuery解析HTML、JSON和XML实例详解
1.HTML 有的时候会将一段HTML片段保存在HTML文件中,在另外的主页面直接读取该HTML文件,然后解析里面的HTML代码片段融入到主页面中. fragment.html文件,其内容: 复制代码 代码如下: <div>hello Jquery</div> 在主页面 Test.html中解析代码 复制代码 代码如下: $("#a1").click(function(){ $("#div2").load('fragment.html
-
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
复制代码 代码如下: //导入js文件 function getResult(url, ready) { var xmlHttp; var r = function() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { //alert(isIE); var xmlstr; var xmldoc; var isIE = !!(window.attachEvent && !window.opera); if (isIE)
-
JavaScript 解析读取XML文档 实例代码
JavaScript解析读取XML文件,主要就是加载并解析XML文件,然后就可以测试解析的XML文件的内容,打印输出来. 在线演示:http://demo.jb51.net/js/2012/readxml/注:测试的时候需要在网站中测试,iis或apache中,注意不要本地双击运行测试index.htm 复制代码 代码如下: <html> <head> <title>我们</title> <script type="text/javascri
-
javascript解析xml字符串的函数
但是是XML字符串,则在两种浏览器下就会有所不同,IE下可以直接使用LoadXML方法解析XML字符串,而在FF下则要使用DOMParser 对象的parseFromString() 方法即 var oParser=new DOMParser(); xmlDoc=oParser.parseFromString(xmlStr,"text/xml"); 为了在两种浏览器中能通用,我想到了javascritp的发生异常的处理方式,就是try...catch... 复制代码 代码如下: fun
-
xml 封装与解析(javascript和C#中)
1.xml的解析(javascript中): 具体代码如下,解析的结果root为Dom树. 复制代码 代码如下: if (window.ActiveXObject){ var doc=new ActiveXObject("Microsoft.XMLDOM"); doc.async="false"; doc.loadXML(strXml); }else{ var parser=new DOMParser(); var doc=parser.parseFromStrin
-
通过AJAX的JS、JQuery两种方式解析XML示例介绍
JQuery版 复制代码 代码如下: $.ajax({ url : "order/order_orderDetail.do?params.type=merge", type : "post", data : params, success : function(xml) { hide(); if(xml == ""){ Dialog.popTip("找不到需要合并的订单", 2); }else{ var myTable=doc
-
JS解析XML的实现代码
JS代码: 复制代码 代码如下: <script language="javascript" type="text/javascript"> //需要读取的xml文件 var uRl = "jsReadXml.xml"; var xmlDoc; //初始化,给上述定义变量赋值 // function showcurcity(){ if(window.ActiveXObject) { xmlDoc=new ActiveXObject(&
-
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.