dwr3的一些介绍
DWR入门笔记 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"? ? ? } ? ? ? ? ? ? ? ? ? ? ? ? };