手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
摘要:分别针对ie和火狐分别作了对xml文档和xml字符串的解析,所有代码都注释掉了,想看哪部分功能,去掉注释就可以了。至于在ajax环境下解析x...

分别针对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字符串和xml文档实现原理及代码(针对ie与火狐)】相关文章:

jQuery实现div随意拖动的实例代码(通用代码)

Js和JQuery获取鼠标指针坐标的实现代码分享

在ASP.NET MVC项目中使用RequireJS库的用法示例

EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)

JS中Eval解析JSON字符串的一个小问题

JS对字符串编码的几种方式使用

JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

JavaScript中toString()方法的使用详解

JavaScript中substring()方法的使用

jQuery实现延迟跳转的方法

精品推荐
分类导航