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请求。

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