使用 jQuery，第 3 部分: 用 jQuery 和 Ajax 构建富 Internet 应用程序
效果和 Ajax（转载自）
?<script type="text/javascript"></script>??
<noscript></noscript><script type="text/javascript"></script>??<noscript></noscript>
样例代码
英文原文
<!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- this content will be automatically generated across all content areas --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->jQuery 是一种 JavaScript 库，它是开发人员简化动态富 Internet 应用程序的创建过程的最佳选择。随着基于浏览器的应用程序不断代替桌面应用程序，这些库的使用将越来越广泛。您将通过本系列文章中了解 jQuery，并学习如何在 Web 应用程序项目中实现 jQuery。
<!--START RESERVED FOR FUTURE USE INCLUDE FILES--><!-- include java script once we verify teams wants to use this and it will work on dbcs and cyrillic characters --><!--END RESERVED FOR FUTURE USE INCLUDE FILES-->Effects 模块还有其他一些函数，它们与 show() 和 hide() 非常类似，并且最终所实现的功能也基本相同；只不过实现的方式不同。slideDown() 和 slideUp() 函数分别用来显示和隐藏一个页面元素。不过，这是通过将该元素滑下或滑上的动画效果实现的（从其名称中不难看出这一点）。与我刚刚提到的增强了的 hide() 和 show() 函数类似，您也可以控制滑动的速度以及在效果完成时要调用的函数。此外，要显示/隐藏页面元素还有另一种选择，即 fadeIn() 和 fadeOut() 函数，正如其名字所示，这两个函数用来淡入页面元素直至该元素透明，然后使该元素消失。它们允许在效果完成时定制速度和要调用的函数。
有一个很有趣的函数，它可部分隐藏和显示页面元素，此函数是 fadeTo()，它能让页面元素部分透明。我认为此函数对 RIA 很重要，因为透明性是突出页面上某个元素的一种很好的方式，并可用来显示页面的禁用区域。例如，页面上有几个选项卡，可以让所有未被选中的选项卡呈现一些透明性来突出其未被选中。或者，在一个页面表单上，可以让所有没有焦点的元素呈现一些透明性以向用户突出哪个 Form 元素当前具有焦点。此外，透明性本身就很酷。在进行设计时，不妨遵循这样一条通用的箴言 “如果苹果公司这么设计，效果一定很酷”。
fadeTo() 增添很酷的效果我想花些时间讲述的另一个 Ajax 函数是 load()，它允许用户加载一个特定的页面并获取 HTML 作为结果。从这样的描述看起来，它并不那么吸引人。事实上，与在启动时解析 Web 页一样，您还需要解析使用 jQuery 代码返回的信息。这是什么意思呢？简单来说，如果能加载任何 Web 页面，继而又能用 jQuery 对之进行解析，也就实现了一个非常高效且易于编程的页面 scraper，借助这个 scraper，可以从所有页面搜集各类信息。让我们详细看看。
load() 函数的示例应用程序接下来我要介绍的 Ajax 模块的最后两个函数是两个真正的实用函数，它们非常有助于 Ajax 的使用。正如我已经多次指出的，客户机和服务器间的很多交互都会涉及到表单以及其中所包含的元素。由于这类通信很常见，所以在 jQuery 内已经有两个实用函数可用来协助构造传递给服务器的参数，参数可以是 HTTP 查询字符串的格式也可以是 JSON 字符串格式。可以使用这两个实用函数来为您的 Ajax 需求提供帮助。这两个函数的使用很方便，因为这二者均能封装整个表单，而不管在开发期间有多少元素被添加/删除/更改。清单 9 给出了这样一个例子。
serialize() 和 serializeArray() 函数在第 2 个示例中，看一看如何读消息，这展示了如何在 jQuery 中使用 Ajax：
// You've seen most of this code previously in the example from last article, so let's// focus on the Ajax portion of the code.// Note 1 - I make an Ajax call with all 4 arguments defined. I have to pass two// variables to the server in order to read the message. The first is the message// ID number, because I need to know which message I want to read. The second is// the current view...for reasons I can't recall (not important really).// Note 2 - The fourth argument into the Ajax function is "json", indicating that// I expect a JSON object back from the Ajax call. jQuery will automatically// convert the response String into a JSON object.// Note 3 - Notice that I handle the JSON object directly, without using an// eval() function, because jQuery has already created the object. I can// reference its fields directly.$(".messageRow").dblclick(function() { if ($(this).hasClass("mail_unread")) { $(this).removeClass("mail_unread"); } $.post("<%=HtmlServlet.READ_MESSAGE%>.do", {messageId: $(this).attr("id"), view: "<%=view %>"}, function(data){ if (data != "ERROR") { // using JSON objects $("#subject").val(data.subject); $("#message").val(data.message); $("#from").val(data.from); } }, "json"); $.blockUI(readMess, {width:'540px', height:'300px'}); });结束语
随着应用程序不断从桌面向浏览器转移，像 jQuery 这样的 JavaScript 库的将越来越重要。应用程序越来越复杂，这就使跨浏览器的 jQuery 成为所有 Web 应用项目的必要工具。由于易于使用和功能完备，jQuery 逐渐从其他 JavaScript 库中脱颖而出，成为很多开发人员的最佳选择。
通过这个 jQuery 系列的第三篇文章，您接触到了另外两个模块，利用它们能为应用程序真正添加丰富性，并进一步模糊桌面应用程序和 Web 应用程序间界限。本课程中功能最强大的一个模块是 Ajax 模块，该模块能极大地简化 Ajax 的使用，使用它与进行其他 jQuery 方法调用一样简单直观。您还通过几个例子进一步领略了 Ajax 的强大功能并知道了 Ajax 是个很酷的工具，可在不重载页面和延迟的情况下加快应用程序的响应速度。此外，您了解了 Effects 包。并且知道，如果正确使用动画和隐藏/显示页面元素，将能大大增强 UI 设计。不仅如此，若能有效地综合使用，Ajax 和 Effects 还能极大地增加 Web 站点的动态性。
最后，您再次重温了这个示例 Web 应用程序，并体会了增加了 Ajax 模块后，您将能在无需重载页面的情况下读取和删除消息。然后您还看到了如何在 Web 应用程序中删除消息，并且通过综合 Ajax 和 Effects，还能从用户页面和 DB 删除消息，而这一切均无需重载此页面。对于用户而言，消息的删除是个透明的过程，而且您能通过编程实现此目的。
至此，与 JQuery 发布版一并提供的核心库相关的系列 JQuery 文章就结束了。这三篇文章为您一一展示了 jQuery 所包含的每个模块，让您看到了使用 jQuery 是多么容易和直观。此外，您还应该知道不管您所面对的是哪种 Web 应用程序，jQuery 应该都可以用来将其转变成任何类型的 RIA，因为 jQuery 是所有 JavaScript 需求的坚实基础。通过本系列文章对 jQuery 的介绍，您应该有信心在自己的代码中使用 jQuery。本系列的 第一篇文章 向您展示了 jQuery 是如何工作的，以及如何用它来搜索页面元素、循环遍历这些元素并像 Array 对象那样访问这些元素。本系列的 第二篇文章 向您介绍了对提供丰富性至关重要的三个模块。最后的这篇文章则给出了生成一个完整、复杂的 Web 应用程序所需的最后几个要素。