jQuery读取显示XML文件实战教程及注意事项详解
这次给大家带来jquery读取并显示xml文件。 jquery读取并显示xml文件有哪些注意事项？下面是一个实际案例，我们来看看。
准备
在开始之前我们需要做以下准备工作：
1、创建一个空白的html文件，命名为demo.html； （推荐使用editplus创建）
2.熟悉jquery框架的基本语法； （不熟悉也没关系，稍后我会详细解释）
3. 创建一个名为data.xml的xml文件来存储数据。下面将介绍xml的结构。您也可以下载我打包的文件来查看；
4.一个loading.gif图像，该图像用于在读取xml的等待时间内显示在空白html文档中。
正式开始
步骤1：首先让我们看一下这个data.xml的简单结构。我这里演示的数据是土星给大家推荐的几本书，所以是书籍信息。然后xml包含了书籍的名称、缩略图和书籍描述信息。 ;
以下是xml文件代码：
这是概述 这是概述 这是概述=
其次，让我们看一下空白 html 文档中加载的 javascript 代码：
$(document).ready(function() { $.get('mydata.xml', function(d){ $('body').append('土星向你推荐一些书籍：'); $(' body ').append(''); $(d).find('book').each(function(){ var $book = $(this); var title = $book.attr("title"); var描述= $book.find('描述').text(); var imageurl = $book.attr('imageurl');
'; html+='
'; html+='
' + 标题 + '
'; html+='
' + 描述 + '
'; html+='
'; $('dl').append($(html)); $('.loadingpic').fadeout(2000); }); }); });
步骤2：这里，我只讲JavaScript代码的原理和运行过程，但不会过多讨论语法。如果对语法有任何疑问，请给我留言或者查看jquery相关文档。
第1行：当html文档准备好时（即html和javascript都下载完毕），jquery的$(document).ready方法以及里面的流程会被自动触发。显然，这里首先执行的是$.get方法。
第3行：$.get的第一个参数是xml文件的相对路径（注意路径一定要填写正确，这里我们把xml和网页文件放在同一个文件夹下）。第二个参数是回调函数，即回调函数。也就是说通过get方法请求这个xml文件的内容，然后通过这个回调函数来操作里面的数据。 Callback的参数d代表从xml回调的所有数据。有了这个参数d，我们就可以进行下面的内容了。
第4行：通过JavaScript在文档正文中动态添加标签4a249f0d628e2318394fd9b75b4636b1。这是页面的整体标题，并不重要；
第5行：同样在body中动态添加一个标签5c69336ffbc20d23018e48b396cdd57a，该标签用作包含循环下的内容容器。 （将在第20行使用）
第7行：这一行很重要，因为我们已经说过回调函数的参数d代表从xml回调的所有数据。现在我们需要对数据进行处理（过滤）和格式化；请注意：这里通过搜索book标签，然后循环执行每个后面的函数，直到xml中的数据条目完全循环； （有点像PHP中foreach函数的功能）
第 9 行：$(this) 实际上创建了一个对象。目的是实例化d当前的图书信息对象，方便操作。这是 $book；
第10行--第12行：分别获取当前对象$book的书名、描述和缩略图； （注意获取属性值和节点值的语法是不同的）
第14行-第18行：格式化图书信息以供输出；
第20行：以html输出方式将格式化信息输出到文档中。
第 22 行：为了告诉用户我们当前的信息正在从 xml 中读取，图像在 2000 毫秒（2 秒）后消失。
步骤3：至此，你就完成了。欢迎大家给我留言讨论jquery的发展以及遇到的问题。请随时给我建议。另外，请在Web环境（iis或虚拟主机）中运行下载的文件夹。请不要点击直接运行。
phper