|
五、將 AjaxTags 集成到應(yīng)用程序
要將 AjaxTags 集成到應(yīng)用程序中，必須滿足幾個(gè)先決條件。本節(jié)將會(huì)涵蓋這些先決條件和依賴項(xiàng)。
依賴項(xiàng)
在下載和使用 AjaxTags 時(shí)最好的做法是下載整個(gè)二進(jìn)制發(fā)布，而不僅僅是這個(gè) JAR 文件。這樣一來，您就可以獲得隨之捆綁的所有所需的依賴項(xiàng)，包括 Prototype、Script.aculo.us 和 overlibmws 庫(kù)。
設(shè)置和配置
為了在應(yīng)用程序中使用而對(duì) AjaxTags 進(jìn)行的設(shè)置和配置十分直觀：
- 將 ajaxtags.jar 文件放入 WEB-INF/lib 目錄。
- 如果使用的是較早版本的 servlet 容器（Servlet 2.4 / JSP 2.0 之前的版本），那么就需要向 web.xml 文件添加標(biāo)記庫(kù)定義；如果使用的是較新版本的容器，則無需這么做。
清單 2. 針對(duì)較早版本的 servlet 容器的標(biāo)記庫(kù)定義（添加到 web.xml）
<taglib>
<uri>http://ajaxtags.org/tags/ajax</uri>
<location>/WEB-INF/ajaxtags.tld</location>
</taglib>
- 將依賴項(xiàng) JavaScript 文件添加到 Web 應(yīng)用程序。根據(jù) AjaxTags 文檔，需要如下內(nèi)容：
- 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
一旦完成了這些主要步驟，就應(yīng)該可以開始在應(yīng)用程序中使用 AjaxTags JSP 標(biāo)記庫(kù)。從開發(fā)的角度出發(fā)，所必需的是 JSP 頁面（視圖）以及服務(wù)器端的數(shù)據(jù)處理程序，此處理程序能將合適的內(nèi)容返回給由客戶機(jī)收到的異步調(diào)用。
默認(rèn)地，AjaxTags 可以處理 XML、HTML 和純文本內(nèi)容，這應(yīng)該可以滿足大多數(shù)的用戶需求。API 本身包含一些輔助類以便用很少的幾行代碼就可以構(gòu)建合適的響應(yīng)。
六、AjaxTags 演示和示例
從 SourceForge 下載的 AjaxTags 演示應(yīng)用程序包含很多實(shí)際例子。讓我們先來看看其中的幾個(gè)例子，這些例子向您展示了如何輕松地將類似特性集成到您自己的應(yīng)用程序中。
注意：您所參考的這些示例使用的是硬編碼的數(shù)據(jù)源。在實(shí)際操作中，您可以從數(shù)據(jù)庫(kù)提取數(shù)據(jù)，而不是像這樣使用硬編碼到 Java 文件中的數(shù)據(jù)。
選擇框更新、視圖和 HTML
讓我們從客戶端開始，在其中您可以親歷整個(gè)過程是如何從頭至尾工作的。首先要看的是一個(gè)演示 JSP 的片段，其中包含了兩個(gè)下拉框。此頁面相關(guān)部分也與之類似（可以通過瀏覽到在 Tomcat 實(shí)例中運(yùn)行的 AjaxTag 演示應(yīng)用程序并單擊 Select/Dropdown 示例中的 Run 來查看）。這個(gè)例子很好，原因是它利用了pre- 和 post-JavaScript 函數(shù)，及進(jìn)度指示器。此外，一旦做出了合適的選擇后，它還會(huì)展示汽車制造商的徽標(biāo)（請(qǐng)參見 圖 1）。
圖 1. 下拉示例頁面
正如您所見，有兩個(gè)下拉框。讓我們來看看實(shí)現(xiàn)上述功能的相關(guān) JSP 編碼（可以在 dropdown.jsp 中找到）（參見清單 3）：
清單 3. dropdown.jsp 中的 HTML 選擇框
<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>
請(qǐng)注意那些為選定元素所指定的 ID，此外，第二個(gè)下拉列表中沒有任何汽車模型而且還是禁用的。
出處：IBM developerWorks
責(zé)任編輯：moby
上一頁 用 AjaxTags 簡(jiǎn)化 Ajax 開發(fā) [2] 下一頁 用 AjaxTags 簡(jiǎn)化 Ajax 開發(fā) [4]
◎進(jìn)入論壇網(wǎng)絡(luò)編程版塊參加討論
|
第 1 頁 
第 3 頁 用 AjaxTags 簡(jiǎn)化 Ajax 開發(fā) [3]
