ajax是Asynchronous JavaScript and XML的简称,是一种由javascript通过XmlHttpRequest与服务器交互更新数据的一种异步请求的技术,因为通过ajax你只需传递需要更新的数据,而不是整个页面,能有效的减少页面和服务器端的数据传输,通过javascript更新页面时可以做到页面不刷新,所以ajax很适合用于局部频繁更新的页面。
事实上在ajax 这个概念提出来之前,我们已经在项目中采用了相同的技术,我们大多的做法是通过增加一个隐含的iFrame,通过iFrame向服务器提交请求获取数据和页面进行交互,这完全的实现了ajax的功能,但这种做法很繁琐,实现起来工作量也很大,而且在代码上也会相当的冗余,不怎么优美。而ajax的java 框架dwr使这一过程变得简单,在此特别感谢Getahead IT咨询公司的Joe Walker和他的团队开发出DWR这样神奇的工具并与大家分享它!
现在我们来看看dwr是怎么处理相应的关系的
ajax是通过javascript向服务器发出请求来获取相应的数据的,所以首先,dwr需要你在web部署了一个servlet--DWRServlet,DWRServlet在初始化的时候会去读dwr的发布文件/WEB-INF/dwr.xml
在解释dwr.xml文件之前我们先来看看两个重要的概念,creator和converter这两个从它们的字面意义就很容易看出它们的作用
creator在dwr中主要的职责就是把用户发布在dwr.xml中的class进行实例化,
converter的职责是在接受请求时把客户端的javascript对象转换成服务器端的java对象,通过调用发布的java bean后,在把返回的java的对象转化成javascript的对象给客户端调用
dwr.xml有两个主要的元素:init,arrow
init是用来定义你可以使用的converter和creator它们都有一个id和class的属性:id是一个标志可以在arrow元素中被引用于配置create和convert的,class是具体的类,的其定义样式如下:
<creator id="new" class="uk.ltd.getahead.dwr.create.NewCreator"/>
<converter id="bean" class="uk.ltd.getahead.dwr.convert.BeanConverter"/>
arrow是用于定义你允许dwr创建和转换的java bean,包含两种类型:create和convert。其标签样式如下:
<create creator="new" javascript="planApp">
<param name="class" value="com.ionglobal.erp.app.PlanApp" />
</create>
<convert converter="servlet" match="javax.servlet.ServletConfig"/>
create就是配置哪些类是可以由dwr创建的,其包含creator,javascript,creator也是通过init元素进行定义的,creator还有一个javascript的属性,其定义的值就是在javascript中对应的对象名称
convert就是配置哪些java bean是可以通过dwr转换的,其包含converter,match属性,coverter就是选择转换的converter由init中配置,match就是可以转换的java bean
dwr 已经为你提供了大量的creator和converter如:jsf,none,new,pageflow,spring,script,struts这几种creator,和null,enum,primitive,bignumber,string,array,map,collection, date,dom,dom4j,jdom,xom,servlet,bean,object,hibernate这几种convertor
如果你觉得dwr提供的creator和converter还不能满足你的需求时还可以定制自己的creator和converter把它们部署到dwr.xml中,并把要发布的bean和method放到creators中,
如果你使用dwr的测试页面,你还可以得到一个以你配置的js文件,js文件对你配置的creator和method进行了映射,其中的planApp是你发布的scriptName,get是发布调用的class方法,p0是方法传入的参数,callback是处理判断成功的标志。
planApp.get = function(p0, callback) {
DWREngine._execute(planApp._path, 'planApp', 'get', p0, callback);
}
现在我们看看dwr在页面上怎样跟服务器交互,dwr为我们提供了一个叫engine.js文件中定义一个DWREngine的javascript对象,其主要功能是处理页面和servlet之间的数据传递和转换。当中有三个函数需要特别的留意
1、_execute由界面的javascript调用根据传入的参数进行一系列的初始化,并调用调用endBatch调用_sendData与服务器的servlet进行交互
其传入的参数主要有
path——在/WEB-INF/web.xml配置的url-pattern,
scriptName——/WEB-INF/dwr.xml中creator的javascript的名称,
methodName——creator的方法名,
vararg_params——传进的值和一些控制参数
2、 _sendData dwr通过这个方法对传入的参数生成与servlet进行交互的javascript语句,它做了很多的工作以保证你的提交是真正的有效,比如判断客户的浏览器是支持XMLHttpRequest还是支持ActiveXObject,如果两种方式都不行它还会采取iFrame提交的方式与服务器进行交互获取数据
3、_stateChange DWREngine在判断数据传输完成之后,会根据返回的字符串构造成一个对象
你可以通过修改下面的javascript语句获取返回的javascript对象和你的页面进行交互显示
<
script type
=
'
text/javascript
'
>
var
reply0
=
function
(data)
...
{
if
(data
!=
null
&&
typeof
data
==
'
object
'
) alert(DWRUtil.toDescriptiveString(data,
2
));
else
DWRUtil.setValue(
'
d0
'
, DWRUtil.toDescriptiveString(data,
1
));
}
</
script
>
在util.js文件定义了一个DWRUtil对象,里面主要有对select的处理和table的处理的方法,具体的使用就不在这里说明。