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

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


    網站導航:
     
    主站蜘蛛池模板: 大地资源免费更新在线播放| 日本一道本不卡免费| 免费人成视频在线| 亚洲精品第一国产综合野| 真人做人试看60分钟免费视频| 亚洲av无码乱码国产精品fc2| 三年片在线观看免费西瓜视频| 在线观看亚洲天天一三视| 三级黄色片免费看| 亚洲va无码手机在线电影| 午夜精品一区二区三区免费视频| 亚洲视频在线免费看| 国产大片线上免费观看 | 亚洲AV成人片色在线观看 | 久久WWW免费人成—看片| 亚洲中文字幕无码专区| 中文字幕免费在线观看动作大片| 国产精品亚洲а∨无码播放| 日韩精品人妻系列无码专区免费| 亚洲码在线中文在线观看| 日韩吃奶摸下AA片免费观看 | 精品久久久久久无码免费| 亚洲大尺度无码无码专区| 久久精品国产免费观看| 亚洲а∨精品天堂在线| 亚洲国产精品日韩专区AV| 日韩精品在线免费观看| 亚洲一区二区三区久久| 免费一级毛片正在播放| 东方aⅴ免费观看久久av| 亚洲中文字幕在线无码一区二区 | 国产精品亚洲综合专区片高清久久久 | 亚洲综合国产精品第一页 | 国产久爱免费精品视频| 亚洲AV日韩AV天堂久久| 好吊妞998视频免费观看在线| 一道本不卡免费视频| 亚洲国产精品综合一区在线| 丁香亚洲综合五月天婷婷| 精品无码AV无码免费专区| 综合偷自拍亚洲乱中文字幕|