jQuery调用XML数据【使用传统JavaScript调用XML的方法】（jQuery调用JSON数据学习第五天）

       作为一种理想的数据交互语言，XML与JSON有太多的相似之处，在编码的可读性和解码难度上，XML都优于JSON，只是在处理复合的JavaScript对象时不及JSON。

       在表现形式上，XML采用的是标准的标签，因此，如果需要完整地解析一个XML格式的数据，有两种方式：一种方式是通过DOM文档模型进行解析，另外一种方式是遍历各个标签的节点（如childNodes等）。本节将逐步介绍在jQuery中如何解析，遍历，操作XML数据的详细过程。

使用传统JavaScript调用XML的方法

       在介绍使用jQuery调用XML数据之前，我们先来看看在传统的JavaScript代码中，是如何借助XMLHttpRequest对象，打开并读取一个XML格式数据的。

（1）功能描述

       在页面中，用户单击"获取数据"按钮后，将利用传统的JavaScript代码，打开一个指定的XML文件并读取该文件中的内容，最后显示在页面中。

（2）实现代码

      主体代码：

<style type="text/css">
    body{font-size:13px}
    .iframe{width:260px;border:solid 1px #666}
    .iframe .title{padding:5px;background-color:#eee}
    .iframe .content{padding:8px;font-size:12px}
    .btn{border:#666 1px solid;padding:2px;width:80px;
    filter:progid:DXImageTransform.Microsoft
    .Gradient(GradientType=0;StartColorStr=#ffffff,
    EndColorStr=#ECE9D8);}     
</style>
<script type="text/javascript">
    //加载XML文件
    function loadXML(xmlFile) {
        var xmlDoc xmlhttp;
        //兼容IE 7+，Firefox，Chrome，Opera，Safari
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        }
        else {//兼容 IE 5，IE 6
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.open("GET",xmlFile,false);
        xmlhttp.send();
        xmlDoc = xmlhttp.responseXML;
        return xmlDoc;
    }
    function btn_Click() {    //按钮单击事件
        var strHTML = "";     //初始化保存内容
        var NewXmlDoc = loadXML("Xml/7-4.xml");
        strHTML += "姓名：" + NewTmpTag[0]
                    .getElementsByTagName("name")[0]
                    .firstChild.nodeValue + "<br>";
        strHTML += "性别：" + NewTmpTag[0]
                    .getElementsByTagName("sex")[0]
                    .firstChild.nodeValue + "<br>";
        strHTML += "邮箱：" + NewTmpTag[0]
                    .getElementsByTagName("email")[0]
                    .firstChild.nodeValue + "<br>";
        //显示处理后的数据
        document.getElementById("Tip").innerHTML = strHTML;
    }
</script>

<div class="iframe">
    <div class="title">
        <input type="button" onclick="btn_Click()" class="btn" value="获取数据" />
    </div>
    <div class="content">
        <div id="Tip"></div>
    </div>
</div>

           xml代码：

<?xml version="1.0" encoding="utf-8" ?>
<Info>
    <User>
        <name>tgr</name>
        <sex>男</sex>
        <email>tao_guo_rong@163.com</email>
    </User>
</Info>

（3）代码分析

       在例子中为了获取xml文件中的内容，首先要定义一个loadXML（f）函数，其形参“f”为调用XML文件的路径。在该函数中，先根据不同浏览器取得XMLHttpRequest对象，并将该对象并保存至xmlhttp变量中，然后将传来的实参“f”值作为参数调用该对象的open（）方法，最后调用该对象的send（）方法获取XML文件读取成功后的数据对象，并作为函数的返回值传递给调用函数。

       在用户单击按钮时，为了将获取后的XML数据显示在页面中，自定义一个btn_Click()函数。在该函数中，先调用loadXML（f）函数，并将函数返回的数据对象保存至变量NewXmlDoc中；然后，调用getElementByTagName（）方法获取数据对象中的各个标签，使用“firstChild.nodeValue”形式获取各标签下对应的值；最后，将获取的各标签值以叠加的形式保存至变量，通过指定元素将变量的内容显示在页面中。