Ajax 改造：用 jQuery、Ajax 选项卡和照片 carousel 改进现有的站点

在本期中，我们将把产品细节页面的内容放到一个选项卡式界面中，从而提高它的可管理性。还要在一个图像 carousel 中显示产品图像，从而提高对图像的控制能力。您将学习如何通过简单的 Dynamic HTML（DHTML）或比较复杂的 Ajax 代码应用这两种技术。无论采用哪种方法，都应用渐进式改进原理，使页面在禁用 JavaScript 时仍然是可访问的。为了实现这些目标，将使用另外两个 jQuery 插件：用于实现图像幻灯片的 jCarousel 和用于实现选项卡的 jQuery UI Tabs。

为了理解本期中的概念，先请看一下Customize Me Now 1.1，这是原示例站点稍加改进后的版本。我们将通过修改 1.1 版创建 Customize Me Now 2.1，这个版本包含整个系列介绍的所有改进。

两种产品细节页面：单页面和多页面

在电子商务 Web 站点中，最复杂的部分之一是产品细节部分。站点会把大量关于产品的信息集中在一起，从简单的说明和技术规格到从用户社区收集的内容（比如用户评论）。当然，还有产品图像，而且每种产品常常有多个图像。从用户体验的角度来看，难题在于向用户显示决定购买产品所需的数据，同时避免过多的信息困扰用户。

在某种程度上，Customize Me Now 1.0 比较容易进行 Ajax 改造。它显示的产品细节内容很容易放在单一页面上。在 Customize Me Now 2.0 中，通过使用 jQuery 和 Thickbox，把原来的页面替换为一个模态对话框。这有助于改进从搜索到购买的用户操作流程。

但是，现在需求改变了。Customize Me Now 1.1 显示的产品细节信息远远多于 1.0 版。这些内容包括许多很长的文本块和许多大照片（图像来自流行的 Web 2.0 照片共享站点 Flickr）。在 Ajax 技术出现之前，有两种方法可以显示如此多的内容：一个很长的滚动页面（见图 1和图 2），或者把页面分割为多个小页面，每个文本块或照片各有一个页面（见图 3和图 4）。

在 Web 浏览器中访问 Customize Me Now 1.1，比较一下 Product Details 页面的版本 A 和 B 以及老版本（Customize Me Now 1.0）之间的差异。页眉和页脚中有这三个版本的链接。可以看到，版本 A 和 B 在易用性方面的困难比老版本大得多。显然，对于 Product Details 页面的这些新版本，Thickbox 模态对话框并不合适。

版本 A 不但可能困扰用户，还会给浏览器和服务器的处理造成麻烦。用户会被大量信息所困扰（假设他们注意所有信息的话）。同时，浏览器和服务器必须处理大量数据，造成很大负担。目前，这个页面只有 6 张照片，所以在使用宽带连接时页面装载速度相当快。但是，如果有 16 张甚至 60 张照片，会怎么样呢？如果还有 150 条用户评论，又会怎么样呢？如果用户使用的网络比较慢呢？如果同时装载与一个产品相关的所有数据，性能就会严重受损，而且用户也难以一下子吸收这么多的内容。

版本 B 在每个页面上只显示少量信息，从而避免用户被大量信息困扰。但是，每当用户要查看更多信息时，他们必须单击链接并等待装载新页面。另外，版本 B 中的每个子页面包含大量让人糊涂的链接。虽然数据少了，但是导航过程很复杂。