需要准备的XML文件Student.xml
<?xml version="1.0" encoding="gb2312"?>
<list>
<caption>student List</caption>
<student>
<name>张三</name>
<sex>男</sex>
<address>北京市海淀区</address>
<telephone>13331312223</telephone>
</student>
<student>
<name>李四</name>
<sex>男</sex>
<address>大连市软件园</address>
<telephone>13989874879</telephone>
</student>
<student>
<name>王五</name>
<sex>女</sex>
<address>上海张江高科</address>
<telephone>13828739876</telephone>
</student>
<student>
<name>赵六</name>
<sex>女</sex>
<address>深圳南山软件园</address>
<telephone>13517263986</telephone>
</student>
</list>
方式1：利用jQuery.ajax()
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function getXML(xmlDataUrl) {
//通过 HTTP 请求加载远程数据。
$.ajax({
type: "GET", //请求方式 默认为 "GET"。
url: xmlDataUrl, //发送请求的地址 默认为当前页地址
dataType: "xml", //预期服务器返回的数据类型。
success: function(myXML) { //请求成功后的回调函数。
$(myXML).find("student").each(
function() {
//获得数据
var strName = $(this).find("name").text();
var strSex = $(this).find("sex").text();
var strAddress = $(this).find("address").text();
var strTelephone = $(this).find("telephone").text();
var strHtml = "<tr>";
strHtml += "<td>" + strName + "</td>";
strHtml += "<td>" + strSex + "</td>";
strHtml += "<td>" + strAddress + "</td>";
strHtml += "<td>" + strTelephone + "</td>";
strHtml += "</tr>";
//输出到表格
$("#stuList").append($(strHtml));
}
);
}
});
}
</script>
</head>
<body>
<div>
<input id="Button1" type="button" onclick="getXML('Student.xml');" value="加载XML" />
<table id="stuList">
<tr>
<th scope="col">姓名</th>
<th scope="col">性别</th>
<th scope="col">家庭住址</th>
<th scope="col">联系电话</th>
</tr>
</table>
</div>
</body>
</html>
方式2：利用jQuery.get()
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
function getXML(xmlDataUrl) {
//这是一个简单的 GET 请求功能以取代复杂 $.ajax
$.get(xmlDataUrl, function(data) {
$(data).find('student').each(function() {
//获得数据
var strName = $(this).find("name").text();
var strSex = $(this).find("sex").text();
var strAddress = $(this).find("address").text();
var strTelephone = $(this).find("telephone").text();
var strHtml = "<tr>";
strHtml += "<td>" + strName + "</td>";
strHtml += "<td>" + strSex + "</td>";
strHtml += "<td>" + strAddress + "</td>";
strHtml += "<td>" + strTelephone + "</td>";
strHtml += "</tr>";
//输出到表格
$("#stuList").append($(strHtml));
});
});
}
</script>
</head>
<body>
<div>
<input id="Button1" type="button" onclick="getXML('Student.xml');" value="加载XML" />
<table id="stuList">
<tr>
<th scope="col">姓名</th>
<th scope="col">性别</th>
<th scope="col">家庭住址</th>
<th scope="col">联系电话</th>
</tr>
</table>
</div>
</body>
</html>
运行结果：以上两种方式运行结果是一样的
代码分析:
方式1：
jQuery.ajax([options])通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。此处使用方式
$.ajax({
type: "GET", //请求方式 默认为 "GET"。
url: xmlDataUrl, //发送请求的地址 默认为当前页地址
dataType: "xml", //预期服务器返回的数据类型。
success: function(data) { //请求成功后的回调函数。
}
})
success请求成功后的回调函数。data 能是 xmlDoc, jsonObj, html, text等等
方式2：
jQuery.get(url, [data], [callback], [type]) 通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。
此处使用方式
$.get(url, function(data) {
})
参数1待载入页面的URL地址
参数2载入成功时回调函数。
另外，如果需要传入参数，用如下类似方式
$.get(url, { name: "John", age: "28" },function(data) {
})
注意：
在for().each()循环XML元素中，如果要找到元素内容，利用find(‘元素名’)形式，如上面的
var strAddress = $(this).find("address").text();
如果要找元素的属性，利用此元素对象的attr属性。例如果上例中address增加了country属性：
<address country="China">北京市海淀区</address>
如果既要获得地址又要获得国家，以上代码改为如下形式
var strAddress = $(this).find("address").text() + $(this).find("address").attr("country");
$(this).find("address").attr("country")获得address节点上的country属性
另外在网上找到一篇类似的文章，作为扩展阅读
使用JQuery动态加载XML文件数据
快速导读
今天向大家演示如何通过JQuery框架为空白HTML文档加载从XML文件读取的数据。我们将会主要用到JQuery自带函数 $.get 。
准备工作
在开始之前我们需要做如下准备工作：
1.创建一个名为DEMO.html空白html文件；（推荐使用Editplus 3创建）
2.熟悉JQuery框架的基本语法；（不熟悉没关系，后面我会注释得很详细）
3.创建一个名为data.xml的XML文件用来存储数据，XML的结构下面会涉及到，你也可以下载我打包好的文件查看；
4.一个loading.gif图片，这个图片用于在将XML读取出来的等待时间里面显示在空白html文档中。
正式开始：
Step 1:首先让我们看看这个data.xml的简单结构，我这里演示的数据是"Saturn为您推荐的几本书"，故为书籍信息，那么xml就包括书籍的名称，缩略图和书籍描述信息；
<?xml version="1.0" encoding="utf-8" ?>
<books>
<book title="藏地密码" imageurl="images/Tibet_Code.jpg">
<description>
这里是概况(www.huyang8.com)
</description>
</book>
<book title="剑桥雅思6" imageurl="images/ielts.jpg">
<description>
这里是概况(www.huyang8.com)
</description>
</book>
<book title="Professional ASP.NET" imageurl="images/asp.jpg">
<description>
这里是概况(www.huyang8.com)
</description>
</book>
</books>
其次，让我们看看加载在空白HTML文档里面的JavaScript代码：
运行结果：
Step 2:这里，我只讲下JavaScript代码原理与运行流程，不过分讨论语法，如果你对语法有任何疑问，请给我留言或者查看JQuery相关文档。
行1：当HTML文档准备完毕之后（即html和JavaScript都下载完毕），会自动触发JQuery的 $(document).ready方法及里面的过程。显然，这里首先执行的是$.get方法。
行3：$.get的第一个参数是XML文件的相对路径（注意路径要填写正确，这里我们把XML和网页文件放在同一文件夹）。第二个参数是一个Callback函数，即回调函数。就是说通过get方法来请求这个XML文件的内容，然后通过这个callback回调函数来操作里面的数据。而callback的参数d表示从XML回调过来的所有数据，有了这个参数d，我们就好进行下面的内容了。
行4：通过JavaScript在文档的BODY中动态添加一个标签<h1>，这个是页面的总标题，无关紧要；
行5：同样在BODY中动态添加一个标签<dl>,用来作为包含循环下面的内容容器。（行20会用到）
行7：这一行很重要，因为我们已经说过，回调函数的参数d表示从XML回调的所有数据，现在我们就需要对这些数据进行处理（筛选）和格式化；请注意：这里通过搜寻book标签（tag），然后循环执行each后面的函数，直到xml里面数据的条目完全循环完毕；（有点像PHP里面的foreach函数的功能）
行9：$(this)实际上就创建一个对象，目的是将d的当前一条书籍信息对象实例化，方便进行操作，这就是$book；
行10--行12：分别获取当前对象$book的书籍名称，描述和缩略图；（注意取属性值和取节点值的语法不同）
行14-行18：格式化书籍信息，以便输出；
行20：将格式化后的信息以HTML输出方式输出到文档中。
行22：为了告诉用户我们当前的信息正在从XML中读取，2000毫秒（2秒）后，图片逐渐消失。
Step 3:至此，大功告成。欢迎大家给我留言，共同讨论JQuery的开发和你所碰到的问题，请不吝赐教。另外，请将下载后的文件夹放在WEB环境下运行（IIS或虚拟主机），请不要直接点开运行
附源码【注：右键另存后把扩展名gif改为rar】：代码下载
50
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
