title：这会给 GreyBox 覆盖层一个标题。

　　rel：添加这个不常用的 HTML 属性并将其值设为“gb_page_fs[]” — 一个启用开源库的特殊属性。

　　把这些属性添加到 off-site 链接后，每个弹出链接将如清单 3 所示(尽管在现实世界中，Google 并不生产比萨)：

　　清单 3. 用于 GreyBox 链接的 HTML

　　manufacturer's website

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

　　图 2. 运行中的 GreyBox 截图

　有何收获

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

　　改进了用户体验

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

　　图 3. Customize Me Now 1.0 站点地图

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

　　图 4. Customize Me Now 2.0 站点地图

　　渐进增强

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

　　忽略了什么

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

　　典型的 Ajax 功能

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

　　安全性措施

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

　　今后的目标

　　了解定制过程之后，您还可以针对此应用程序进行很多操作。下面是利用额外的 JavaScript 和 CSS 调整实现其他一些改进：

　　用定制 CSS 美化 jTip、ThickBox 和 GreyBox 对话框，使它们与站点的外观更加协调。

　　使用 jQuery 及其各种效果插件给 jTip 和 ThickBox 添加可视转换。对话框可以在每次启动或关闭时分解、迭进或“弹出”。

　　将产品细节(Product Details)内容分解为独立的组件并为每种类型的内容(用户评论、图片库等)提供单独的链接。

　　用交叉销售的内容改造 Confirmation 页面。目前，它只回放订单细节。可以在 ThickBox 窗口隐藏所有这些内容，为更有用的信息保留屏幕资源。

　　最后一点提示：使用而不是滥用 Ajax 特性

　　这里进行的所有工作都涉及到把 Ajax 添加到应用程序，好像 Ajax 是解决所有问题的“万能钥匙”。但事实并非如此。

　　模 式对话框和工具提示对 Customize Me Now 很有效，这是因为在其中呈现的内容的大小是可管理的，所使用的界面也只是简单的滚动界面。许多页面不适合使用模式对话框。如果 Web 页面使用复合的动态 HTML (DHTML) 标记或复杂的交互式 UI 窗口部件部件，那么它最好保持原样。不可以把 Ajax 特性简单地堆砌起来，而丝毫不考虑用户的体验。

　　同样地，ThickBox 应该用于信息页面而不是过程页面。当然，您也可以将 Customization 页面塞入 ThickBox 窗口并在搜索结果页面上弹出。但用户会对这样的界面有何反应呢?— 而您又该如何为其编写代码呢?如果用户在 ThickBox 窗口定制一个产品并单击 Submit，购物车会出现在相同的 ThickBox 窗口内吗?它下面的页面会自动更新吗?更重要的是，这会不会把用户搞糊涂了，连自己在定制过程的哪个地方都不知道呢?

　　高 级 Ajax 应用程序能够在单一屏幕内提供丰富的交互功能。但这类应用程序一般都是从头开始构建起来的。它们需要仔细的规划、信息架构和用户体验设计。在改造现有应用 程序时，一个较小的更改往往都会涉及到很多的操作。本练习的目标就是向原本很传统的 Web 站点添加一点 Ajax 的魔力。如果希望得到的是一个完全基于 Ajax 的界面，最好还是从头创建。