4.3.3 用jQuery获取动态数据

4.3.3 用jQuery获取动态数据

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.3  用jQuery获取动态数据

在上一节中，我们介绍了jQuery的load()方法，它可以非常轻松地执行获取HTML片段并把它加载到一个DOM元素中的任务。虽然这个方法非常好用，但是有时我们却想要获得对Ajax请求过程的更多控制权，或者想从服务器获得数据（而不是预格式化好的HTML）。

在本节中，我们将探索jQuery在Ajax领域提供的更多的东西。

1．问题

我们希望扩展之前的代码，使它从页面初始化的异步请求中获得电子冰箱内的食物列表。

2．解决方案

回顾下上一个解决方案，可以发现为了动态地加载选择框的选项，我们需要做的修改就是从

元素中移除元素，并且在ready()句柄中增加代码来获取并加载这些食物。但是，在着手之前，我们先来修改编写showItemInfo()处理函数的方式，这样可以来找个借口继续探索jQuery的性能。除了使用jQuery封装器的load()的方法，这次我们将使用jQuery的另外一个有用的函数：$.get(); 不过，先等一下。那个函数里面的句点在这里是干嘛用的？这不像是我们一直在用的$()封装器。事实上，jQuery不仅仅提供了我们一直用着很不错的那个封装器类，而且还提供了大量实用的方法，许多是作为$封装器类的类方法实现的。假如$.functionName()这样的符号看上去很怪，那么可以想象不使用$别名的表达式：

好，这样看起来就比较熟悉了。$.get()函数是作为一个类方法定义的，也就是jQuery封装器函数的一个函数属性（如果类方法的概念还是让你很头痛，那么最好能回顾一下3.1.3节）。

虽然，我们知道了它们是作为jQuery封装器类的类方法，但是jQuery却把这些方法定义为实用的函数，并且还让它们同jQuery的术语保持一致。这就是我们将要在本节中应用它们的方式。

$.get()函数接受的参数和load()方法一样：请求的URL，一个请求参数的hash，以及一个在请求完成后执行的回调函数。在使用这个函数时，因为并没有封装的对象来自动地把响应填入其中，所以最好是明确指定可选参数的回调函数。这是在请求完成后处理事务的主要手段。

还必须注意的是，如果没有传递请求参数，还可以指定回调函数作为函数的第二个参数。

在内部，jQuery用了一些JavaScript的技巧来保证取得的是正确参数。

下面是用这个实用的函数重写的showItemInfo()：

除了使用$.get()函数外，对之前的代码所做的另一个修改是增加了一个回调函数作为第三个参数。我们可以用它来把返回的HTML插入到itemData元素中。

于是，我们用另外两个封装器方法：empty()，它用来清除封装的DOM元素；append()，它用来给封装的元素增加用data参数传递给回调函数的HTML片段。

现在，我们已经准备好要在文档加载后给填入从服务器获得的数据。这里，我们将采用JavaScript hash对象的格式，从服务器获得原始数据。虽然我们可以返回XML数据，但是为了使JavaScript代码便于处理，将采用JSON。

jQuery再次用一个实用的函数帮了我们的大忙，它非常适合这次的任务：$.getJSON()。这个函数接受已经非常熟悉的三个参数：一个URL，一个请求参数的hash，以及一个回调函数。

用$.getJSON()所带来的优势是，回调函数调用时将获得已经执行过的JSON结构体。我们不再需要去对返回的响应做任何的执行。多么方便啊！

用这个实用的方法，需要在文档的ready()句柄中加入下面这一行：

一个fetchItemList.jsp的JSP页面被作为URL，并且提供了loadItems()（接下去会看到它的定义）函数作为回调。注意，因为我们不需要传递任何请求参数，所以就可以简单地忽略对象hash，并提供回调函数，把它作为第二个参数。

LoadItems()函数定义如下：

回忆一下，$.getJSON()函数在调用回调函数时，将传递已经执行过的JSON响应 。在这个解决方案中，fetchItemList.jsp返回的响应包括：

当调用回调函数时，请求字符串已经被转换成一个JavaScript对象数组，其中每个对象都包含了一个id和一个name属性。每个对象还将被用来构造一个新的元素，并用一种熟悉的方式把它加入到select控件中 ，这在4.2.1节的解决方案中已经出现过。

为了给

元素增加选项，我们需要这个控件DOM元素的引用。我们可以用document. getElementById()或$()，但是，我们还是选择了jQuery的方式，即get()封装器方法：

当没有传递任何参数时，这个方法将返回所有匹配CSS选择器的元素数组。如果，只想要其中的一个，那么就可以指定一个从0开始的索引作为参数。这里，因为使用了一个id，所以就知道只有一个单独匹配符合这个选择器，因此，就指定0号索引来返回第一个匹配的元素。

 

代码清单4-7列出了整个页面的代码，其中对上个解决方案进行修改的地方够用高亮显示了出来。

 

代码清单4-7  用jQuery来获得更多晚餐的食物

3．讨论

 

这一节，让我们领略了jQuery在DOM操作和遍历以及Ajax请求领域上更多出色的性能。我们了解了jQuery的$.get()函数，它使得我们能够轻松地用HTTP GET方法来发送Ajax请求。另一个有着同样函数签名的$.post()通信函数，可以同样轻松地通过Ajax提交POST请求。因为两个函数都使用同样的参数签名--清晰的请求参数hash。这样，就可以简单地在我们喜欢的任何一种HTTP方法之间进行切换，不必为请求参数应该如何编码的细节而烦恼。

 

另外一个Ajax实用函数$.getJSON()可以让我们极其轻松地使用服务器端格式化并返回的JSON符号。在调用这个操作的回调函数时，JSON字符串已经被执行过了，这就让我们能够从处理JavaScript eval()函数的不可知行为中解脱出来。

 

在我们希望能够获得更多控制权且能够清楚Ajax请求的情况下，jQuery提供了一个叫做$.ajax()的通用实用函数。在线文档对如何使用底层的实用函数提供了更多细节。

 

我们还看到了一些强大的DOM操作封装器方法，比如get()，empty()，val()以及append()，这些都让作为Ajax网页开发者的我们能够轻松地操作页面的DOM。

 

在这里，几乎不可能完整展现jQuery性能的深度。例如，比如无法探索effects的API，它提供了fading、sliding、flashing、hovering等众多特效。甚至拥有自己提供动画的能力。我们鼓励你访问 http://jquery.com/来获得jQuery的更多信息，以及获知它是如何帮助编写强大的Ajax应用的。

 

此外，高级的开发者可能会对jQuery的插件程序API感兴趣。这个API是jQuery众多强大性能中的一个，因为它可以让任何人都可以立刻扩展这个工具集。更多信息请详见 http://docs.jquery. com/Plugins/Authoring。

 

现在，有些事物已经完全不同了。让我们开始研究第四个框架，它将用一种全新的角度来处理异步请求的问题。