繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery读取XML文件数据并显示的实现代码
- Javascript
- 一个简单的收缩菜单效果
- HTML-CSS群中单选引发的“事件”
- 打开超链需要“确认”对话框的方法
- 用js实现网页上模仿桌面右键菜单
- 可以文本显示的公告栏的js代码
- [原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
- 极致之美：百行代码实现全新智能语言
- 表单(FORM)的一些实用效果代码
- [原创]提供复制本站内容时出现,该文章转自等字样的js代码
- javascript中巧用“闭包”实现程序的暂停执行功能
- 给网站上的广告“加速”显示的方法
- [原创]jser必看的破解javascript各种加密的反向思维方法
- 用javascript代替marquee的滚动字幕效果代码
- 静态页面下用javascript操作ACCESS数据库(读增改删)的代码
- [原创]由亿起发(eqifa.com)的页面发现顶部的http://16a.us/8.js想到的js解密
- [原创]站长必须要知道的javascript广告代码
- js defineSetter -给js的 "class"自动增加一个set的属性(方法)
- Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例
- WordPress 插件：CoolCode使用方法与下载
- 文档处理系列：随时更新
Javascript 中的 JQuery读取XML文件数据并显示的实现代码
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 141 ::
收藏到网摘: n/a
今天向大家演示如何通过JQuery框架为空白HTML文档加载从XML文件读取的数据并显示出来。我们将会主要用到JQuery自带过程$.get 。 准备工作
在开始之前我们需要做如下准备工作：
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.ruanchen.com)
</description>
</book>
<book title="剑桥雅思6" imageurl="images/ielts.jpg">
<description>
这里是概况(www.ruanchen.com)
</description>
</book>
<book title="Professional ASP.NET" imageurl="images/asp.jpg">
<description>
这里是概况(www.ruanchen.com)
</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="' + 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);
});
});
});
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或虚拟主机），请不要直接点开运行。
代码打包下载
评论 (0) All
