JQuery读取XML文件数据并显示的实现代码

准备工作
在开始之前我们需要做如下准备工作：
1.创建一个名为DEMO.html空白html文件；（推荐使用Editplus创建）
2.熟悉JQuery框架的基本语法；（不熟悉没关系，后面我会注释得很详细）
3.创建一个名为data.xml的XML文件用来存储数据，XML的结构下面会涉及到，你也可以下载我打包好的文件查看；
4.一个loading.gif图片，这个图片用于在将XML读取出来的等待时间里面显示在空白html文档中
正式开始
Step 1:首先让我们看看这个data.xml的简单结构，我这里演示的数据是”Saturn为您推荐的几本书”，故为书籍信息，那么xml就包括书籍的名称，缩略图和书籍描述信息；
以下为XML文件代码：

<?xml version=”1.0″ encoding=”utf-8″ ?>
<books>
<book title=”藏地密码” imageurl=”images/Tibet_Code.jpg”>
<description>
这里是概况(www.jb51.net)
</description>
</book>
<book title=”剑桥雅思6″ imageurl=”images/ielts.jpg”>
<description>
这里是概况(www.jb51.net)
</description>
</book>
<book title=”Professional ASP.NET” imageurl=”images/asp.jpg”>
<description>
这里是概况(www.jb51.net)
</description>
</book>
</books>


其次，让我们看看加载在空白HTML文档里面的JavaScript代码：

$(document).ready(function()
{
$.get(‘myData.xml’, function(d){
$(‘body’).append(‘<h1> Saturn给你推荐几本书： </h1>’);
$(‘body’).append(‘<dl />’);
$(d).find(‘book’).each(function(){
var $book = $(this);
var title = $book.attr(“title”);
var description = $book.find(‘description’).text();
var imageurl = $book.attr(‘imageurl’);
var html = ‘<dt> <img class=”bookImage” alt=”” src=”‘%20+%20imageurl%20+%20′” /> </dt>’;
html += ‘<dd> <span class=”loadingPic” alt=”Loading” />’;
html += ‘<p class=”title”>’ + title + ‘</p>’;
html += ‘<p> ‘ + description + ‘</p>’ ;
html += ‘</dd>’;
$(‘dl’).append($(html));
$(‘.loadingPic’).fadeOut(2000);
});
});
});

Step 2:这里，我只讲下JavaScript代码原理与运行流程，不过分讨论语法，如果你对语法有任何疑问，请给我留言或者查看JQuery相关文档。
行1：当HTML文档准备完毕之后（即html和JavaScript都下载完毕），会自动触发JQuery的 $(document).ready方法及里面的过程。显然，这里首先执行的是$.get方法。