DWR入门_JAVA_编程开发_程序员俱乐部

DWR : direct web remoting
它允许java server和 JavaScript尽可能简单的相互调用

从DWR2.0开始就需要使用commons-logging包

DWR2.0与DWR3.0差别很大

engine.execute(,,,,callback);
一对{}在JS中就表示一个对象，因此JSON——{username:"huangbiao",id:1}就表示一个对象

javabean:可重用的组件
关于map循环
for(var data in map){
?alert(data + "?" + map[data]);
}

?

初级入门
1、和lib文件夹在同一路径级别下添加dwr.xml和web.xml相关的配置信息
2、在JSP页面中尽量按照如下顺序引入，因为大家都是这么弄的，而且JS是顺序加载的，如果不按照这个顺序可能会引起其他问题（简单测试改换顺序是没有影响的），给编写代码中养成良好的习惯
<script type='text/javascript' src='dwr/interface/service.js'> </script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
3、src='dwr/interface/service.js' 中的service就当作是服务器端需要处理的对象——前提是需要在dwr.xml文件中配置
4、dwr.xml配置信息如下
<allow>
?<create creator="new" javascript="service">
? <param name="class" value="hb.server.Test1"></param>
?</create>
</allow>
其中creator表示创建对象的方式是“new”一个新的对象，javascript="service"表示与页面对应的名称是service,因此在页面中需要与src='dwr/interface/service.js'对应，格式是固定的
里面的参数name="class"表示指明这个类的路径 value="hb.server.Test1"表示这个类的全路径
5、web.xml配置信息的描述

<servlet>
?<display-name>DWR Servlet</display-name>
?<servlet-name>dwr-invoker</servlet-name>
?<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
?<init-param>
??<param-name>debug</param-name>
??<param-value>true</param-value>
?</init-param>
</servlet>

<servlet-mapping>
?<servlet-name>dwr-invoker</servlet-name>
?<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
?上述描述方式实际上就是一个servlet，当路径为/dwr/*时就执行这个servlet，因为在JSP页面中在加载js页面的时候就会执行这个方法，例如：
<script type='text/javascript' src='dwr/util.js'></script>，文件中的src='dwr/util.js'与配置的servlet匹配，这样就会触发这个servlet效果
6、这样就能够准确的定位到具体是那个类的哪个方法处理这个请求，然后是否有返回值都能够一目了然
7、如果想深入的了解DWR的解析方式或者对对象、字符串、数组的解析方式可以查看engin.js的方法实现

DWR深入理解
一、JAVA对象与javascript的交互过程
1、服务器端返回一个对象
dwr.xml配置信息如下：

<allow>
?<create creator="new" javascript="returnHTMLData">
??<param name="class" value="hb.server.returnHTMLData"></param>
?</create>
?<convert converter="bean" match="hb.object.Person"></convert>
</allow>
?

告诉服务器hb.object.Person这个类作为javabean对象来处理
服务器端的server代码处理

public class returnHTMLData {
?public Person returnPerson(){
??Person person = new Person();
??person.setId(1);
??person.setPassword("huangbiao");
??person.setUsername("1234");
??return person;
?}
}
?
JSP页面的js代码

function invoke(){
?returnHTMLData.returnPerson(function(data){
??alert(data.id);
??alert(data.password);
??alert(data.username);
?});
}
?2、JS向服务器端发送一个对象

<allow>
?<create creator="new" javascript="getHTMLData">
??<param name="class" value="hb.server.GetHTMLData"></param>
?</create>
?<convert converter="bean" match="hb.object.Person"></convert>
</allow>
?
服务器端的server代码处理

public class GetHTMLData {
?public void printPerson(Person person){
??System.out.println(person.getId());
??System.out.println(person.getPassword());
??System.out.println(person.getUsername());
?}
}
?

JSP页面的js代码
?

function invoke(){
//把JSON组织的代码当作是一个对象传递给server
?var dataJson = {id:2,password:"123456",username:"huangbiao"};
?getHTMLData.printPerson(dataJson);
}
?
二、调用服务器端返回的容器——List、Set、Map
1、List和Set是一类处理方式，对应的都是数组
配置信息如下
<allow>
?<create creator="new" javascript="returnHTMLCollection">
??<param name="class" value="hb.server.returnListData"></param>
?</create>
?<convert converter="bean" match="hb.object.Person"></convert>
</allow>
服务器对应的JAVA代码
public class returnListData {
?public Collection getCollection(){
??Collection<Person> list = new ArrayList<Person>();???????????????????
??for(int i = 0; i < 3; i++){?????????????????????????????????????
???Person person = new Person();???????????????????????????
???person.setId(i);????????????????????????????????????????
???person.setPassword("password" + i);?????????????????????
???person.setUsername("username" + i);?????????????????????
???list.add(person);???????????????????????????????????????
??}???????????????????????????????????????????????????????????????
??return list;????????????????????????????????????????????????????
?}???????????????????????????????????????????????????????????????????????
}
JSP页面的js代码
function invoke(){
?returnHTMLCollection.getCollection(function(data){
??for(var i = 0; i < 3; i++){
???alert(data[i].id);
??}
?});
}

?

数据内容

? data = [????????????????????
?????? {??????????????????????
????????? username:"user1",???
????????? password:"password2"
?????? },?????????????????????
?????? {??????????????????????
????????? username:"user2",???
????????? password:" password2"
?????? }??????????????????????
?? ];?

2、使用Map对应的处理方式
配置信息
<allow>
?<create creator="new" javascript="returnMapData">
??<param name="class" value="hb.server.returnMapData"></param>
?</create>
?<convert converter="bean" match="hb.object.Person"></convert>
</allow>
服务器对应的JAVA代码
public class returnMapData {
?public Map getMapdata(){
??Map map = new HashMap<Integer, Person>();
??for(int i = 0; i < 3; i++){
???Person person = new Person();
???person.setId(i);
???person.setPassword("password" + i);
???person.setUsername("username" + i);???
???map.put(i, person);????????????????????????????????????
??}??????????????????????????????????????????????????????????????
??return map;????????????????????????????????????????????????????
?}??????????????????????????????????????????????????????????????????????
}??????????????????????????????????????????????????????????????????????????????
JSP页面的js代码????????????????????????????????????????????????????
function invoke(){?????????????????????????????????????????????????
?/*?????????????????????????????????????????????????????????
?returnMapData.getMapdata(function(data){???????????????????
??for(var i = 0; i < 3; i++){????????????????????????
???alert(data[i].id);?????????????????????????
??}??????????????????????????????????????????????????
?});????????????????????????????????????????????????????????
?*/?????????????????????????????????????????????????????????
?returnMapData.getMapdata(function(data){???????????????????
??? for(var property in data){???????????????????????
???? var bean = data[property];???????????????????????????
???? alert(bean.username);????????????????????????????????
???? alert(bean.password);
??? }
?});
}

?

data = {????????????????????
??? "key1":{????????????????
??????? username:"user1",???
?????? password:"password2"?
??? },??????????????????????
??? "key2":{????????????????
?????? username:"user2",????
?????? password:" password2"
??? }???????????????????????
};