Login  |  繁體中文
感謝您對「自由軟體鑄造場」的支持與愛護,十多年來「自由軟體鑄造場」受中央研究院支持,並在資訊科學研究所以及資訊科技創新研究中心執行,現已完成階段性的任務。 原網站預計持續維運至 2021年底,網站內容基本上不會再更動。本網站由 Denny Huang 備份封存。
也紀念我們永遠的朋友 李士傑先生(Shih-Chieh Ilya Li)。
Tech Column AjaxAnywhere

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的文件可參考這裡




OSSF Newsletter : 第 75 期 2007 國際企業運算研討會論文徵求

Category: Tech Column