DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,
可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样。
我们这里做一个客户端拿到一个List<User>这样的显示案例,当前基本数据类型
相对简单了,这个学会就没问题了!
先来看一下项目的整体结构:
开始了!
第一步:新建一个java项目DwrDemo
第二步:
写好实体类UserInfo
/**
* 用户实体类
* @author jelly
*
*/
public class UserInfo {
private Integer id; //用户id
private String name; //用户姓名
private int age; //用户年龄
public UserInfo() {
}
public UserInfo(Integer id, String name, int age) {
this.id = id;
this.name = name;
this.age = age;
}
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}
第三步:
这里没有用到操作数据库,所以模拟一个Dao的实现
/** * 模拟DAO * @author jelly * */ public class UserDao { /** * 得到所有用户信息 * 这里因为没有连接数据库,所以对分页暂不处理 * @return 用户列表 */ public List<UserInfo> queryUser(){ List<UserInfo> list = new ArrayList<UserInfo>(); for (int i = 1; i < 6; i++) { UserInfo u = new UserInfo(); u.setId(i); u.setName("用户:"+i); u.setAge((int)Math.random()*i); list.add(u); } return list; } }
然后将spring的必须jar包导入,并啊applicationContext.xml文件放在项目src目录下。
接下来我们开始配置web.xml
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="2.5" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <!-- 配置DWR --> <servlet> <servlet-name>dwr</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</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> <!-- spring配置 --> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <context-param> <param-name>contextConfigLocation</param-name> <param-value>classpath:applicationContext.xml</param-value> </context-param> <welcome-file-list> <welcome-file>/index.jsp</welcome-file> </welcome-file-list> </web-app>
dwr的核心也是一个servlet;给他一个初始化参数debug为true,我们可以进行调试。
这里的配置就不多做解释了,完事吧dwr.xml文件copy到WebRoot/WEB-INF这里。
来看一下具体的参数配置
<?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> <!-- 定义对外访问的类 要判断后台是否已经写好,可以到测试也看一看 输入http://localhost:8080/DwrDemo/dwr 类的实例调用该类的方法 include表示只允许调用某些方法, exclude表示除了某方法之外其他 --> <create javascript="UserManage" creator="spring"> <!-- 这里我们用spring,所以param里面写的是beanName --> <param name="beanName" value="userDao" /> <!-- 这是当前类对外暴露的方法 --> <include method="queryUser"></include> </create> <!-- 转换器:dwr框架根据转换器的配置自动转换成json对象 bean 以javabean的方式转换 所有参数如下: 自定义 Converters(转换) Bean/Object Converter Array/Collection Converter Dom Objects Enum Converter --> <convert converter="bean" match="com.jelly8090.entity.UserInfo"> <!-- 这里可以加参数,如果没有加就会把该类的所有属性转为json对象,如果 加了参数表示只会转换value包含的属性值到json对象,要转换的各属性用逗号隔开 <param name="include" value="id,name"/> --> </convert> <convert converter="exception" match="java.lang.RuntimeException" /> <!-- 非spring的创建方式 <create javascript="UserManage" creator="new"> 参数name写class,值是完全限定类名 <param name="class" value="com.jelly8090.dao.UserDao"></param> <include method="queryUser"></include> </create> --> </allow> </dwr>
参数大意已经解释了,这一步没错的话我们就可以把项目部署到服务器上进行一个测试。
访问http://localhost:8080/DwrDemo/dwr/ 或http://127.0.0.1:8080/DwrDemo/dwr/
看到了这个UserManage是我们在dwr.xml中配置的javascript属性。
点进去看看,
这里看到一个queryUser方法,这是我们在dwr.xml中暴露出来的
因为这个是没有参数的所以不用输入,如果有参数的话输入参数,
然后点Execute按钮进行测试,
没错,返回的是json对象类型,大家应该能看懂。
上面显示的<script>代码一会我们要复制在jsp页面里。
然后调用远程对象
对于公开的每个类,DWR 动态地生成包含在 Web 页面中的 JavaScript。生成的 JavaScript 包含存根函数,代表 Java 类对应的方法。Java 方法与对应的 JavaScript 函数之间的映射规则为 JavaScriptName.methodName(methodParams ..., callBack),其中 JavaScriptName 是 creator 属性指定浏览器中被创造出来的对象名字,methodName 是 Java 的方法名,methodParams 代表 Java 方法的参数,最后的 callBack 是 Java 方法返回后要回调的 JavaScript 函数。清单 8 是在 jsp 页面中使用 DWR 创建的 javascript 对象调用公开的方法。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Dwr Demo</title>
<!-- 这2个文件是必须的 -->
<script type='text/javascript' src='/DwrDemo/dwr/engine.js'></script>
<script type='text/javascript' src='/DwrDemo/dwr/interface/UserManage.js'></script>
<!-- 该js是dwr的工具库,可以不导入 -->
<script type='text/javascript' src='/DwrDemo/dwr/util.js'></script>
<script type="text/javascript">
//远程调用服务器的方法,并指定回调函数处理
//这里写的是匿名函数
<%--
UserManage.queryUser(function(result){
alert(result);
});
也可以写成非匿名函数调用
UserManage.queryUser(quser);
他会有一个返回值就是我们返回拿到的list
直接输出的话都是object,我们可以通过对象的属性查看具体值
--%>
UserManage.queryUser(quser);
//这里的result是我们返回的list集合
function quser(result){
//来遍历一下他,x是每个user对象的索引,后面你懂的啦~
for(var x in result){
alert("id:"+result[x].id+",姓名:"+result[x].name+",年龄:"+result[x].age);
}
}
</script>
</head>
<body>
</body>
</html>
DWR 会自动根据 UserManager 类帮我们生成了 userManager.js 文件。engine.js 是用来转换动态生成接口的 javascript 函数调用,util.js 包含了一些工具函数,让页面对 javascript 的调用更加方便。今天就讲这么多,欢迎大家访问我的博客。