用 AjaxTags 简化 Ajax 开发(4)
作者:Daniel Wintschel 来源:IBM developerWorks 时间:2007-11-27 00:00:00
选择框更新并进一步查看 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 是选项的值,这个选项显示没有做出某个选择。在本例中,恢复默认状态。