JSP + AjaxAnywhere頁面開發規範

JSP + AjaxAnywhere頁面開發

1. 開發工具

       AJAX框架：AjaxAnywhere，最新版本1.1.0.6 , http://ajaxanywhere.sourceforge.net/

      2. 開發規範

2.1 概述

「JSP + AjaxAnywhere」 的結合開發，是爲了在普通JSP應用中增長AJAX特性，從而改善用戶體驗，提升應用性能。

       AjaxAnywhere能於JSP很好結合。對於一個普通JSP 應用，要使用 AjaxAnywhere框架在一些特定功能中增長AJAX特性，只需對JSP頁面作簡單修改，基本不須要進行Javascript 編程，個別場合只須要按規範添加少許Javascript 代碼。

       AjaxAnywhere + JSP 的結合與 AjaxAnywhere +JSF 的結合，在原理上是一致的, 但在使用上略有不一樣。對於兩者的不一樣，可對照《JSF+Ajax頁面開發規範》，根據具體情形的不一樣，能夠選擇不一樣的組合進行開發。這裏的JSP指的是不包括JSF內容的簡單JSP頁面。

 

2.2 規範

對於一個普通JSP頁面，須要作如下修改。

2.2.1引入ajaxanywhere的taglib

<%@ taglib uri="http://ajaxanywhere.sourceforge.net/" prefix="aa" %>                  

 依照習慣 prefix定義爲aa.。

2.2.2 引入ajaxanywhere客戶端腳本（Javascript）

                    <script src="js/aa/aa.js"></script>                              

 

說明：aa.js 是AjaxAnywhere框架的客戶端腳本庫，對AJAX 特性進行了很好的封裝。開發人員無須直接操做XmlHttpRequest 。

AjaxAnywhere客戶端的核心類爲 AjaxAnywhere ，其每個實例表明一個AJAX處理器。aa.js中定義了一個缺省的AjaxAnywhere實例, 實例名爲ajaxAnywhere， id爲default。

2.2.3 form 屬性的修改

若是要對form提交增長AJAX支持，須要注意。在form標籤中，必須包含action屬性，但能夠爲空，name屬性，method屬性爲post，而後按正常方式書寫表單項目。

例如：

<form action="clientSide.jsp" name="main" method="post">           

2.2.4定義ajax zone（動態更新區域）

      須要單獨刷新的部分在jsp頁面中使用tag:

             <aa:zone name="<zoneName>"> </aa:zone>                          

括住須要更新的範圍。

 例如：

<aa:zone name="zone1">         <font color="white">     <br>Test refresh zone<br>               <%=new Date()%><br>         </font> </aa:zone>

<aa:zone/> 標記是用於在JSP頁面中增長AJAX特性支持，要對JSF組件增長AJAX 特性支持，須要使用 <aa:zoneJSF/> 標記。

name是zone Tag的必填屬性，用於在一個JSP頁面內惟一標識一個動態更新的區域。 一個頁面可定義多個zone區域。

該標識的命名請遵循java變量命名規則。

 

2.2.5 修改表單的提交行爲

表單的提交部分有兩種，根據後臺須要能夠不一樣對待。

1） 經過get 方式發出的請求採用AjaxAnywhere.getAJAX（）方法

例如：<input type="button" value="click me" onclick="ajaxAnywhere.getAJAX();">

2)  經過post方式發出的請求請採用 ajaxAnywhere.submitAJAX() 方法

例如：<input type="button" value="click me" onclick="ajaxAnywhere.submitAJAX();">

 

表單中的「提交」按鈕，type需定義爲 button， ajaxAnywhere.getAJAX（）和ajaxAnywhere.submitAJAX() 會自動處理表單數據的提交。做爲與server交互的所需識別的信息頭，路徑（action）,數據由ajaxanywhere自行包裝。

做爲server端反饋部分，反饋的數據爲xml類型，AjaxAnywhere客戶端處理器最終將替換<aa:zone name="<zoneName>"></aa:zone> 中的所有內容，開發人員不須要進行其餘編碼處理。

 

 

另一種方式是, 從外部給按鈕增長 Ajax異步提交的效果:

<SCRIPT language="javascript" type="text/javascript">              //ajaxAnywhere.formName="myform";  若是頁面只有一個Form此行能夠不要         ajaxAnywhere.substituteFormSubmitFunction(); </SCRIPT>

例如, 爲表單中全部 submit 和image類型按鈕增長Ａjax 特性:

 

例如, 爲表單中特定按鈕增長Ａjax 特性

<SCRIPT language="javascript" type="text/javascript">              ajaxAnywhere.formName="myform";  //若是頁面只有一個Form此行能夠不要         ajaxAnywhere.substituteFormSubmitFunction();                  var ajaxButtons = new Array();         ajaxButtons[0] = document.getElementById("btn_new");         ajaxButtons[1] = document.getElementById("btn_run");                     ajaxAnywhere.substituteSubmitButtonsBehavior(true, ajaxButtons);

2.2.6 服務器端代碼:

2.2.6.1    指定Ajax 刷新區域

          要刷新<aa:zone/> 區域, 必須在服務器端代碼中指定要刷新的區域. 通常有兩種方式: 在JSP中指定, 和在 Java代碼中指定:

       在JSP中指定, 例如:

<%     if(AAUtils.isAjaxRequest(request)) AAUtils.addZonesToRefresh(request,"zoneResList"); %>

 

 

 

通常放在JSP的頂部.

     通常放在JSP的頂部.

    

       在 Java代碼中指定, 一般是Web框架的控制器(Controller)代碼中, Struts中是XXXAction類的方法中, JSF 中是 XXXFace 類的方法中. 例如:

protected ActionForward doCreate(ActionMapping actionMapping,                      ActionForm actionForm, HttpServletRequest request,                      HttpServletResponse response, User user) throws Exception {               ………..                request.setAttribute(WebConstant.PAGE_ATTRIBUTE_MESSAGE, "保存成功！");               request.setAttribute(CMSConstant.BUTTON_SAVE_DISABLED, "TRUE"); // 屏蔽保存按鈕               /* 刷新按鈕區域 */               if (AAUtils.isAjaxRequest(request)) {                      AAUtils.addZonesToRefresh(request, "zoneButton");               }               return (actionMapping.findForward("new"));

 

2.2.6.2