用 AjaxTags 简化 Ajax 开发（2）

look_w

将 AjaxTags 集成到应用程序要将 AjaxTags 集成到应用程序中，必须满足几个先决条件。本节将会涵盖这些先决条件和依赖项。
依赖项在下载和使用 AjaxTags 时最好的做法是下载整个二进制发布，而不仅仅是这个 JAR 文件。这样一来，您就可以获得随之捆绑的所有所需的依赖项，包括 Prototype、Script.aculo.us 和 overlibmws 库。
设置和配置为了在应用程序中使用而对 AjaxTags 进行的设置和配置十分直观：

• 将 ajaxtags.jar 文件放入 WEB-INF/lib 目录。
• 如果使用的是较早版本的 servlet 容器（Servlet 2.4 / JSP 2.0 之前的版本），那么就需要向 web.xml 文件添加标记库定义；如果使用的是较新版本的容器，则无需这么做。
  清单 2. 针对较早版本的 servlet 容器的标记库定义（添加到 web.xml）

  1 2 3 4

  <taglib>   <uri>http://ajaxtags.org/tags/ajax&lt;/uri>   <location>/WEB-INF/ajaxtags.tld</location> </taglib>

  
  
  
  
• 将依赖项 JavaScript 文件添加到 Web 应用程序。根据 AjaxTags 文档，需要如下内容：
  • Prototype 1.4.0：prototype-1.4.0.js
  • Scriptaculous 1.5.1：scriptaculous.js、builder.js、controls.js、dragdrop.js、effects.js 和 slider.js
  • OverLIBMWS（可选，只用于 ajax:callout）：overlibmws.js

一旦完成了这些主要步骤，就应该可以开始在应用程序中使用 AjaxTags JSP 标记库。从开发的角度出发，所必需的是 JSP 页面（视图）以及服务器端的数据处理程序，此处理程序能将合适的内容返回给由客户机收到的异步调用。
默认地，AjaxTags 可以处理 XML、HTML 和纯文本内容，这应该可以满足大多数的用户需求。API 本身包含一些辅助类以便用很少的几行代码就可以构建合适的响应。
AjaxTags 演示和示例从 SourceForge 下载的 AjaxTags 演示应用程序包含很多实际例子。让我们先来看看其中的几个例子，这些例子向您展示了如何轻松地将类似特性集成到您自己的应用程序中。
注意：您所参考的这些示例使用的是硬编码的数据源。在实际操作中，您可以从数据库提取数据，而不是像这样使用硬编码到 Java 文件中的数据。
选择框更新、视图和 HTML让我们从客户端开始，在其中您可以亲历整个过程是如何从头至尾工作的。首先要看的是一个演示 JSP 的片段，其中包含了两个下拉框。此页面相关部分也与之类似（可以通过浏览到在 Tomcat 实例中运行的 AjaxTag 演示应用程序并单击 Select/Dropdown 示例中的 Run 来查看）。这个例子很好，原因是它利用了pre- 和 post-JavaScript 函数，及进度指示器。此外，一旦做出了合适的选择后，它还会展示汽车制造商的徽标（请参见 ）。
图 1. 下拉示例页面正如您所见，有两个下拉框。让我们来看看实现上述功能的相关 JSP 编码（可以在 dropdown.jsp 中找到）（参见清单 3）：
清单 3. dropdown.jsp 中的 HTML 选择框

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<label for="make">Make:</label> <select id="make">   <option value="">Select make</option>   <option value="Ford">Ford</option>   <option value="Honda">Honda</option>   <option value="Mazda">Mazda</option> </select> <span id="progressMsg" style="display:none;"> <img alt="Indicator" src="<%=request.getContextPath()%> /img/indicator.gif" /> Loading...</span> <label for="model">Model:</label> <select id="model" disabled="disabled">   <option value="">Select model</option> </select>

请注意那些为选定元素所指定的 ID，此外，第二个下拉列表中没有任何汽车模型而且还是禁用的。
选择框更新并进一步查看 JSP 标记语法现在，让我们来看看这个应用程序为您完成所有任务的那些内容：AjaxTags JSP 标记库的实际使用。清单 4 取自同一个文件（dropdown.jsp）：
清单 4. AjaxTag JSP 标记库示例：ajax:select 标记

