Java Opensources for Web Development Part I:Chapter 3 當 Java 遇到 AJAX
Lession 12 : Java Web Parts
上期說明了 AjaxTags 的應用,讓 Java Web 工程師可以利用簡單的 Taglibs 就可以完成 ajax 的技巧。在我們開始複雜 ajax framework 如 DWR、Prototype、ZK、或 Scriptaculous 之前,除了 AjaxTags 還有如 Java Web Parts 或是 AjaxAnywhere 等元件可以利用。
javawebparts-core-1.0.jar
javawebparts-ajaxparts-1.0.jar
除此之外,共有
AjaxParts | 蒐集了許多著名的 ajax taglibs (APT),例如上次介紹的 Ajaxtags |
Context | 處理 Servlet Context 的元件 |
Filter | 處理 Servlet Filter 的元件 |
Listener | 處理 Context 或 Session Listeners |
Misc | 一些沒辦法歸納的有用元件 |
Taglib | 各式各樣的 taglibs |
Servlet | 利用在 Servlet 之上的一些元件 |
Request | 專門處理 HTTP Request 的元件 |
Response | 專門處理 HTTP Response 的元件 |
Session | 專門處理 HTTP Session 的元件 |
雙下拉選單的一個範例,我們可以先在 web.xml 設定 ajaxTagsConfig 的位置:
<context-param>
<param-name>AjaxPartsTaglibConfig</param-name>
<param-value>/WEB-INF/ajax_config.xml</param-value>
</context-param>
<servlet>
<servlet-name>DynamicDoubleSelectServlet</servlet-name>
<servlet-class>javawebparts.cookbook.dynamicdoubleselect.DynamicDoubleSelectServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DynamicDoubleSelectServlet</servlet-name>
<url-pattern>/dynamicDoubleSelect</url-pattern>
</servlet-mapping>
在 JSP 之中可以設定,我們會希望 當 showTitleSelect 有所變化時,id = characters 的 DIV 中的 select 可以顯示相關的選項。在 jsp 的最末要設定 ajax:enable ,如果 ajax:enable 設定 logger 就要利用 commons-logger 來記錄相關的 Log。
<%@ taglib prefix="ajax" uri="javawebparts/ajaxparts/taglib" %>
<form name="DynamicDoubleSelectForm">
<select name="showTitleSelect">
<option></option>
<option value="B5">Babylon 5</option>
<option value="BSG">Battlestar Galactica</option>
<option value="STTNG">Star Trek The Next Generation</option>
<option value="STTOS">Star Trek The Original Series</option>
<option value="SGA">Stargate Atlantis</option>
<option value="SG1">Stargate SG-1</option>
</select>
<ajax:event ajaxRef="DynamicDoubleSelectForm/showTitleChange"/>
<div id="characters">
<select>
</select>
</div>
</form>
<ajax:enable debug="debug" logger="JWPAlertLogger"/>
當 ajax event 驅動就是在 web.xml 之中所設定的 AjaxPartsTaglibConfig,會去查詢相關對應的事件,例如範例中就是查詢 ajax_config.xml。
<ajaxConfig>
<group ajaxRef="DynamicDoubleSelectForm">
<element ajaxRef="showTitleChange">
<event type="onchange">
<requestHandler type="std:QueryString" method="get" target="/dynamicDoubleSelect?method=first">
<parameter>showTitle=showTitleSelect</parameter>
</requestHandler>
<responseHandler type="std:InnerHTML">
<parameter>characters</parameter>
</responseHandler>
</event>
</element>
</group>
</ajaxConfig>
ajax:event 利用 ajaxRef="DynamicDoubleSelectForm/showTitleChange",找到 ajax_config.xml 之中的 showTitleChange element,並且知道 event 的型態是 onchange,所以處理 AJAX 資料是去拿著 showTitle=$ 傳入的showTitleSelect 變數去呼叫 /dynamicDoubleSelect?method=first 這支 Servlet,當資料取得之後,利用 responseHandler 將資料透過 InnerHTML 方式放回原有的 JSP 之中。
假設在 DynamicDoubleSelectServlet 收到 showTitle="B5",就會回傳 String[] characters 回到 Java Web Parts ,如此簡單的雙下拉選單就可以製作出來了,利用這種方式,即使多維式關聯性表單也都可以輕易地完成之。