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


Posted in Javascript onDecember 16, 2009

准备工作

在开始之前我们需要做如下准备工作:

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> 
这里是概况(3water.com) 
</description> 
</book> <book title="剑桥雅思6" imageurl="images/ielts.jpg"> 
<description> 
这里是概况(3water.com) 
</description> 
</book> 
<book title="Professional ASP.NET" imageurl="images/asp.jpg"> 
<description> 
这里是概况(3water.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或虚拟主机),请不要直接点开运行。

代码打包下载

Javascript 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
Javascript基础知识(一)核心基础语法与事件模型
Sep 29 Javascript
jquery ui dialog替代confirm实例分析
Jan 25 Javascript
javascript函数自动执行常用方法汇总
Mar 28 Javascript
如何为你的JS项目添加智能提示与类型检查详解
Mar 12 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
javascript canvas时钟模拟器
Jul 13 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 #Javascript
jQuery 渐变下拉菜单
Dec 15 #Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 #Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 #Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 #Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 #Javascript
Javascript attachEvent传递参数的办法
Dec 14 #Javascript
You might like
PHP Warning: PHP Startup: Unable to load dynamic library \ D:/php5/ext/php_mysqli.dll\
2012/06/17 PHP
PHP写的获取各搜索蜘蛛爬行记录代码
2012/08/21 PHP
php处理单文件、多文件上传代码分享
2016/08/24 PHP
Yii2框架数据库简单的增删改查语法小结
2016/08/31 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
JavaScript代码实现微博批量取消关注功能
2021/02/05 Javascript
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
django 实现编写控制登录和访问权限控制的中间件方法
2019/01/15 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
2014年社会实践活动总结范文
2014/04/29 职场文书
暑假学习心得体会
2014/09/02 职场文书
病危通知书样本
2015/04/17 职场文书
2015毕业设计工作总结
2015/07/24 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js
virtualenv隔离Python环境的问题解析
2022/06/21 Python