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" οnclick="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.οnlοad=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>