随笔 - 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框架 阅读(1346) 评论(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  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: