在EasyJWeb中輕鬆開發Ajax運用

　　Web2.0正如火如荼，其生動的介面支援迎來了B/S應用的第二春，從EasyJWeb-0.8版本開始，你會發現使用EasyJWeb開發Ajax的應用會很方便，本文簡單介紹EasyJWeb中Ajax的運用樣本。

　　web指令碼遠程調用簡介

　　在基於Web2.0的程式中，在使用者註冊的時候，我們希望使用者在輸入完註冊使用者名稱後，假如其輸入的使用者已經存在，則立即顯示相應的提示，這樣的互動會使得應用程式互動介面變得更加友好。要實現這種功能，可以通過在使用者輸入完使用者名稱時，觸發一個事件，這個事件執行一個程式，自動到伺服器端檢測這個使用者名稱是否存在，若使用者已經存在，則給予相應的提示，讓使用者可以及時選擇其它使用者名稱繼續操作。

　　假如我們在伺服器端有一個使用者處理組件UserService，這個組件中有一個檢測使用者是否存在的方法boolean checkUserExists(String userName)，這個方法用來檢測使用者名稱是否存在，若存在則返回true，否則返回false。

　　引入遠程指令碼調用，則可以直接在註冊頁面中使用下面的javascript指令碼來判斷使用者是否存在:

function checkUserExist(username)
...{
UserService.checkUserExists(username,function(ret)...{
if(ret)Element.update("userName_Msg","使用者名稱已存在,請選擇其它使用者名稱!");
})
}

　　而調用這個函數的是使用者名稱錄入框的onChange事件，大致如下：

<input name="userName" type="text" id="userName" size="10" onFocus="$('userName_Msg').innerText='';"
onChange="checkUserExist(this.value);">
<span id="userName_Msg" style="color:#0000FF; font-size:12px"></span>

　　這種模式即為遠程指令碼調用。在上面的代碼中，在checkUserExist函數中，調用了伺服器端的UserService.checkUserExists(userName)方法，來判斷使用者名稱是否存在，若返回的結果為true，則在id為userName_Msg的span中顯示使用者存在的提示。

　　在EasyJWeb中，內建了一個把伺服器業務組件暴露給用戶端的通過Javascript遠程調用的引擎，因此可以像上面的方式輕鬆在web介面中通過javascript調用伺服器組件，實現特定的功能，這就是我們要說的遠程指令碼調用。

　　EasyJWeb中的Ajax運用快速上手

　　從EasyJWeb0.8.0開始，提供了一個關於EasyJWeb中使用Ajax應用的Demo，名為ajaxDemo.html。你只需要下載最新的EasyJWeb原始碼，然後執行bin目錄中的build war，即可得到一個可啟動並執行Web應用程式套件，把這個war包拷到Tomcat的webapps目錄下，啟動web伺服器。然後在地址欄中輸入http://localhost:8080/easyjf-jweb-0.8.0/ajaxDemo.html,即可看到EasyJWeb中Ajax運用的一些效果。大致如所示，詳情參考視頻教程:
 
　　要在EasyJWeb應用程式中使用Ajax功能，需要下面幾個步驟：
　　1、在web.xml檔案添加如下的mapping;

 

<servlet-mapping>
  <servlet-name>easyjf</servlet-name>
  <url-pattern>/ejf/*</url-pattern><!--所有/ejf/*樣式的url都交由EasyJWeb來處理-->
 </servlet-mapping>

 

 　　2、在模板頁面(或用戶端html頁面)中加入下面的兩行：

<script type='text/javascript' src="ejf/easyajax/prototype.js"></script>
<script type='text/javascript' src='ejf/easyajax/engine.js'></script> 
 

　　3、在easyjf-web.xml檔案中配置需要暴露給用戶端的業務對象;

 

<ajax>
  <services allowName="*Service" denyName="">   
   <service name="UserService">
   <include method=""></include>
   <exclude method=""></exclude>
   </service>
   <service name="ServerDate">   
   </service>
  </services>
</ajax>

 

 　　4、在模板頁面(或用戶端html頁面)中通過下面的方式引用伺服器端支援遠程指令碼訪問的業務對象

<script type='text/javascript' src='ejf/easyajax/UserService.js'></script>
<script type='text/javascript' src='ejf/easyajax/ServerDate.js'></script>

　　5、在模板頁面(或用戶端html頁面)中書寫支援無重新整理的遠程指令碼調用代碼，如下所示： 

　　<input type="submit" name="Submit2" value="登入" onClick="login();">function login()
{
UserService.login($('userName').value,$('password').value,function(ret)
{
if(ret)alert("登入成功!");
});
}

　　小結

 　　EasyJWeb的指令碼引擎Ajax是建立在prototype.js的基礎上，伺服器端的調用處理引擎與EasyJWeb中的容器相結合，可以通過AOP來作安全方面的攔截處理，因此將更加靈活。與DWR等同類Ajax架構實現相比較，EasyJWeb的Ajax實現支援對象關聯及級聯處理，使用更加簡單。當然，遠程JS指令碼調用支援只是EasyJWeb中的一個小小外掛程式，EasyJWeb的Ajax實現只是一個普通的EasyJWeb Module(Action)，因此更加容易擴充，並能配合EasyJWeb的其它一些特性靈活使用，將會是輕量級B/S應用開發中一個不錯的選擇。當然，在EasyJWeb-0.8版本中Ajax實現還有不少問題，如集合對象的處理，介面簽名處理等，另外EasyJWeb-0.8版本中，其主架構也還存在著很多問題，希望在以後的版本中不斷得到完善。

　　本文只是簡單的對EasyJWeb中的Ajax應用作了非常粗淺的介紹，關於更加全面的就用技巧，會在以後介紹。

詳情請關注EasyJWeb的wiki文檔：http://wiki.easyjf.com/pages/viewpage.action?pageId=90