基于jQuery和Ajax构建富Internet应用程序

    最近JQuery人气急升，现已成为 Web 开发人员首选的 JavaScript 库。与此同时，人们对富 Internet 应用程序（Rich Internet Application，RIA）（什么是富Internet应用程序？）的应用和需求也在迅速增长，并期待用基于浏览器的应用程序代替桌面应用程序。无论是电子表格，还是薪水册和电子邮件应用程序，现在都在浏览器中再现了类似于桌面的体验。随着这些应用程序数量的增多和功能的日益复杂，JavaScript 库将会变得越来越重要，因为它是构建这些应用程序的坚实基础。JQuery 无疑成为了开发人员最佳选择。本系列文章深入探索了 jQuery，并提供了坚实的基础。开发人员借助这个基础就可以快速轻松地构建自己的 RIA。

    在本系列中，您了解了用来构建 RIA 以及为页面添加交互性的三个基本组件。第一个模块是 Event 模块，借助此模块，能捕获用户对页面的任意交互并以编程的方式进行响应。比如，您可以向按钮点击、鼠标移动等事件附加代码。下一个模块是 Attributes 模块，它解释了如何在页面元素上获得/设置值，以及如何将其作为带有变量的数据对象。这些值包含了决定为用户提供何种响应的大部分信息。最后，您还看到了 如何进行 CSS 处理，以及如何在不重新加载页面的情况下更改页面上任意元素的布局、颜色、字体等。了解这三个模块之后，就等于掌握了交互 Web 页面的三个基本元素 — 获取用户交互（Event）、收集信息（Attribute）以及在事件和信息基础上提供反馈（CSS）。

    在本文中，将对交互 Web 页面的这三个基本元素进行更进一步的探究，提供当今高级 Web 应用程序必备的 “酷” 效果和特征。这些附加的模块对提供 RIA 而言并不是至关重要的，但这些效果和特征会给用户留下深刻印象，并且还会极大地扩展 RIA 的可用范围和特性。您将看到的第一个模块是 Effects 模块，它包含很多特性，比如隐藏元素、随处移动元素、淡入淡出元素等。换言之，这些都是让 Web 页酷起来的 “亮点”。最后一个要讨论的模块是 Asynchronous JavaScript + XML (Ajax) 模块。大多数人都将该模块等同为 RIA。Ajax 让 Web 应用程序无需重载页面就能与服务器进行交互、向服务器传递信息并从中获取信息（与 Web 上的一些意见相反，Ajax不单纯是一个很酷的 JavaScript 动画工具）。您将发现 jQuery 提供了极其简单易用的 Ajax 工具。实际上，jQuery 使 Ajax 的使用与调用其他 JavaScript 方法一样简单。

    本文中的示例应用程序是个总结，展示了 Effects 和 Ajax 模块如何融入到这个示例 Web 邮件应用程序中。我将向这个示例程序添加一些效果使其更加漂亮，而且更重要的一点是，我将添加一些 Ajax 代码，以便无需重载页面邮件应用程序就能显示信息。

    Effects 模块

    从其名字往往容易得出这样的结论，Effects 模块只包含一些动画和效果，而这些动画和效果往往是一些 “正规” 的 Web 页面所竭力避免的。但实际情况并非如此。几乎所有的应用程序都会遇到这样的情况，即某个页面元素需要隐藏或其视图应该根据另一个页面元素的状态进行切换。这类更改对于一个 RIA 而言非常重要，因为它们让您能够加载某个页面的所有页面元素，然后通过隐藏/显示特定的元素只显示所需的信息。重载页面的方式并不可取。比如一个具有两个选项的组合框，一个选项是隐藏 div，一个选项是显示此 div。很显然，与更改组合框并重载页面隐藏/显示 div 相比，用客户端代码隐藏/显示此 div 更简单和高效。而仅隐藏/显示还是要让它淡入/淡出，则完全取决于您。

    如上所述，最基本的效果函数是show()和hide()函数。这非常直观；它们可分别用来显示和隐藏页面上的某个元素。

    清单 1. 隐藏和显示函数

// shows every <p> on the page
$("p").show();

// hides every <p> on the page
$("p").hide();

// hides every other <p> on the page
$("p:odd").hide();
   

    除了这些基本操作，利用show()和hide()这两个函数，还能更多地控制页面元素如何显示和隐藏。相关文档将hide()描述为 “优美” 的显示/隐藏，对于show()，就是综合淡入和滑出的效果。

    在开始深入探讨一些例子之前，不妨回过头来看看传递给这些效果函数的参数。每个函数（除了通用的show()和hide()函数之外）都允许在效果完成时传入要调用的速度和函数。速度用来控制效果出现的快慢。这个参数可以是一个"slow"、"fast"或"normal"字符串。此外，如果需要精确控制动画时间，那就需要用参数指定毫秒数。Effects 函数的第二个参数本身就是一个函数，此函数在效果完成后调用。如果想要将几个效果组合成一个较大规模的效果，这一点将非常重要，因为利用它，能够可靠地控制一个效果何时完成，下一个效果何时开始。

    清单 2. 复合效果

// the img with an ID of "picture" should start hidden
// when the "showPicture" button is pressed, show the img with an ID of "picture"
// and animate it, so it appears quickly in a fade In and slide out, and when
// it's done being shown, show the caption of the picture, which is
// always in the span right after the <img> tag

<input type="button" id="showPicture">

<img src="/pic.jpg" id="picture"><span>This is the picture's caption</span>

// jQuery code inside the document.ready() function

$("#picture").hide().next().hide();
$("#showPicture").click(function(){
  $("#picture").show("fast", function(){
      $("#picture").next().show();
  });
});

// notice how it took more text to describe what you want to happen than it took
// to actually code it!
   

    Effects 模块还有其他一些函数，它们与show()和hide()非常类似，并且最终所实现的功能也基本相同；只不过实现的方式不同。slideDown()和slideUp()函数分别用来显示和隐藏一个页面元素。不过，这是通过将该元素滑下或滑上的动画效果实现的（从其名称中不难看出这一点）。与我刚刚提到的增强了的hide()和show()函数类似，您也可以控制滑动的速度以及在效果完成时要调用的函数。此外，要显示/隐藏页面元素还有另一种选择，即fadeIn()和fadeOut()函数，正如其名字所示，这两个函数用来淡入页面元素直至该元素透明，然后使该元素消失。它们允许在效果完成时定制速度和要调用的函数。

    有一个很有趣的函数，它可部分隐藏和显示页面元素，此函数是fadeTo()，它能让页面元素部分透明。我认为此函数对 RIA 很重要，因为透明性是突出页面上某个元素的一种很好的方式，并可用来显示页面的禁用区域。例如，页面上有几个选项卡，可以让所有未被选中的选项卡呈现一些透明性来突出其未被选中。或者，在一个页面表单上，可以让所有没有焦点的元素呈现一些透明性以向用户突出哪个Form元素当前具有焦点。此外，透明性本身就很酷。在进行设计时，不妨遵循这样一条通用的箴言 “如果苹果公司这么设计，效果一定很酷”。