4.3.2 用jQuery进行异步加载(1)

4.3.2 用jQuery进行异步加载(1)

2008-09-28 16:09 (英)格雷恩(Granc,D.)等著/贺师俊等译 人民邮电出版社 我要评论(0) 字号: T | T

综合评级:

想读(1)  在读(1)  已读(8)   品书斋鉴(0)   已有10人发表书评

一键收藏,随时查看,分享好友!

《Ajax实战:实例详解》第4章Ajax开源工具集,讨论支持Ajax的JavaScript库并进一步讲解Prototype、Dojo工具箱、jQuery和DWR库,另外特别介绍了它们给Ajax带来的变化。本小节为大家介绍的是用jQuery进行异步加载。

AD: 2013大数据全球技术峰会低价抢票中


4.3.2  用jQuery进行异步加载(1)

jQuery提供了不少方法来发送Ajax请求。有些是简单且实用的高层方法,用于初始化Ajax请求,并执行大多数一般的请求任务。其他一些方法是底层的,它们提供了对Ajax请求各方面的控制。

在本节的解决方案中,我们将使用具有代表性的一些方法。首先来处理最普遍的Ajax交互:从服务器获得动态内容。

1.问题

让我们来想象一个电子冰箱--一个假想的高科技电冰箱,它不仅可以保存食品,而且还提供一个网络接口能够让软件用来与其通信和交互。

电子冰箱用来记录其存货的虚拟技术并不重要。它可以是条形码扫描,RFID(无线电频率识别)标签,或者是其他虚构的技术。作为网页的作者,关心的是拥有一个服务器组件,能够让我们发出请求来获得食物状态的信息。

网页的焦点将是呈现电子冰箱中的食物列表。通过点击列表中的某一个食物,可以显示出更加详细的信息。

针对这个问题,我们将假设网页已经预先载入了食物的列表,它是通过某一种服务器端模板机制生成的。在下一节中,我们将看到一种从服务器动态获取列表的技术。

2.解决方案

一开始,为了在页面中使用jQuery,就必须导入jQuery库:

 
假设已经由服务器端机制生成了电子冰箱内的食物,并在一个select元素中陈列出来:
 

为了达到本示例的目的,我们仅列出8个食物。一般的冰箱通常会包含更多的食物,但是,我们都知道速食主义者的冰箱内的食物总是很稀少的。

服务器(或许可以叫做"电子冰箱驱动")分配给食物一个标识号,它被用来唯一标识每个食物。在这里,简单地用一个连续整型值。这个标识值将被设置为每个<options>的value,用来标明食物。

虽然我们知道需要select控件对用户的输入做出反应,但可以注意到,在创建<select>元素标记中并没有声明任何处理函数。这就需要提出jQuery设计背后的另一个体系。

jQuery的一个目标是让网页作者能够轻松地把脚本从文档标记中分离出来,这和CSS允许我们把表现从文档标记中分离出来的方法很像。诚然,我们可以不用jQuery来做到这些事,毕竟jQuery是用JavaScript编写的,而且不是所有无法做到的事它都去帮我们做了。但是,它还是为我们做了不少事,并且以轻松地从文档标记中分离脚本为目标来设计。所以,与其直接在<select>元素标记上增加一个onchange事件处理,还不如用借助jQuery的帮助,在脚本控制下增加这个事件处理。

在文档就绪前,我们无法操作页面上的DOM元素,所以在页面首部的<script>元素中,我们将用一个之前讨论过的jQuery ready()处理函数。在这个处理函数内,我们将用jQuery的方法来给元素增加一个change事件处理。请看下面的代码片段:

 

在ready()处理函数内,我们通过传递itemsControl这个id创建了一个封装了<select>元素的jQuery实例。之后,用了jQuery的change()方法,它把自己的参数分配给封装的元素,作为它的change事件处理。

这里,我们已经声明了一个showItemInfo()函数。其中,我们将为列表中选中的食物创建Ajax请求。

4.3.2 用jQuery进行异步加载(1)_第1张图片 
jQuery提供大量不同的方法来向服务器发送Ajax请求。这个解决方案的目的是希望从服务器得到一个预先格式化好的HTML片段(包含了食物的数据)。并且把它加载到一个元素中,即一个id是itemData的<div>元素。jQuery的load() 方法可以完美地达到这个要求。

你可能感兴趣的:(4.3.2 用jQuery进行异步加载(1))