手机端小强原创文章,java小强个人博客站点
当前位置: 首页 >> 开源 >> DWR ajax 实际应用讲解

DWR ajax 实际应用讲解

33930 开源 | 2014-6-17

首先要增加相应的JAR包,这里我们需要的包并不多。
dwr.jar,commons-logging-1.0.4.jar,log4j-1.2.12.jar。注意我这里使用的版本是dwr-2.0.5。

 

其实要在web.xml中配置dwr。dwr控制器会拦截请求完成相应的处理。

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
 <welcome-file-list>
  <welcome-file>index.jsp</welcome-file>
 </welcome-file-list>
 <servlet>
  <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>
</web-app>

 

增加dwr配置文件dwr.xml,定义那些类来提供方法,已经在页面调用时会用到的名字。我这里的配置文件是包含了所有示例配置的文件。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" 
   "http://getahead.org/dwr/dwr20.dtd">
<dwr>
 <allow>
  <!--  -->
  <create creator="new" javascript="noorder">
   <param name="class" value="org.dwr.me.MeNoOrder" />
  </create>
  <!-- HAVER RETURN -->
  <create creator="new" javascript="str">
   <param name="class" value="org.dwr.re.BackStr" />
  </create>
  <create creator="new" javascript="arr">
   <param name="class" value="org.dwr.re.BackArray" />
  </create>
  <create creator="new" javascript="douarr">
   <param name="class" value="org.dwr.re.BackDoubleArray" />
  </create>
  <create creator="new" javascript="list">
   <param name="class" value="org.dwr.re.BackList" />
  </create>
  <create creator="new" javascript="set">
   <param name="class" value="org.dwr.re.BackSet" />
  </create>
  <create creator="new" javascript="map">
   <param name="class" value="org.dwr.re.BackMap" />
  </create>
  <create creator="new" javascript="obj">
   <param name="class" value="org.dwr.re.BackObj" />
  </create>
  <!-- 对象转换器 -->
  <convert match="org.dwr.re.Users" converter="bean">
   <param name="include" value="name,pass"></param>
  </convert>
 </allow>
</dwr>

 

下面是一个简单示例,传递参数接收返回值。以下是需要的类代码

package org.dwr.re;
/**
 * 测试 接收参数返回字符串
 * @author 崔素强
 */
public class BackStr { 
 public String helloWord(String name){
  return "Hello " + name + "!";
 }
}

 

然后在dwr配置文件中定义这个类和名字,str将是将来在前台用到的名字。creator是new,我们也可以结合spring使用,这里就不再介绍。

<create creator="new" javascript="str">
 <param name="class" value="org.dwr.re.BackStr" />
</create>

 

测试这个请求是否可用,访问 http://localhost:8800/dwr/dwr/index.html 里面包含所有可以使用的请求。点击一个进去,点击str,helloWord是可以用的方法,输入参数点击调用。
我们也可以在这个地方同时点击其他返回了java数据对象的测试,可以弹出返回的内容。

 

在jsp中应用展现效果
页面调用时要引用几个js文件,分别是

<script type='text/javascript' src='/dwr/dwr/util.js'></script>
<script type='text/javascript' src='/dwr/dwr/interface/str.js'></script>
<script type='text/javascript' src='/dwr/dwr/engine.js'></script>

str.js就是在配置文件中定义的名字。

看效果

<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">    
    <title>THE FIRST DWR TEST FOR STR</title>
    <script type='text/javascript' src='/dwr/dwr/util.js'></script>
    <script type='text/javascript' src='/dwr/dwr/interface/str.js'></script>
    <script type='text/javascript' src='/dwr/dwr/engine.js'></script>
    <script type="text/javascript">
    function callback(){
     var name=document.getElementById('name').value;
     str.helloWord(name,function back(value){
      alert(value);
     });
    }
    </script>
 <meta http-equiv="pragma" content="no-cache">
 <meta http-equiv="cache-control" content="no-cache">
 <meta http-equiv="expires" content="0">
  </head>  
  <body>
    <input type="text" id="name" />
    <input type="button" onclick="callback();" value="ClickMe" />
  </body>
</html>

在实际应用中,我们代码中可能传递回去的是List,Map,数组,Set,也可能是多维数组,也可能是对象。对于除对象之外的应用,请参考工程里面的代码。

 

