Ajax改造，第4部分:用jQuery和Ajax表单改造现有站点

Ajax改造，第4部分:用jQuery和Ajax表单改造现有站点2010-06-30 IBM Brian J. DillardAjax 技术改变了大型商业 Web 应用程序的外观，但是许多较小的 Web 站点都不具备重新构建整个用户界面（UI）的资源。Ajax 的一些新特性能够解决实际中的界面问题并改善用户体验。通过本系列文章，您可以了解如何使用开源的客户端库让您的用户界面变得更为时尚。本文将展示如何使用 Ajax 技术将一个多步结帐过程从一系列表单转变成一个单一屏幕的界面。我们将采用渐进增强方法，从而确保所有用户代理仍然能够访问您的站点。

关于本文

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

本文假设您已经牢固掌握 HTML 和 CSS，基本了解 JavaScript 和 Ajax 编程技术。示例应用程序仅使用客户端代码构建；本文演示的技术适用于任何服务器端应用程序框架。对于所有 Ajax 应用程序，您都必须从 Web 服务器而不是从自己桌面上的文件运行示例代码。此外，您也可以仅跟随源代码在我的 Web 服务器上查看示例站点的运行效果。

回顾第 1 和第 2 部分

本系列的第 1 部分和第 2 部分介绍了示例应用程序 Customize Me Now，并开始将它从 Web 1.0 版本改造成受 Ajax 支持的 Web 2.0 版本。借助JavaScript 框架和其他的开源库，通过用模式对话框（modal dialog）、工具提示和 lightbox 分别替换弹出消息、离站链接和导航边栏，流线化了 Customize Me Now 的用户流。在第 3 部分，您进行了进一步的改进，将大块内容放到 Ajax/DHTML 选项卡内并用快捷的图像 carousel 替代了单击-等待式的图片页。

第 4 部分的目标

在本文中，您将学习如何将多页表单转变成 Ajax 选项卡来流线化复杂的过程。所使用的用例是示例购物网站的结帐过程。如果没有 Ajax，在潜在的客户看来，多页表单既冗长又让人头疼。进行 Ajax 改造后，即使是一个复杂的结帐过程也可以变得友好和易于操作 — 只要您在如何构造用户界面方面足够用心。电子商务站点并不是这些技术的惟一受益者。同样的原理可以应用于为了完成一个多步过程用户必须填写一系列相关表单的任何情况。

要理解本文中的这些概念，请参考 Customize Me Now 1.2（参见下载，它是对未进行 Ajax 改造的原始示例站点稍作修改后的版本。如果对 1.2 版再做更改，就会得到 Customize Me Now 2.2，它综合了在整个系列中所做的全部更改。）

电子商务结帐过程：Web 1.0 版本

即使是喜欢在线购物的客户通常也会十分讨厌结帐的过程。所涉及的问题太多：

结帐过程会涉及多少步骤通常不是很清晰。

每一步需要多少时间也不清晰。

根据用户如何回答特定的问题，他们有可能被转到应用程序中不相关的部分，之后还要再回来，走了不必要的弯路。选择购物选项、应用折扣编号甚至是登录都会让看起来很直观的过程花费比预期更长的时间。

除非站点开发人员对该过程的安全性编程十分仔细，否则，莫名其妙的安全警告会让用户很恼怒。

含义不明的错误消息和不一致的错误标志都会让用户弄不清楚何时发生了错误。

编码糟糕的验证例程也会导致无休止的问题。这样的例子有很多，比如服务器响应之后，信用卡号作废必须重新输入，再比如复选框没有按要求保持选中状态。

电子商务结帐过程：Web 2.0 版本

在准备使用 Ajax 改造现有的 Web 站点而开始投入时间和开发时，改进用户体验应该成为您的首要目标之一。Ajax 虽然不能解决用户之所以憎恨结帐过程的全部症结，但它至少能在如下三个方面提供一些帮助：

使完成结帐过程所需步骤的数量变得清晰

在步骤间转换的速度较快

当用户必须在登录、输入折扣编号或由于其他原因背离正常的结帐过程时，返回的过程简单且统一