Ajax資料

AjaxTags 是由一系列的JSP標籤組成的，這些標籤用以簡化Ajax應用的開發。對很多開發者而言，開發Ajax應用時總是從創建XMLHttpRequest對象開始——這是相當糟糕的行爲，你在重複發明輪子，實際上，那個輪子已經有人幫你做好了！通過前面的介紹，我們知道有兩種選擇：一種是使用 JavaScript函數庫來簡化Ajax應用的開發，例如Prototype.js和Dojo等；另外一種是基於RPC的Ajax應用，例如DWR和 JSON-RPC-Java等。

AjaxTags則提供了更高層次的簡化，它以 Prototype.js和其擴展項目Scriptaculous.js爲基礎，將常用的Ajax應用封裝成簡單的標籤。通過使用 AjaxTags，J2EE程序開發者可以像使用普通標籤一樣來獲得Ajax功能。雖然AjaxTags的靈活性相對較差，但對於大部分J2EE應用而言，常用的Ajax功能（如自動完成、級聯菜單等）AjaxTags都有現成的實現，直接使用就可以了，所以我們沒有理由拒絕AjaxTags。

18.1 AjaxTags的下載和安裝

AjaxTags是屬於sourceforge的一個開源項目，它以Prototype.js及相關項目爲基礎，提供了一套簡單的JSP標籤庫（早期的AjaxTags還需要Struts的支持，但今天的 AjaxTags已經不再依賴於Struts了），通過這些標籤庫可以非常簡單地開發出Ajax應用。

18.1.1 AjaxTags概述

AjaxTags是一套簡單的JSP標籤，這套標籤以一些現有的開源項目爲基礎，AjaxTags最核心的依賴是Prototype.js庫及其相關項目Scriptaculous.js。當然，JSTL和 jakarta-commons的一些包也是AjaxTags所必需的。除此之外，早期的AjaxTags還依賴於Struts框架，如果需要用 AjaxTags的displayTag標籤，則還需要displayTag框架。

AjaxTags致力於解決J2EE應用開發者的軟肋：厭倦了煩瑣的JavaScript代碼，以直接而煩瑣的操作來操作DOM結構，從而提供HTML頁面的動態顯示。AjaxTags完全不需要開發者寫一行 JavaScript代碼，它以一種“非常Java的方式”來開發Ajax應用，因此它專屬於J2EE應用，Ajax技術本身不侷限於任何語言，但 AjaxTags只能用於Java平臺。

只要開發者能使用簡單的JSP標籤，就可以使用AjaxTags。它提供了一組簡單的標籤，這些標籤封裝了常用的AjaxTags功能。

18.1.2 下載和安裝AjaxTags

AjaxTags是屬於sourceforge的一個開源項目，因此可以登錄官方站點http://ajaxtags. sourceforge.net下載AjaxTags的最新版。目前，AjaxTags的最新版本是1.2 beta3，這是一個測試版，可能存在一定風險，但AjaxTags的產品版實在太老了，因此推薦使用AjaxTags 1.2 beta3版。

在瀏覽器的地址欄中輸入http://sourceforge.net/project/showfiles.php?group_id=140499，即可下載到AjaxTags的1.2 beta3版本，將下載到的壓縮文件解壓縮，可看到如下文件結構。

css：該路徑下包含了使用AjaxTags必需的CSS樣式單，這些樣式單文件管理Ajax頁面最通用的顯示效果。當然，用戶可以開發自己的CSS樣式單文件。

dist：該路徑下包含了AjaxTags編譯生成的JAR文件。

docs：該路徑下存放AjaxTags的各種文檔，但沒有包含API文檔（AjaxTags的API文檔需要另行下載）。

images：該路徑下包含使用AjaxTags必需的圖片文件，這些圖片文件用於生成Ajax頁面中最通用的效果。當然，用戶也可以使用自己喜歡的圖片。

js：該路徑下包含了使用AjaxTags必需的JavaScript庫文件，例如prototype.js等文件都可以在該路徑下找到。

lib：該路徑下存放了編譯和運行AjaxTags所依賴的第三方類庫，用戶可根據需要選擇使用。

授權等其他相關文檔。

要在一個Web應用中使用AjaxTags，只需要將其JAR文件複製到Web應用的WEB-INF\lib下就可以了。因爲AjaxTags是一個專注表現層的技術，因此，如果需要在一個Web應用中使用 AjaxTags，則需要更多的東西。要在一個Web應用中使用AjaxTags，可以按如下步驟進行操作：

將AjaxTags項目解壓縮路徑下的dist/ajaxtags-1.2-beta3.jar複製到Web應用的WEB-INF/ lib下。

因爲AjaxTags還需要第三方類庫的支持，所以至少需要將JSTL項目的JAR文件和jakarta-commons下必需的JAR文件複製到WEB-INF/lib路徑下。

因爲需要使用JSP標籤，所以對於使用JSP 1.1的用戶，應該將ajaxtags.tld文件（該文件位於ajaxtags-1.2-beta3.jar文件的META-INF文件夾下）複製到 WEB-INF路徑下，並在web.xml文件中定義標籤庫的引用，即在web.xml文件中增加如下一段：

