隨筆 - 115  文章 - 481  trackbacks - 0
          <2007年1月>
          31123456
          78910111213
          14151617181920
          21222324252627
          28293031123
          45678910

          常用鏈接

          留言簿(19)

          隨筆檔案(115)

          文章檔案(4)

          新聞檔案(1)

          成員連接

          搜索

          •  

          最新評論

          閱讀排行榜

          評論排行榜

            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;

          ?

          < 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

          posted on 2007-01-26 14:07 簡易java框架 閱讀(1364) 評論(3)  編輯  收藏

          FeedBack:
          # re: 在EasyJWeb中輕松開發Ajax運用 [未登錄] 2007-01-28 12:59 Michael Chen
          如果新特性是通過集成第三方的產品實現的,請注明。

          另外不要把別人的js命名空間簡單的從DWR換成EasyXXX。這是對別人代碼的不尊重。  回復  更多評論
            
          # re: 在EasyJWeb中輕松開發Ajax運用 [未登錄] 2007-01-28 20:10 大峽
          @Michael Chen

           請注意看完全文,再作評價!“EasyJWeb的腳本引擎Ajax是建立在prototype.js的基礎上”。當然,如果覺得EasyJWeb有對別人代碼不尊重的地方,請Michael同學可以看看這個項目源碼,自然便知。  回復  更多評論
            
          # re: 在EasyJWeb中輕松開發Ajax運用  2007-01-30 07:33 qwer
          good  回復  更多評論
            

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 科尔| 贡山| 昭通市| 西乡县| 屯留县| 泌阳县| 耒阳市| 荆州市| 于都县| 建德市| 红桥区| 海口市| 苍南县| 桓仁| 康定县| 温州市| 德钦县| 镇平县| 漳平市| 涞水县| 广州市| 城步| 伊金霍洛旗| 松滋市| 昌都县| 布尔津县| 福清市| 眉山市| 美姑县| 宝坻区| 论坛| 潞城市| 晋州市| 砚山县| 左贡县| 隆安县| 泗洪县| 二手房| 九寨沟县| 汨罗市| 扎兰屯市|