4.3.2 用jQuery进行异步加载（2）

最新推荐文章于 2025-07-23 16:24:15 发布

转载最新推荐文章于 2025-07-23 16:24:15 发布 · 757 阅读

93 篇文章

订阅专栏

本文介绍了使用jQuery的load()方法实现异步加载的过程。通过一个具体案例，详细展示了如何利用CSS选择器定位DOM元素，以及如何发送Ajax请求并处理响应数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

综合评级：

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

4.3.2 用jQuery进行异步加载（2）

这个方法将从由第一个参数提供的URL处取得一个响应，并且把它插入到封装的DOM元素内。这个函数的第二个参数允许我们传递一个对象，它的属性将作为请求的参数。第三个参数可以用来指定一个在请求完成后执行的回调函数。

首先，我们封装一个DOM元素，它通过CSS选择器div#itemData来定位，是一个用于把加载的食物数据放入其中的空<div>元素。之后，用load()方法，提供一个JSP页面的URL ，它将获取由itemId请求参数指定的食物数据，这个参数是方法的第二个参数提供的。

那个参数的值必须是用于在<select>元素中用户点击的那个option的值。因为<select>元素被设置为chanage句柄的函数上下文，所以可以通过this引用来访问它。我们封装这个引用，并用jQuery的val()方法来获得当前被选中的控件的值。

因为我想要做的就只是给DOM中加载食物数据，所以我们并不需要一个回调函数，省略了load()方法的第三个参数。

这就是全部了。

jQuery拥有许多常用的过程，它们实现了大量的代码，并且允许我们用很少的几行代码来执行它们。这个处理函数调用的JSP页面用了itemId请求参数的值来获取相应食物的信息，并把它格式成HTML显示在页面上。

图4-5展示了在选择电冰箱内的食物后显示的完成页面。其源代码在清单4-6中完整地列了出来。

图4-5 要牛奶吗

代码清单4-6 用jQuery来决定晚饭吃什么

3．讨论

本节为我们介绍了jQuery执行Ajax请求的方法，即load()方法。

jQuery的load()方法，非常适合用来让诸如JSP和PHP这种服务器端的模板语言格式化一小段数据，并把HTML作为响应返回。fetchItemData.jsp文件，以及仿造电子冰箱功能的Java类，可以在本章供下载的源代码中找到。

其他一些重要的jQuery特性，也在这个解决方案中表露出来。例如，我们用了一个ready()句柄来触发代码的执行，这些代码必须在用户能够和页面交互前但在整个DOM构建完成后执行。

我们还看到了val()方法，它返回一个封装的input元素的值。如果有多于一个元素被封装，那么这个方法将返回第一个匹配的元素的值。

在这个解决方案中，我们假设电子冰箱的原始列表是由任何一种服务器端语言通过生成页面而给出，比如，一个JSP模板。这是Web应用的一种普遍做法，但是，为了探索jQuery的Ajax能力，在下一个问题中，就需要在页面加载中动态获取那个列表。