<taglib>

<!-- 定義標籤庫的URI -->

<uri>/tags/ajax</uri>

<!-- 定義標籤庫TLD文件的物理位置-->

<location>/WEB-INF/ajaxtags.tld</location>

</taglib>

上面的配置文件是屬於JSP自定義標籤庫的內容，請參考JSP自定義標籤庫的相關資料。上面的配置意味着在JSP頁面中應使用如下代碼來導入AjaxTags標籤庫：

<%@ taglib uri="/tags/ajax" prefix="ajax" %>

實際上，對於使用JSP 2.0的用戶，根本不需要在web.xml文件中定義標籤庫，而可以直接在JSP頁面中使用標籤庫的絕對地址，即通過如下方式引用AjaxTags的標籤庫：

<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>

將AjaxTags項目解壓縮路徑下的js整個路徑複製到Web應用的根路徑下。當然，也可以放在Web應用的任意路徑下，只要在JSP頁面中能引用到這些JavaScript文件即可。AjaxTags通常依賴於如下4個關鍵的JavaScript庫：

Prototype-1.4.0.js

Scriptaculous.js

Overlibmws.js

AjaxTags.js

因此，在每個JSP頁面中都應該導入如下4行代碼：

<script type="text/javascript" src="js/prototype-1.4.0.js"></script>

<script type="text/javascript" src="js/scriptaculous.js"></script>

<script type="text/javascript" src="js/overlibmws.js"></script>

<script type="text/javascript" src="js/ajaxtags.js"></script>

將 AjaxTags項目解壓縮路徑下的images文件夾複製到Web應用的根路徑下。當然，也可以放在Web應用的任意路徑下，只要在JSP頁面中能引用到該路徑下的圖片文件即可。如果程序開發者決定使用自己的圖片，則可以省略該步驟，但開發者應該自己提供相應的圖片，例如自動完成應用中使用的轉動圖片。

將 AjaxTags項目解壓縮路徑下的css整個路徑複製到Web應用的根路徑下。當然，也可以放在Web應用的任意路徑下，理由與images相似。同樣，開發者也可以選擇放棄AjaxTags默認的CSS樣式，而使用自己的CSS樣式。通常，我們可以使用如下格式來導入CSS樣式：

<link type="text/css" rel="stylesheet" href="css/ajaxtags-sample.css" />

經過上面的步驟，我們就可以在一個JSP頁面中使用AjaxTags標籤了，這個標籤可以極大地簡化Ajax應用的開發。因爲我們需要使用標籤庫，因此這些Ajax頁面不能是普通的HTML頁面，而必須是JSP頁面。

使用AjaxTags的頁面不能是靜態的HTML頁面，而必須是JSP頁面。

當然，即使有AjaxTags的幫助，服務器的響應還是必須由程序員提供。下面，我們介紹如何開發服務器響應類。

18.2 AjaxTags入門

前面我們已經說過了：使用Ajax是相當簡單的事情，完全不需要煩瑣地創建XMLHttpRequest對象來發送Ajax請求。使用AjaxTags甚至不需要編寫回調函數，不需要解析服務器響應，不需要程序員手動更新HTML頁面顯示，整個過程完全由AjaxTags完成，應用開發者只需要編寫服務器響應即可。服務器響應就是Ajax請求的處理類。

18.2.1 編寫處理類

這裏說的處理類並不一定是一個完整的Java類，它可以是一個 JSP頁面，也可以是一個配置在Web應用中的Servlet或者Struts的Action，甚至是一個非Java的服務器組件，只要它能響應用戶的請求即可。當然，因爲AjaxTags是一種高度封裝的Ajax框架，因此處理類的返回值不能像之前那樣隨心所欲，而必須滿足某種格式。服務器處理類的返回值必須滿足如下XML文件格式：

<!-- XML文件的聲明部分 -->

<?xml version="1.0" encoding="UTF-8"?>

<!-- AjaxTags服務器響應的根元素 -->

<ajax-response>

<!-- AjaxTags服務器響應的內容必須在response裏 -->

<response>

<!-- 下面的item節點分別用於不同的選擇 -->

<item>

<name>Record 1</name>

<value>1</value>

</item>

<item>

<name>Record 2</name>

<value>2</value>

</item>

<item>

<name>Record 3</name>

<value>3</value>

</item>

</response>

</ajax-response>

當然，也可以使用普通文本響應，使用普通文本響應則應該生成如下格式的響應：

#普通文本響應的示範

#每項響應對應一行，每行的前面部分是name，後面是value

#中間以英文逗號隔開

Record 1,1

Record 2,2

Record 3,3

下面介紹的是一個簡單應用，以自動完成爲示範建立一個對應的處理類，處理類以JSP來代替。下面是自動完成的處理JSP頁面代碼。這是一個簡單的級聯菜單應用，用戶一旦選中第一個下拉列表框的某個選項值，下一個下拉列表框將隨之變化。處理類由一個JSP頁面充當，該頁面負責生成一個XML響應，而XML響應則符合上面的格式。下面是該處理器頁面的代碼：

