Ajax 改造：用 jQuery 和 Ajax 表单改造现有站点

在本文中，您将学习如何将多页表单转变成 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 虽然不能解决用户之所以憎恨结帐过程的全部症结，但它至少能在如下三个方面提供一些帮助：

• 使完成结帐过程所需步骤的数量变得清晰
• 在步骤间转换的速度较快
• 当用户必须在登录、输入折扣编号或由于其他原因背离正常的结帐过程时，返回的过程简单且统一

示例应用程序：Customize Me Now 1.2

如果在 Web 浏览器中观察 Customize Me Now 1.2，就会发现该站点的结帐过程与其他很多站点一样让人迷惑。所提供的面包屑式导航（breadcrumb navigation）显示结帐需要 5 步：

1. Personal Info
2. Shipping Details
3. Billing Details
4. Order Review
5. Confirmation

但是，实际的过程更为复杂。作为一个用户，在开始步骤 1 之前，必须要选择是作为客人结帐还是登录。如果选择前者，就会直接进入步骤 1，可以在此输入名字和联系信息。如果选择后者，就必须进入登录屏幕，输入用户名和密码并返回到步骤 1 来查看先前输入的联系信息。

完成步骤 1 后，剩余的过程是一个线性过程。但在到达步骤 4 Order Review 时，又会遇到另一个潜在的弯路，这次是到达 Apply Discount 页。

在整个过程中（包括所走的弯路），有一个工具能帮助您了解自己处在该过程中的何处：即前面提到的 breadcrumb navigation。在任何时候，您只能单击在前面已经完成的 breadcrumb 项。您不可能跳转到过程的前面，而是只能向后跳转。这个 breadcrumb 路径如图 1 所示：

此 breadcrumb navigation 在某种情况下很有用，但由于其格式上是一个由竖线分割的列表，很多用户甚至都注意不到它。而且它不能准确反映用户可以使用的弯路。登录实际上是步骤 1 的一个子步骤，而折扣编号则是步骤 4 的子步骤。这些弯路的每一个都需要两次服务器往返才能让用户回到其之前所在位置。每次到服务器的请求都会延长过程的处理时间并且当新页面加载时也会让用户迷失方向。

对于 Customize Me Now 所有以前的版本，在页头和页脚的导航可能在实际中并不存在。它只是为了帮您在阅读本文时能快速跳到示例应用程序的不同页面。Customize Me Now 1.2 示例代码和真实的电子商务应用程序间还存在其他的一些差异。比如，示例中没有 Secure Sockets Layer (SSL) 加密。在 HTTP 连接的两端均没有验证。此外，此过程的每一步都是静态的。比如，即使是用户选择了复选框来使用其邮寄地址作为其帐单地址，但帐单地址还是没有被预填写。而实际的电子商务站点一般会通过服务器端代码启用该功能。就本文的目的而言，客户端代码至少展露出实际应用程序内可能存在的额外复杂性。