1 2 3 4 5 6 7 8 9

<ajax:select   baseUrl="${contextPath}/dropdown.view"   source="make"   target="model"   parameters="make={make}"   preFunction="initProgress"   emptyOptionName="Select model"   postFunction="resetProgress"   errorFunction="reportError" />

在仔细研读清单 4 中的大块代码之前，请注意这段代码：${contextPath}。要消除混淆，需要指出这实际是一个使用 EL（表达式语言）进行的变量设置，在 header.jsp 中定义，如清单 5 所示：
清单 5. header.jsp 中的 contextPath 变量定义

1 2	<c:set var="contextPath" scope="request">    ${pageContext.request.contextPath}</c:set>

我着重提到它，是为了让您能够清楚地看到 ${contextPath} 变量是如何被解析的。如果用 Java 编写，则其值会是 pageContext.getRequest().getContextPath() 的对等物。基于我的配置，${contextPath} 变量将是 http://localhost:8080/ajaxtags-1.3-beta-rc6-1 的值。
现在，再回到 ，注意到为了向服务器进行异步回调，您必须要知道这个请求的 URL。AjaxTag 需要这个 baseUrl 参数，它是 ID 为 make 的选择框发生更改事件时所需异步请求的那个 URL。
知道了 ${contextPath} 的值后，就可以看到将要请求的 baseUrl 为 http://localhost:8080/ajaxtags-1.3-beta-rc6-1/dropdown.view。
baseUrl 后面还有 source 和 target。这些参数代表了所处理的 HTML 元素的 ID。在本例中，处理了两个选择框：一个包含汽车制造商，另一个包含汽车模型。包含汽车制造商的选择框是源，包含汽车模型的选择框则是目标。
parameters 参数（请参见 ）表示的是应该传递到被请求 URL 的一些额外参数：
清单 6. parameters 参数

1	parameters="make={make}"

请注意花括号内的语法为 make={make}。这就表明要将 make 的参数键追加到这个正被异步请求的 URL，而且作为数值，传递在相应的指定 HTML 元素中找到的值（基于 ID）。所以在这个示例中，后台的 JavaScript 将会用 make 的 ID 来获得这个 HTML 元素、获得该元素的值并将其作为 HTTP 请求的一部分传递。这听起来比实际的情况更容易让人混淆，所以让我们来看看最后的这个 URL，此 URL 在选择第一个选择框的内容时被请求（请参见 ）：
清单 7. 当用户从第一个选择框中选择 “Mazda” 时，所请求的 URL

1	http://localhost:8080/ajaxtags-1.3-beta-rc6-1/dropdown.view?make=Mazda

可以看到已经有一个参数被添加在 URL 的末尾，参数键是 make，而参数的值为 Mazda。
ajax:select 参数 preFunction、postFunction 和 errorFunction 是所编写的定制 JavaScript 函数的名称，这些函数在时间或条件合适时调用。在本例中，命名的方式很明显。preFunction 在 Ajax 请求之前执行；postFunction 在 Ajax 请求完成且收到响应之后执行，errorFunction 在出现问题（比如请求返回了 500 内部服务器错误或资源不存在消息等等）时执行。
最后一个参数 emptyOptionName 是选项的值，这个选项显示没有做出某个选择。在本例中，恢复默认状态。
在使用浏览器请求此 JSP 页面之后，会注意到 ajax:select 标记已经由清单 8 所示的 JavaScript 片段所取代，此段代码嵌入在客户端的页面内（通过在 Web 浏览器中查看页面的源代码可以检索到）：
清单 8. ajax:select 标记生成的 JavaScript

1 2 3 4 5 6 7 8 9 10 11 12

<script type="text/javascript"> new AjaxJspTag.Select( "/ajaxtags-1.3-beta-rc6-1/dropdown.view", { parameters: "make={make}", postFunction: resetProgress, target: "model", preFunction: initProgress, source: "make", emptyOptionName: "Select model", errorFunction: reportError }); </script>