<%@ page contentType="text/html; charset=GBK" language="java" %>

<%@ page import="java.util.*"%>

<%

//獲取請求參數

int country = Integer.parseInt(request.getParameter("country"));

//設置響應的頁面頭

response.setContentType("text/xml; charset=UTF-8");

//控制響應不會在客戶端緩存

response.setHeader("Cache-Control", "no-cache");

//用於控制服務器的響應

List<String> cityList = new ArrayList<String>();

//根據請求參數country來控制服務器響應

switch(country)

{

//對於選擇下拉框的“中國”選項

case 1:

cityList.add("廣州");

cityList.add("深圳");

cityList.add("上海");

break;

//對於選擇下拉框的“美國”選項

case 2:

cityList.add("華盛頓");

cityList.add("紐約");

cityList.add("加州");

break;

//對於選擇下拉框的“日本”選項

case 3:

cityList.add("東京");

cityList.add("大阪");

cityList.add("福岡");

break;

}

%>

<ajax-response>

<response>

<%

//遍歷集合，依次將城市添加到服務器響應的item項裏

for(String city : cityList)

{

%>

<item>

<name><%=city%></name>

<value><%=city%></value>

</item>

<%}%>

</response>

</ajax-response>

該頁面根據請求參數，依次將3個城市添加到cityList集合裏，然後通過如下代碼表示生成的頁面是一個XML文件：

response.setContentType("text/xml; charset=UTF-8");

一旦生成了XML響應，就可以在客戶端JSP頁面使用標籤來生成Ajax響應了。

18.2.2 使用標籤

在客戶端頁面使用AjaxTags標籤是非常簡單而且“非常Java”的，幾乎感覺不到使用了Ajax功能，但該頁面已經具有了Ajax能力。在JSP頁面使用AjaxTags應按如下步驟進行：

在JSP頁面中使用taglib導入AjaxTags標籤庫。

在JSP頁面中導入AjaxTags必需的JavaScript庫。

使用AjaxTags對應的標籤。

使用AjaxTags的select標籤的JSP頁面代碼如下：

<!-- 導入AjaxTags標籤庫 -->

<%@ taglib uri="http://ajaxtags.org/tags/ajax" prefix="ajax" %>

<!-- 設置頁面的內容以及對應的編碼集 -->

<%@ page contentType="text/html;charset=GBK"%>

<html>

<head>

<title>第一個AjaxTags應用</title>

<!-- 在JSP頁面中引入必需的JavaScript庫 -->

<script type="text/javascript" src="js/prototype-1.4.0.js"></script>

<script type="text/javascript" src="js/scriptaculous.js"></script>

<script type="text/javascript" src="js/overlibmws.js"></script>

<script type="text/javascript" src="js/ajaxtags.js"></script>

<!-- 在JSP頁面中引入必需的CSS樣式單 -->

<link type="text/css" rel="stylesheet" href="css/ajaxtags-sample.css" />

</head>

<body>

國家:

<!-- 激發Ajax的源select元素 -->

<select id="country" name="country">

<option value="">選擇一個國家</option>

<option value="1">中國</option>

<option value="2">美國</option>

<option value="3">日本</option>

</select>

城市:

<!-- 顯示Ajax響應的select元素 -->

<select id="city" name="city">

<option value="">城市列表</option>

</select>

<!-- 使用AjaxTags標籤 -->

<ajax:select

baseUrl="res.jsp"

source="country"

target="city"

parameters="country={country}" />

</body>

</html>

在上面的JSP頁面中，除了引入幾個JavaScript代碼庫外，完全不需要任何JavaScript代碼，絲毫感受不到使用Ajax的痕跡，但因爲使用了AjaxTags的select標籤（該標籤用於生成級聯菜單的Ajax應用），該頁面也具有了級聯菜單的功能。圖18.1顯示了使用AjaxTags後該頁面的級聯菜單效果。

圖18.1 使用AjaxTags後級聯菜單的效果

通過在JSP頁面中使用AjaxTags標籤，可以看到AjaxTags標籤使Ajax應用非常簡單。

因爲有些瀏覽器在處理以GET方式發送的請求時存在一些問題，因此這裏修改了ajaxtags.js文件中的請求發送方式。關於請求的發送方式，筆者更傾向於使用POST請求，而AjaxTags默認的請求發送方式是GET。只需打開ajaxtags.js文件，將文件中的method: 'get'替換成method: 'post'，即可改變AjaxTags的請求發送方式。

18.3 處理類的幾種形式

前面已經介紹過了，AjaxTags的處理類並不一定是一個真正的 Java類，它可以有很多形式，甚至於可以是一個非Java文件，唯一的要求是該處理類能返回一個滿足格式的XML文件。除此之外，AjaxTags還提供了幾個特殊的類，這些特殊的類可以簡化處理類的實現。

下面依次介紹處理類的幾種形式，介紹這幾種形式時都以前面介紹的級聯菜單應用爲基礎，應用使用AjaxTags標籤的JSP頁面沒有太大改變，僅改變了ajax:select標籤的baseUrl屬性——這是因爲採用不同處理類時，處理類在服務器端配置的URL不同。