用 AjaxTags 简化 Ajax 开发

时间:2007-11-26 07:47:42  来源:IBM developerWorks  作者:Daniel Wintschel  【背景色 】

在 Web 2.0 时代，开发人员和用户都对基于 Web 的应用程序的可用性和响应性抱有很高的期望。除非是在过去的两年内一直没有关注过这个领域，否则一定听说过 Asynchronous JavaScript + XML（Ajax 技术）。通过 Ajax，可以构建灵活、响应性好和高度动态的基于浏览器的用户界面，而且根本不需要进行浏览器页面重载。本文将介绍一种 Java™/JavaScript 库 —— AjaxTags，它让您可以很轻松地将 Ajax 功能集成到 JSP 页面中。

简介

以前，基于 Web 的用户界面（包括页面和应用程序）要求用户所做的每个请求都强制执行一次页面刷新，这消耗了大量的时间和带宽。重复的页面刷新的后果是 Web 体验变得异常缓慢和沉闷，即使对于那些具有高速的宽带连接的用户也是如此。

现在，各地的开发人员都在寻找新的技术和技巧，以便显著提高基于 Web 的应用程序的性能和用户体验。用 Ajax 编写的 Web 应用程序允许数据在后台被异步地发送给服务器，而同时又能在不重载页面的情况下更新此 Web 页面的各个部分。Ajax 涉及到很多对象和技术。尽管缩写词 Ajax 中有字母 X，但 XML 可能永远都不会用到。从浏览器发回的响应也可以是多种格式或类型中的一种，包括纯文本、HTML 或 XML 等。

本文描述了一个小型紧凑的 JSP 标记库，即 AjaxTags，该库使用某些外部 JavaScript 来为 JSP 页面提供易用的 Ajax 支持。

立即开始

若想跟随本文进行学习并运行本文中所描述的这些示例，就需要选择使用几个工具。本文所使用的每个应用程序都是免费和开源的。

运行本文给出的示例所使用的参考实现 servlet 容器是 Apache Tomcat。它可以从 Apache Tomcat 网站（请参见 参考资料）免费下载。本文中的示例使用的是本文写作时的最新版本，为 6.0.13。

此外，还需要登录到 SourceForge 下载 AjaxTags 示例应用程序（有关链接，请参见 参考资料）。这里的示例使用的是 Ajax Tags 演示下载的 1.3 版。这是一个标准的 WAR 文件，可以将其部署到 Tomcat webapps 目录。如果不想让要浏览的 URL 太过冗长，在部署它之前，可以对此 WAR 文件进行重命名。否则，需要浏览到：http://localhost:8080/ajaxtags-1.3-beta-rc6-1/。

现在让我们立即开始吧。

Ajax 是否是为了清洁之用？

还只是几年之前，即使是顽固的开发人员也会将 Ajax 与由 Colgate-Palmolive 开发和生产的那个流行清洁剂联系在一起，而不是将其视为一种可以提高在线体验的 Web 开发技巧。现在，Ajax 技术越来越受欢迎，大家不禁都想要获得有关其工作原理以及在何种情况下可以使用它的全部信息。

工作原理

在开发和编写 Ajax 应用程序时，需要理解前台和后台的工作原理。如下所示的是应用程序内的一种典型的事件流：

1. 用户请求一个网页。
2. 用户更改此网页上的状态（例如，单击一个链接、从选择框中进行选择、单击了某个单选按钮或复选框）。
3. 状态的改变会击发事件，调用一个 JavaScript 函数。
4. JavaScript 函数实例化一个 XmlHttpRequest 对象，该对象会在后台异步地产生一个对服务器的 HTTP 请求（注意，没有发生页面刷新）。
5. 服务器响应，向 JavaScript 函数返回所请求的数据。
6. JavaScript 函数通过使用额外的 JavaScript 和/或 DHTML 更新和修改所正在查看的页面。

负责更新当前网页的某些部分的 JavaScript 需要知道哪个 HTML 元素负责更新。要实际动态更新给定页面内的特定元素（在无需重载此页面的情况下），需要分配给这些 HTML 元素一个惟一 ID。清单 1 所示的是此演示中的一个简单的例子，稍后我们将对其进行更深入的分析：

清单 1. 为 HTML 元素分配 ID

<select id="model" disabled="disabled">
  <option value="">Select model</option>
</select>

清单 1 为这个特定的选择框分配的 ID 为 model。通过这个 ID，就可以利用 JavaScript 轻松定位和处理所选元素及其内容。

AjaxTags API 使用的是某些很好的、开源的第三方 JavaScript 库，这些库会为您完成几乎全部的繁重编程工作。其中的一个好处是这些库均包括丰富的特性并经诸多浏览器广泛测试，所以尽可放心使用。AjaxTags 所使用的第三方库包括：

• Prototype（一种带多种实用函数的 JavaScript 库）
• Script.aculo.us（一种带多种可视效果的 JavaScript 库）
• Overlibmws（一种 DHTML 弹出库）

何时使用 AjaxTags

在很多典型的环境中都可以使用 AjaxTags，这样一来，不仅可以方便开发人员，而且还可以提高应用程序的用户体验。其中的一些用例包括：

• 基于第一个下拉框中所做的选择来修改第二个下拉框的内容
• 基于单击或鼠标悬浮事件从服务器发起对额外信息的请求，而且无需刷新用户所查看的页面
• 基于用户输入的数据在服务器上执行计算，无需重载整个页面

让我们先来看一些如何将这些特性集成到应用程序中的实际例子