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