选择框更新并进一步查看 JSP 标记语法

现在，让我们来看看这个应用程序为您完成所有任务的那些内容：AjaxTags JSP 标记库的实际使用。清单 4 取自同一个文件（dropdown.jsp）：

清单 4. AjaxTag JSP 标记库示例：ajax:select 标记

<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 变量定义

<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 的值。

现在，再回到 清单 4，注意到为了向服务器进行异步回调，您必须要知道这个请求的 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 参数（请参见 清单 6）表示的是应该传递到被请求 URL 的一些额外参数：

清单 6. parameters 参数

parameters="make={make}"

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

清单 7. 当用户从第一个选择框中选择 “Mazda” 时，所请求的 URL

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 是选项的值，这个选项显示没有做出某个选择。在本例中，恢复默认状态。

出处：IBM developerWorks
责任编辑：moby

上一页 用 AjaxTags 简化 Ajax 开发 [3] 下一页 用 AjaxTags 简化 Ajax 开发 [5]

◎进入论坛网络编程版块参加讨论