<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    隨筆 - 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框架 閱讀(1362) 評論(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  回復  更多評論
      

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


    網站導航:
     
    主站蜘蛛池模板: 亚洲日韩乱码中文无码蜜桃| 99久久久国产精品免费牛牛 | 亚洲欧美成人一区二区三区| 亚洲AV永久纯肉无码精品动漫 | 精品国产福利尤物免费| 国产人成亚洲第一网站在线播放| 亚洲电影中文字幕| 亚洲综合无码精品一区二区三区 | 久久精品国产亚洲AV天海翼| 亚洲嫩草影院在线观看| 亚洲av无码成人黄网站在线观看| 亚洲国产精品国产自在在线| 日本高清免费网站| 免费无码肉片在线观看| 足恋玩丝袜脚视频免费网站| 久久久国产精品福利免费| 高清永久免费观看| 一级毛片不卡免费看老司机| 美美女高清毛片视频黄的一免费 | 国产h肉在线视频免费观看| 久久一本岛在免费线观看2020| 久久久久久久久久久免费精品| 深夜特黄a级毛片免费播放| 国产偷国产偷亚洲清高APP| 亚洲av永久无码精品网址| 亚洲国产精品成人AV在线| 亚洲人成人网站18禁| 亚洲色成人网站WWW永久四虎| 亚洲av永久无码嘿嘿嘿| 亚洲一级毛片在线播放| 精品亚洲AV无码一区二区| 亚洲国产成a人v在线观看| 亚洲AV无码精品蜜桃| 亚洲xxxx视频| 另类专区另类专区亚洲| 黄色毛片免费在线观看| 久久免费观看视频| 18禁在线无遮挡免费观看网站| 久久久久久AV无码免费网站| 亚洲一级毛片免费看| 成人免费视频一区|