Ajax 改造：用 jQuery 和 Ajax 表单改造现有站点
要查看这个过程，可以在浏览器内重新开始这个结帐过程。单击 log in 链接，提交登录表单，会看到个人信息表单载入第一个选项卡。现在能够通过两个方式得到这个表单：直接从结帐过程的起点，或者通过其他路径到达登录页面（当然，在实际情况中，登录后，个人信息表单可能已经为您预先填写好了）。
不过，现在必须找到一种方法来离开第一个选项卡并前进到第二个及后续的选项卡。这次，需要向 checkout1-fragment.html 添加一个表单提交处理程序，该文件含有个人信息表单。此处理程序类似于登录的那个处理程序。与在第一个选项卡内载入结果、启用它并选择它有所不同，我们要在第二个选项卡上执行所有这些动作。为此，选项包将 shippingDetails 的 id 指向 div，而相应选项卡基于 0 的索引是 1。完成后，处理程序会类似清单 10：
清单 10. Personal Info 表单的 JavaScript 提交处理程序
<script type="text/javascript">
// bind the form and provide a callback function
$('#pform').submit(function() {
//submit the form via ajax
$(this).ajaxSubmit({
target: '#shippingDetails',
url: 'checkout2-fragment.html',
success: function() {
var tabSet = $('ul.navTabs');
tabSet.tabs("enable", 1);
tabSet.tabs("select", 1);
}
});
//don't actually submit the form normally
return false;
});
</script>
|
可以继续使用这种方式来处理大多数的后续片段文件，只有一个例外：步骤 4 Order Review 中的文件（checkout4-fragment.html）不需要 Ajax 表单。正如之前所讨论的，步骤 5 是 Confirmation 页面，它打破了选项卡式界面的惯例，加载的是一个全新的页面。因此，通常的表单动作对步骤 4 而言是正确的。不过，Order Review 的确提供了输入折扣编号的另一个弯路。因此，此片段需要一个 click 处理程序来用 checkout4b-fragment.html 的折扣表单重新加载当前的选项卡。结果类似清单 11：
清单 11. Order Review 的 Click 处理程序
<script type="text/javascript">
$('#enterDiscount').click(function() {
/*
grab the url of the current link and load
the fragment version it in an existing tab
*/
$('#orderReview')
.load(
$(this).attr("href")
.replace(".html", "-fragment.html")
)
;
return false;
});
</script>
|
总结一下，我们所做的更改现在已经将 Customize Me Now 1.2 转变为 2.2 版本。
要查看选项卡式结帐过程的运行结果，可以在浏览器中访问此站点并在各个步骤中导航，但不要绕道到登录或应用折扣的步骤。应该能够看到单一屏幕的界面，其中结帐过程的每个步骤都在各自的选项卡内进行，而百叶窗式的视觉效果则标记了步骤间的转换。当到达倒数第二个步骤并单击 purchase 时，就会进入 Confirmation 页面，它看上去正如在 Customize Me Now 1.2 中的一样。
现在，多次执行此结帐过程并通过其他弯路进入登录和折扣过程。线性的选项卡式的过程没有改变，但包含多个子步骤的某些复合步骤（1 和 4）除外。各个子步骤的加载没有显示视觉效果。当执行到后续的选项卡时，会看到类似的百叶窗式的效果。
现在是需要真正的创意的时候了。通过步骤 4 完成此过程，然后单击步骤 2 的选项卡来模仿想要重新执行先前步骤的一个用户。应该可以看到第二个选项卡重新激活（表单字段内之前输入的值均完整无缺）而第三和第四个选项卡则是禁用的。在向后执行此过程后，要再次重新执行此过程的惟一方法是重新提交这些表单。在 清单 8 中添加的激活和解除激活代码可以很好地工作。
在示例应用程序中，这种限制看起来似乎有些专制，但在实际环境中，它非常重要。用户在步骤 2 所做的回答可能会影响步骤 4 中的提问，所以如果之前的回答更改了，用户将必须重新进行之后的步骤。在这些实际的情景中，必须要向选项卡式界面添加额外的代码，以便每次选项卡被重新访问时，其内容都会被一个刷新 Ajax 调用重新载入。
最后，使用浏览器首选项或插件禁用 JavaScript 功能。重新加载结帐页面并确保禁用了 JavaScript 功能的浏览器在使用旧的、未进行 Ajax 改造的界面时仍能完成结帐过程。通过对旧的界面实施渐进增强而不是根据 JavaScript 功能进行重新设计，确保了各类用户代理在将来都能访问应用程序。
对于使用选项卡页面呈现一系列表单这样的简单目标，上述操作看起来工作量很大。但您从中获得哪些收获呢？答案仍然归结于用户体验。
Customize Me Now 1.1 的多页界面本来不是很糟糕，但加载连续表单的过程减缓了用户操作的速度，而且还会让他们在各个步骤间迷失方向。我们的确提供了老式的 breadcrumb navigation。但视觉上，breadcrumb 式导航所提供的结帐体验的一致性较差。因为它们看上去更像全局导航或文本内容，所以，与视觉特色明显的选项卡式界面相比，breadcrumb 链接难免略逊一筹。而且选项卡式界面为过程提供了视觉上的凝聚力，将一系列分离页面转变成单一界面。步骤间发生的百叶窗式效果加强了这种聚合力的效果，同时也巧妙地提醒了用户在过程中的位置。
此外，还巧妙地改进了那些绕道进行登录和申请折扣的用户的体验。在老的界面内，这类用户通常都会对自己所处的位置感到困惑。通过将单个步骤的复合动作放到从来不会从页面消失的单个选项卡内，新的结帐路径总是可以让用户明确方向。由于在单个选项卡内子步骤间没有百叶窗效果，所以用户就能知道他们没有完成当前步骤。
构建完选项卡后，可以继续改造界面内的其他问题区域。以下是所能进行的其他一些增强：
- 处理 Ajax 故障：提交处理程序只能响应成功的 Ajax 调用。而实际的生产型站点必须要预料到因服务器错误或网络延迟而导致的无效 Ajax 调用，并且能够进行恢复。
- 提供表单验证：输入验证是开发人员和用户都十分头痛的问题。到目前为至，我们一直回避着这一棘手的问题。若能正确处理，Ajax 表单验证可极大地改进用户体验并能让代码变得更为有效、可维护性更好。
- 让购物车可见：新的 Ajax 界面只在过程的开始和结束部分显示用户的购物车。可以将购物车的压缩视图作为挨着选项卡的一个侧栏添加进来，并在过程中完成每个步骤后对之进行更新。这一有关用户订单状态的连续反馈将对用户十分有价值。
- 加入 Back 按钮管理：虽然有所改进，但还是会给用户带来一个新的问题。整个结帐过程中的 Back 按钮都是无用的。不过，借助 Ajax 的历史管理库，这很容易补救，该库在每次新表单被加载进选项卡时允许向浏览器的历史堆栈添加一项。这样一来，当用户单击 Back 按钮时，就会被带回到之前的选项卡而不是被从结帐过程硬拉出来，回到之前所在的页面。要实现这一功能，可以返回到一个独立库，比如 Really Simple History，它适用于 jQuery、Prototype 和很多其他的 Ajax 框架（内幕公布：本文的作者是 Really Simple History 的编程人员之一。）
正如您所见，存在无限可能。您在本文中所做的更改为您提供了一个坚强的 Ajax 基础，您可借此继续改造结帐过程。
