AjaxAnywhere

Java Opensources for Web Development Part I：
Chapter 3 當 Java 遇到 AJAX
Lession 14 : AjaxAnywhere

如果你對於 taglib 的方式嵌入 JSP 的方式建立 ajax 系統感興趣的話，還可以利用 AjaxAnywhere 這個專案，他額外利用 Filter 與 JavaScript 產生對應的 Ajax 連結，並且可以很容易整合 JSF 的專案。

AjaxAnywhere 的官方網站，下載了相關的 JAR 檔 (ajaxanywhere-1.2.jar) 放到/WEB-INF/lib/ 之中，另外要放置 aa.js 在系統之中，假設放置在 /aa 的目錄之下。

此外，在 web.xml 之中設定 AjaxAnywhere Filter。對應到你所有可能存取 ajax 的 URL-Patterns，例如 struts 就要有 *.do 的對應。

 <filter>
        <filter-name>AjaxAnywhere</filter-name>
        <filter-class>org.ajaxanywhere.AAFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>AjaxAnywhere</filter-name>
        <url-pattern>*.jsp</url-pattern>
    </filter-mapping>
    <filter-mapping>
        <filter-name>AjaxAnywhere</filter-name>
        <url-pattern>*.do</url-pattern> <!-- default Struts mapping -->
    </filter-mapping>
    <filter-mapping>
        <filter-name>AjaxAnywhere</filter-name>
        <url-pattern>*.htm</url-pattern> <!-- other framewords mapping-->
    </filter-mapping>

當我們在 jsp 運用 AjaxAnywhere，要先設定 taglib，並設定為 aa，並且設定存取 aa.js。

<%@ taglib uri="https://ajaxanywhere.sourceforge.net/" prefix="aa" %>
<script src="aa/aa.js"></script>

利用 AAUtils 進行相關的 addZonesToRefresh 作業，如下就是取得 countriesList。

<%
    if (AAUtils.isAjaxRequest(request)){
        AAUtils.addZonesToRefresh(request, "countriesList");
    }
%>

在顯示的部份，利用 只會在這個區域進行非同步更新。

<%
    <aa:zone name="countriesList">
<%
    for (java.util.Iterator iterator = countries.entrySet().iterator(); iterator.hasNext();) {
        Map.Entry entry = (java.util.Map.Entry) iterator.next();
        out.println("<li>"+entry.getValue()+"("+entry.getKey()+")</li>");
    }
%>

    </aa:zone>
%>

最後，我們可以利用 ajaxAnywhere 支援之 Javascript 處理一些網頁上的變化：

<script>
    var zone = document.getElementById("aazone.countriesList");
    zone.style.filter="progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50);  ";
    zone.style.width="150px";
    zone.style.height=zone.offsetHeight;
    zone.filters[0].apply();

    ajaxAnywhere.onBeforeResponseProcessing = function (){
        zone.filters[0].apply();
    };
    ajaxAnywhere.onAfterResponseProcessing= function (){
        zone.filters[0].play();
    };

</script>

相關網址：
1. 關於 aa.js 的文件可參考這裡。
2. 關於 aa Taglib的文件可參考這裡。