jQuery、Ajax、工具提示和lightbox的使用实例教程

本文将逐步引导您使用 Ajax 技术改进一个 Web 1.0 购物站点。您可以下载改进 “之前” 和 “之后”的示例应用程序源代码，也可以在作者的 Web 服务器上看到运行的两个版本。除了 Ajax 技术和最佳实践之外，您还将了解到 Ajax如何通过 渐进增强 原理改善用户体验。

本文假设您已经牢固掌握 HTML 和 CSS，基本了解 JavaScript 和 Ajax编程技术。示例应用程序仅使用客户端代码构建；本文演示的技术适用于任何服务器端应用程序框架。要运行示例站点，至少需要一个在本地主机上运行的基本Web 服务器。此外，您也可以仅跟随源代码在我的 Web 服务器上查看运行中的示例站点。

回页首

本系列的 第 1 部分 介绍了示例应用程序 Customize Me Now，并开始将它从 Web 1.0 版本改造成受Ajax 支持的 Web 2.0 版本。该部分从业务和可用性方面讨论了这样做的必要性。此外，也定义了 渐进增强 并介绍了渐进增强原理如何改进用户体验。它还帮助您设置了几个开源工具：jQuery JavaScript 框架和几个插件，包括ThickBox、jQuery Forms、jTip 和 GreyBox。使用 ThickBox 和 jQuery Forms可以流线化用户流，将导航弯路转变成了模式对话框。但这仅仅是改进的一部分。现在，您可以使用 jTip 和 GreyBox进一步优化站点。全部完成后，查看示例应用程序改进“之前”和“之后”的版本并回顾改进的过程。

现在已经回顾了第 1 部分中的模式对象的实现，接下来将通过 jTip 把所有弹出窗口转换成工具提示以优化导航。就像ThickBox 一样，jTip 很容易实现。对于每一个想要转换的链接，只需添加如下属性：

“jTip”的 class 属性。这个神奇的词语会警告 jTip 的 Document Object Model(DOM)-解析例程应该把此链接转换成工具提示。即使此链接元素已经具有 class属性，也可以简单地将“jTip”添加为额外的类。

针对每个链接，id 属性具有惟一的值，以便 jTip 能够获得该链接的对象引用。id 的值是什么并不重要，只要存在即可。

name 属性，jTip使用它在工具提示内呈现标题。同样，只要属性存在，它的值是什么并不重要。如果不想让标题出现，只需将值设置为空字符串。

将这些属性添加到标记之后，每个弹出链接如清单 1 所示：

同样，通过浏览器查看 Customize Me Now 2.0 的搜索结果页面并单击厂商站点的链接可以看到 GreyBox的运行效果。如图 2 所示：

至此，全部操作完毕。但这次 Ajax 改造是如何更改 Customize Me Now 的，又获得什么益处呢？

要理解这些更改的益处，请看图 3，它是最初的 1.0 版本的站点地图：

现在请参看图 4，这是修改后的 2.0版本的站点地图。现在导航路径提供了一条由搜索到购买的直线。站点所有者使用这种典型的通风管式的范例来增加转换，同时使用户更加容易理解站点的过程。您仍然能访问相同的信息，但是现在额外的数据可以在过程中弹出，而不需要用户离开上下文环境。

您已经设法增强了应用程序，同时也不因为 JavaScript Luddites而破坏应用程序。要查看改进的效果，只需禁用浏览器中的 JavaScript 执行，然后与 2.0 站点进行交互。该站点的运作与Customize Me Now 1.0 十分相似。除了某些链接看起来有些不同外，它的运作是一样的。

Customize Me Now 的 1.0 版和 2.0版之间已经有了很大的改变。但这个应用程序还有很多可以改进之处。

您可能已经注意到工具提示和模式对话框并不是真正的传统 Ajax 调用。您所加载的是完整的 HTML 文档，而典型的 Ajax功能加载的是小块的 XHTML、XML 或 JavaScript Serialized Object Notation(JSON)。ThickBox 和 jTip 都支持 Ajax 这种更为常用的格式。但加载完整的文档可以在每个页面的 Ajax版本和非 Ajax 版本上使用相同的 URL。为了达到渐进增强的目标，这是最简单方式。对于传统的Ajax，则必须更改服务器端的模板框架。此外，还必须编写定制 JavaScript 代码来向 URL追加呈现逻辑以便服务器能够返回页面的全部或只返回页面的内容。借助jQuery，所需编写的代码不会很多。但针对客户端演示而言，这是没有必要的。

本演示中并没有涉及 Ajax 开发在安全性方面的问题。Web应用程序安全性本身就是一个很广泛的主题，超出了本文的讨论范围。在某个意义上，由于只侧重于客户端代码，本例省略了安全性。很多安全性措施都必须在服务器上实现。这也就是说，处于各技术级的开发人员都必须为整个应用程序的安全性负起自己应付的责任。前端的开发人员也不例外，因为很多恶意的黑客攻击都是通过利用JavaScript 代码、CSS 和标记内的漏洞得逞的。有关此主题的更多信息，请参见