代码中后台直接返回Java中的各种数据对象,主要看一下前台如何解析即可。
关于返回对象,我们首先定义一个对象实体。在后台中直接返回这个对象。重点是我们要在dwr配置中增加一个对象转换器,具体配置内容是

package org.dwr.re;
/**
 * 测试 实体对象
 * @author 崔素强
 */
public class Users { 
 private String name; 
 private String pass;
 public String getName() {
  return name;
 }
 public void setName(String name) {
  this.name = name;
 }
 public String getPass() {
  return pass;
 }
 public void setPass(String pass) {
  this.pass = pass;
 }
}

dwr.xml中转换器的配置

<!-- 对象转换器 -->
<convert match="org.dwr.re.Users" converter="bean">
 <param name="include" value="name,pass"></param>
</convert>

然后在js中解析,其实js中也可以创建对象,按照解析js对象的方式解析返回的内容即可。

<script type="text/javascript">
function callback(){
 //javascript中创建对象
 //var users=new objFun($('name').value,$('pass').value);
 var name=$('name').value;
 var pass=$('pass').value;
 //直接创建对象
 var users={name:name,pass:pass};
 obj.userLogin(users,function(data){
  //解析javascript中的对象
  $('name').value=data.name;
  $('pass').value=data.pass;
 });
}
//使用函数创建对象
function objFun(name,pass){
 //javascript中对象赋值
 this.name=name;
 this.pass=pass;
}
</script>

 

另外如果在页面中定义了两个方法,那么调用有先后顺序吗?meNoOrder.jsp,MeNoOrder.java演示调用两个方法的顺序,只要在页面调用时指定是否顺序调用即可。

<script type="text/javascript">
function noorderme(){
 // 方法调用无顺序,该属性设置按照方法顺序执行
 dwr.engine.setAsync=false;
 noorder.method1(
  function(data){
   alert(data);
  }
 );
 noorder.method2(
  function(data){
   alert(data);
  }
 );
}
</script>

 

通过弹出窗口的顺序,我们可以判断是否是有序的。

 

示例工程下载

 

u=3796014428,50981721&fm=58.jpg

推荐您阅读更多有关于“ ajax dwr 异步 转换器 map list ”的文章

上一篇:InputStream,int,shot,long与byte数组之间的互相转换 下一篇:pushlet 之 Pushlet使用手把手实例

猜你喜欢

发表评论:

个人资料
blogger

java小强
没有思考,人生的路会越走越难!

搜索
分类
最新微语
  • 车也学了,年也过了,生日也过了,村里的会也赶了,这次,是真的,年过去了。不过我没回京,也没有在家找工作,我在等什么吗?反正现在正合了我这个懒人的要求,不过,我歇不住,思考下人生。

    2018-03-20 00:11

  • 8月1日,我已离开奋斗多年的北京。不知道是暂时的离开,还是永久的离别,反正已经离职在家,告别每日上班,每天苦累的煎熬,过一段属于自己的生活。以前是专职工作,现在专职生活。

    2017-08-18 12:47

  • 又弄完一个项目,累成狗,但是感觉又进步不少,除了很多坑已经踩过,做起来也是轻车熟路。同时也认识到,程序不在于你多牛逼,而是在乎你的细节把控度,而细节的关注,是一个优秀程序员必须要注意的。另外,要相信自己,勇敢向前,没人生下来就是成功的,而且,成功的路,比成功本身更重要。

    2017-06-30 09:46

  • 今日北京再次沙尘暴来袭,吃了几年细粮,终于能来口粗粮了,不过大早上看见这场景,还是吓我一跳,不过随后就平静了,毕竟是老朋友了。进公司又发现一股烤糊的味道,真是祸不单行啊,例外都是污染。发了两个口罩,开启保护模式。

    2017-05-04 10:16

  • 今天同学问我,最近还在写代码吗?我想了想,这个问题怎么回答呢,我好像确实很长时间,虽然写了一些,但是主要内容已经不是写代码了。然后再想想,自己也7年多了,这么多年了,我收获了什么,我的目标到底是什么。眼看就奔三了,人生啊,开启感叹模式。

    2017-03-30 22:52

  • 更多»

最新文章
热门文章
随机文章