Web2.0正如火如荼，其生動(dòng)的界面支持迎來(lái)了B/S應(yīng)用的第二春，從EasyJWeb-0.8版本開(kāi)始，你會(huì)發(fā)現(xiàn)使用EasyJWeb開(kāi)發(fā)Ajax的應(yīng)用會(huì)很方便，本文簡(jiǎn)單介紹EasyJWeb中Ajax的運(yùn)用示例。

　　web腳本遠(yuǎn)程調(diào)用簡(jiǎn)介

　　在基于Web2.0的程序中，在用戶注冊(cè)的時(shí)候，我們希望用戶在輸入完注冊(cè)用戶名后，假如其輸入的用戶已經(jīng)存在，則立即顯示相應(yīng)的提示，這樣的交互會(huì)使得應(yīng)用程序交互界面變得更加友好。要實(shí)現(xiàn)這種功能，可以通過(guò)在用戶輸入完用戶名時(shí)，觸發(fā)一個(gè)事件，這個(gè)事件執(zhí)行一個(gè)程序，自動(dòng)到服務(wù)器端檢測(cè)這個(gè)用戶名是否存在，若用戶已經(jīng)存在，則給予相應(yīng)的提示，讓用戶可以及時(shí)選擇其它用戶名繼續(xù)操作。

　　假如我們?cè)诜?wù)器端有一個(gè)用戶處理組件UserService，這個(gè)組件中有一個(gè)檢測(cè)用戶是否存在的方法boolean checkUserExists(String userName)，這個(gè)方法用來(lái)檢測(cè)用戶名是否存在，若存在則返回true，否則返回false。

　　引入遠(yuǎn)程腳本調(diào)用，則可以直接在注冊(cè)頁(yè)面中使用下面的javascript腳本來(lái)判斷用戶是否存在:

function checkUserExist(username)
{
UserService.checkUserExists(username,function(ret){
if(ret)Element.setValue('userName_Msg',"用戶名已存在,請(qǐng)選擇其它用戶名\!");
})
}							

　　而調(diào)用這個(gè)函數(shù)的是用戶名錄入框的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>
								

　　這種模式即為遠(yuǎn)程腳本調(diào)用。在上面的代碼中，在checkUserExist函數(shù)中，調(diào)用了服務(wù)器端的UserService.checkUserExists(userName)方法，來(lái)判斷用戶名是否存在，若返回的結(jié)果為true，則在id為userName_Msg的span中顯示用戶存在的提示。

　　在EasyJWeb中，內(nèi)置了一個(gè)把服務(wù)器業(yè)務(wù)組件暴露給客戶端的通過(guò)Javascript遠(yuǎn)程調(diào)用的引擎，因此可以像上面的方式輕松在web界面中通過(guò)javascript調(diào)用服務(wù)器組件，實(shí)現(xiàn)特定的功能，這就是我們要說(shuō)的遠(yuǎn)程腳本調(diào)用。

　　EasyJWeb中的Ajax運(yùn)用快速上手

　　從EasyJWeb0.8.0開(kāi)始，提供了一個(gè)關(guān)于EasyJWeb中使用Ajax應(yīng)用的Demo，名為ajaxDemo.html。你只需要下載最新的EasyJWeb源代碼，然后執(zhí)行bin目錄中的build war，即可得到一個(gè)可運(yùn)行的Web應(yīng)用包，把這個(gè)war包拷到Tomcat的webapps目錄下，啟動(dòng)web服務(wù)器。然后在地址欄中輸入http://localhost:8080/easyjf-jweb-0.8.0/ajaxDemo.html,即可看到EasyJWeb中Ajax運(yùn)用的一些效果。大致如下圖所示，詳情參考視頻教程:
?
　　要在EasyJWeb應(yīng)用程序中使用Ajax功能，需要下面幾個(gè)步驟：
　　1、在web.xml文件添加如下的mapping;

?

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

?

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

?

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

?

?　　4、在模板頁(yè)面(或客戶端html頁(yè)面)中通過(guò)下面的方式引用服務(wù)器端支持遠(yuǎn)程腳本訪問(wèn)的業(yè)務(wù)對(duì)象

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

　　5、在模板頁(yè)面(或客戶端html頁(yè)面)中書(shū)寫(xiě)支持無(wú)刷新的遠(yuǎn)程腳本調(diào)用代碼，如下所示：?

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

										　　
小結(jié)
								

?　　EasyJWeb的腳本引擎Ajax是建立在prototype.js的基礎(chǔ)上，服務(wù)器端的調(diào)用處理引擎與EasyJWeb中的容器相結(jié)合，可以通過(guò)AOP來(lái)作安全方面的攔截處理，因此將更加靈活。與DWR等同類Ajax框架實(shí)現(xiàn)相比較，EasyJWeb的Ajax實(shí)現(xiàn)支持對(duì)象關(guān)聯(lián)及級(jí)聯(lián)處理，使用更加簡(jiǎn)單。當(dāng)然，遠(yuǎn)程JS腳本調(diào)用支持只是EasyJWeb中的一個(gè)小小插件，EasyJWeb的Ajax實(shí)現(xiàn)只是一個(gè)普通的EasyJWeb Module(Action)，因此更加容易擴(kuò)展，并能配合EasyJWeb的其它一些特性靈活使用，將會(huì)是輕量級(jí)B/S應(yīng)用開(kāi)發(fā)中一個(gè)不錯(cuò)的選擇。當(dāng)然，在EasyJWeb-0.8版本中Ajax實(shí)現(xiàn)還有不少問(wèn)題，如集合對(duì)象的處理，接口簽名處理等，另外EasyJWeb-0.8版本中，其主框架也還存在著很多問(wèn)題，希望在以后的版本中不斷得到完善。

　　本文只是簡(jiǎn)單的對(duì)EasyJWeb中的Ajax應(yīng)用作了非常粗淺的介紹，關(guān)于更加全面的就用技巧，會(huì)在以后介紹。

　　詳情請(qǐng)關(guān)注EasyJWeb的wiki文檔：http://wiki.easyjf.com/pages/viewpage.action?pageId=90