JQuery读取XML文件数据并显示

xml代码：

 

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

 

 

Jquery代码：

 

  $(document).ready(function() { $.get('XMLFile.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="' + imageurl + '" mce_src="' + imageurl + '" /> </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); }); }); });

 

 代码原理与运行流程介绍：

 

 

 行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秒）后，图片逐渐消失。

 

 转载地址：http://www.code52.net/page/JS/js200809_22_20.html