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.setValue('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;
?
? 2、在模板頁面(或客戶端html頁面)中加入下面的兩行:
? 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