jQuery解析XML数据（jQuery调用JSON数据学习第六天）

       与传统的JavaScript调用XML数据相比，使用jQuery框架解析XML数据将方便很多，通常情况下，在jQuery框架中，先使用$.ajax()方法请求并打开指定的XML文件，然后，在回调函数中获取返回的XML文件数据对象，使用find（），children（），text（）方法获取各标签下的元素并读取元素的值。

（1）功能描述

       在页面中，用户单击“获取数据”按钮时，将回调用jQuery框架中的$.ajax()方法打开指定的XML文件，然后通过遍历的方式将读取的数据显示在页面中。

（2）实现代码

       功能代码：

<script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>
<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">
    $(function(){
        $("#Button1").Click(function() { //按钮单击事件
            var strHTML = ""; //初始化保存内容变量
            $.ajax({
                url:'Xml/7-5.xml',
                dataType:'xml',
                success:function(data) {
                    var $strUser = $(data).find("User");
                    strHTML += "编号：" + $strUser.attr("id") + "<br>";
                    strHTML += "姓名：" + $strUser.attr("name") + "<br>";
                    strHTML += "性别：" + $strUser.attr("sex") + "<br>";
                    strHTML += "邮箱：" + $strUser.attr("email") + "<hr>";
                }
            });
        });
    });
</script>

       主体代码：

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

      调用的XML文件代码如下：

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

（3）代码解析

         在中国例子中，当用户单击“获取数据”按钮时，先调用$.ajax()方法打开指定路径的XML文件。在该方法的回调函数中，获取传回的XML格式数据对象data；然后调用data数据对象的find（）方法，获取XML文件中的根目录标签“User”，并保存在“$strUser”变量中；最后，通过调用attr(),children(),text()方法获取标签的属性和内容，并将这些值以叠加的形式保存在变量中，再通过指定的元素将变量的内容显示在页面中。