js解析xml

　JS对XML的解析是基于DOM的，对HTML的DOM熟悉的话，解析XML就没什么困难了。

　　　　注意：在Firefox中，解析器不会忽略空格，所以元素间的空格，FF一样会认为是一个节点。
　　　　不过在我们用程序拼接XML的时候，一般不会出现节点间有空格的情况。

 

　　　　在根目录下添加一个新的一般处理程序（GetXml.ashx），代码如下：

<%@ WebHandler Language="C#" Class="GetXml" %>using System;using System.Web;public class GetXml : IHttpHandler {        public void ProcessRequest (HttpContext context) {        System.Text.StringBuilder sb = new System.Text.StringBuilder("<?xml version='1.0' ?><Persons>");        string temp = "<Person><Id>{0}</Id><Name>{1}</Name></Person>";        sb.AppendFormat(temp, 1, "n_1");        sb.AppendFormat(temp, 2, "n_2");        sb.Append("</Persons>");                context.Response.ContentType = "text/xml";        context.Response.Write(sb.ToString());    }     public bool IsReusable {        get {            return false;        }    }}

　在Default.aspx页面添加以下脚本：

 function getXml() {            // 在IE7下测试通过，IE6下必须创建 new ActiveXObject("MSXML2.XMLHTTP.6.0")            var request = new XMLHttpRequest();            request.open('GET', 'GetXml.ashx');            request.onreadystatechange = function() {                if (request.readyState == 4 && request.status == 200) {                    var xmlDoc = request.responseXML;                    var root = xmlDoc.documentElement;                    var elements = root.getElementsByTagName("Person");                    alert(elements.length); // 2                    // elements[0].firstChild 引用到第一个Person节点的Id节点                    // elements[0].firstChild.firstChild 引用到Id节点的文本节点                    // 因为文本节点是元素节点的第一个子节点                    alert(elements[0].firstChild.firstChild.nodeValue); // 1                    alert(elements[1].lastChild.firstChild.nodeValue);  // 'n_2'                }            }            request.send(null);        }

注意到代码段：var root = xmlDoc.documentElement;

　　　　主要是为了消除IE6和其他浏览器的兼容问题，在其他浏览器下，允许request.responseXML.getElementsByTagName("Person");

　　　　添加测试按钮：

<input type="button" value="GetXml" onclick="getXml();" />

总结：从代码上很容易看出，解析JSON相对直观，在网络中需要传输的字符串也比较少，解析过程中也不需要考虑浏览器兼容问题。
　　   但JSON比较适合轻量级的数据交互，XML则比JSON多了一些特性，比如命名空间，还有更多的节点类型。

这里有一个参考的实例：

js代码：

<script language="javascript" type="text/javascript"> //需要读取的xml文件 var uRl = "jsReadXml.xml"; var xmlDoc; //初始化，给上述定义变量赋值 // function showcurcity(){ if(window.ActiveXObject) { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async="false" xmlDoc.load(uRl); getvalue(); } else if(document.implementation && document.implementation.createDocument) { xmlDoc=document.implementation.createDocument("", "root", null); xmlDoc.load(uRl); xmlDoc.onload=getvalueff; } // else { // return null; // } // } function getvalue() { var nodes=xmlDoc.documentElement.childNodes; var now=new Date(); for(i=0;i<nodes.length;i++){ var value=nodes.item(i).childNodes.item(0).text ; alert(nodes.item(i).childNodes.item(1).text); alert(nodes.item(i).childNodes.item(2).text); } } function getvalueff(){ var cCode=xmlDoc.getElementsByTagName("date"); var now = new Date(); var nowvalue=now.getFullYear()+'年'+(now.getMonth()+1)+'月'+now.getDate()+'日'; for(i=0;i<cCode.length;i++) { alert(xmlDoc.getElementsByTagName("imgsrc")[i].childNodes[0].nodeValue); alert(xmlDoc.getElementsByTagName("title")[i].childNodes[0].nodeValue); alert(xmlDoc.getElementsByTagName("url")[i].childNodes[0].nodeValue); } } </script> 

xml代码：

<?xml version="1.0" encoding="UTF-8" ?> <root> <imags> <imgsrc>images/ad-01.jpg</imgsrc> <title>胡志明市</title> <url>http://torchrelay.beijing2008.cn/cn/journey/hochiminhcity/</url> </imags> <imags> <imgsrc>images/ad-02.jpg</imgsrc> <title>香港2</title> <url>http://torchrelay.beijing2008.cn/cn/journey/hongkong/</url> </imags> <imags> <imgsrc>images/ad-03.jpg</imgsrc> <title>香港3</title> <url>http://torchrelay.beijing2008.cn/cn/journey/hongkong/</url> </imags> <imags> <imgsrc>images/ad-04.jpg</imgsrc> <title>香港4</title> <url>http://torchrelay.beijing2008.cn/cn/journey/hongkong/</url> </imags> <imags> <imgsrc>images/ad-05.jpg</imgsrc> <title>香港5</title> <url>http://torchrelay.beijing2008.cn/cn/journey/hongkong/</url> </imags> </root>