通过 JQuery框架 为 空白HTML文档 加载
在开始之前我们需要做如下准备工作:
1.创建一个名为DEMO.html空白html文件;(推荐使用Editplus 3创建)
2.熟悉JQuery框架的基本语法;(不熟悉没关系,后面我会注释得很详细)
3.创建一个名为data.xml的XML文件用来存储数据,XML的结构下面会涉及到,你也可以下载我打包好的文件查看;
4.一个loading.gif图片,这个图片用于在将XML读取出来的等待时间里面显示在空白html文档中。
从 XML文件读取 的数据。我们将会主要用到JQuery自带函数 $.get 。
正式开始:/www.huyang8.com
Step 1: 首先 让我们看看这个data.xml的简单结构,我这里演示的数据是"Saturn为您推荐的几本书",故为书籍信息,那么xml就包括书籍的名称,缩略图和书籍描述信息;
<?
xml version="1.0" encoding="utf-8"
?>
< books > < book title ="藏地密码" imageurl ="images/Tibet_Code.jpg" > < description > 这里是概况(www.huyang8.com) </ description > </ book > < book title ="剑桥雅思6" imageurl ="images/ielts.jpg" > < description > 这里是概况(www.huyang8.com) </ description > </ book > < book title ="Professional ASP.NET" imageurl ="images/asp.jpg" > < description > 这里是概况(www.huyang8.com) </ description > </ book > </ books > |
$(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 ); } ); } ); ); |
- 行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或虚拟主机),请不要直接点开运行。
下面介绍一下正确用jQuery的AJAX加载XML并解析
1,Content-Type
很多时候无法解析就是Content-Type的问题。(呵呵,我第一次做ajax的时候,就遇到这个问题.)
一定要将其设置为text/xml,否则默认就是text/html也就是普通的文本了。
常见语言的Content-Type设置
response.ContentType = " text/xml " // asp
response.setHeader( " ContentType " , " text/xml " ); // jsp (我上次这没写,结果返回 是一个 "" )
2,xml结构。
XML一定要封闭的,很重要! (这个我一般不会范,我还是算比较细心的.)
例:
错误的XML
< name > zhangsan </ name >
< id > 1 </ id >
< name > lisi </ name >
< id > 2 </ id >
正确的
< stulist >
< student mailto:1@1.com" target =_blank>1@1.com">
<name > zhangsan </ name >
< id > 1 </ id >
</ student >
< student mailto:2@2.com" target =_blank>2@2.com">
<name > lisi </ name >
< id > 2 </ id >
</ student >
</ stulist >
3,解析
遍历student(这里还是用上面那个XML,子节点是student)
url: ' ajax.jsp ' ,
type: ' GET ' ,
dataType: ' xml ' ,
timeout: 1000 ,
error: function (xml) ... {
alert( ' Error loading XML document ' + xml);
} ,
success: function (xml) ... {
$(xml).find( " student " ).each( function (i) ... {
var id = $( this ).children( " id " ); // 取对象
var id_value = $( this ).children( " id " ).text(); // 取文本 或者 $("id" , xml).text();
alert(id_value); // 这里就是ID的值了。
alert($( this ).attr( " email " )); // 这里能显示student下的email属性。
$( ' <li></li> ' ).html(id_value).appendTo( ' ol ' );
}
} );