Ajax改造：使用Ajax和jQuery改进现有站点1.doc

Ajax技术改变了大型商业Web应用程序的外观，但是许多较小的Web站点都不具备足够的资源重新构建完整的用户界面（UI）。Ajax的一些新特性能够解决实际中的界面问题并改善用户体验。本文将展示如何使用简单的模式窗口消除弹出窗口和导航死角。通过应用渐进增强（progressiveenhancement）这一理念，能够保证这些增强的UI特性不会损害站点的可访问性，并且严格遵守Web标准。
本文假设您已经牢固掌握超文本标记语言（HypertextMarkupLanguage，HTML）和级联样式表（CascadingStyleSheet，CSS），基本了解JavaScript编程和Ajax。示例应用程序仅使用客户端代码构建；本文演示的技术适用于任何服务器端应用程序框架。要运行示例站点，您至少需要在本地主机上运行一个基本的Web服务器。
概念介绍：使用Ajax改进您的站点
引导用户跟随特定路径—即，从产品搜索到付款购买—这种需求与Web本身的历史一样久。它一直都充满着风险：让用户迷失方向。您的导航路径越长、越复杂，用户经历的内容就越多。您需要为用户提供足够的信息，以防止他们在导航过程中失去兴趣。
在Web1.0世界，购物站点通过构造一条流畅的路径（从搜索和结果到选择和购买）流线化用户体验。当购买路径提供的信息无法满足用户需求时，他们需要通过导航找到提供更多信息的产品细节或比较页面。这种方法存在的问题是，它们使用户离开了购买路径，增加了用户放弃购买的机会。而且还难以维护，因为您的导航逻辑必须存储与用户如何到达此死角相关的信息。
弹出窗口似乎提供了一个解决方案。通过弹出窗口提供补充信息，主窗口中直接的分布路径不会受到干扰。然而，不幸的是，弹出窗口容易使人混淆和反感。它们可能比上面的导航弯路更容易维护，但是它们很可能使用户退出您希望其完成的购买流程。
幸运的是，开源JavaScript库提供了一种简单方式，可以彻底摆脱导航弯路和弹出窗口。本文将演示如何使用Ajax和DynamicHTML(DHTML)技术在工具提示、lightbox和其他模式窗口中呈现补充信息。由于这些元素可以动态地插入任何页面，它们能够保持从主页到购买的快速、分步路径。
应用程序介绍：CustomizeMeNow
本文中的示例应用程序主要针对电子商务。我已经构造了一个虚构的购物应用程序CustomizeMeNow，允许用户定制和购买一组不同的产品：批萨、旅行包或有价证券。当然，在实际中，这些产品类别绝不会出现在同一个站点上。但是，将它们放在一起可以演示许多站点面对的复杂、真实的导航难题。
本文首先提供一个Web1.0版的CustomizeMeNow，然后将其改进为Web2.0版，当您了解到补充信息只是通过一个Ajax调用提供时，就能想象到导航路径有多么的流畅。此处涉及的技术适合于任何需要保持简单性并能引导用户的流程。配置产品、做一个调查、注册一些服务，或者只是完成一个注册表单—所有这些流程都可以使用Ajax实现流线化。
技术介绍：Ajax、工具提示、模式窗口和lightbox
现在，也许不再需要介绍Ajax了：在Web开发领域到处都是它身影。这些年来，聪明的编程人员一直使用JavaScript代码逐步更新Web页面，而不再与服务器往返通信。但仅仅是因为xmlHttpRequest对象的采用—最初是一个Windows®InternetExplorer®扩展，但现在支持许多不同的浏览器—才使Ajax流行起来的。无论何时，只要您看到一个与桌面应用程序非常相似的Web应用程序，那么它很可能采用了Ajax。本文无意讨论Ajax编程的基础知识，但是您将使用到许多使用Ajax技术的开源库。
AjaxUI通常使用工具提示、lightbox和模式窗口。它们都是指一个浏览器视区（viewport）的弹出屏幕，而不是在一个独立的窗口中运行。工具提示（Tooltips）通常是一些提供上下文内容的小型窗口，将鼠标悬停在一个触发器元素上就会显示。模式窗口（Modalwindows）通常比较大，而且通过一个单击事件触发。Lightbox是一种特殊的模式窗口，它通过半透明的重叠将窗口的原始内容和模式内容分隔开。任何一种这类容器都可以填充各种内容：使用DHTML技术隐藏的内联内容；通过Ajax调用从服务器拉取的新内容；或者拉入iframe中的完整的独立文档。流行的DVD租赁服务Netflix提供了一个关于这些界面元素的出色示例。
工具介绍：jQuery、GreyBox、ThickBox、JTip和jQuery表单
自从2005年Ajax开始流行之后，开源JavaScript工具箱不断增多。每个工具箱都有自己的优点、缺陷和特性，但是出色的工具箱隐藏了浏览器的差异，并提供了一个针对Ajax、DHTML和视觉效