|
该帖已经被评为良好帖
|
|
|---|---|
| 作者 | 正文 |
|
最后更新时间:2006-12-26
Email:javafish@sunxin.org
DWR是作为远程调用的ajax框架,将服务端的java类,方法和浏览器的javascript的类,方法对应起来。现在官方最新的版本是DWR2.0,可以在http://getahead.ltd.uk/dwr/download下载到。 我们真对DWR2.0做一些例子讲解一下它的特性: Hello World: 新建一个web项目DWRStudy,在项目中构建路径中加入dwr.jar, 新建类Hello如下: package org.li.dwr;
package org.li.dwr;
import java.util.Date;
public class Hello
{
public String getHelloWorld()
{
return "现在的时间为:"+new Date();
}
}
在WEB-INF目录下新建dwr.xml文件: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd"> <dwr> <allow> <!-- javascript的对象是jshello,create="new"是DWR自己创建类 --> <create javascript="jshello" creator="new" scope="application"> <param name="class" value="org.li.dwr.Hello"></param> </create> </allow> </dwr> 在WebRoot目录里新建hello.js
function load()//载入的时候调用
{
var jbutton = document.getElementById("jbutton");
jbutton.onclick=function(event)//注册按钮点击事件
{
jbClick();
};
}
function jbClick()//按钮点击事件
{
jshello.getHelloWorld(callback);//没有参数传递,只传递回调函数就行
}
function callback(msg)//回调函数
{
DWRUtil.setValue('jdiv',msg);
}
在WebRoot目录里新建HelloWorld.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>HelloWorld.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='dwr/interface/jshello.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type="text/javascript" src="hello.js"></script>
</head>
<body>
<input id="jbutton" type="button" value="得到Hello World"/>
<div id="jdiv"></div>
<script>load()</script>
</body>
</html>
在web.xml中加入一个dwr的servlet: <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> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> 在运行一下服务器在浏览器里输入http://localhost:8080/DWRStudy/HelloWorld.html,然后点一下按钮下面就会显示服务端的系统时间了,而浏览器页面并没有被刷新。 下面解释一下: 1. 新建的Hello类中有一个getHelloWorld方法这个方法就是作为远程调用的服务端方法,这个Hello类也就是远程调用的类。方法的返回值为服务端当前的时间 2. dwr.xml是DWR用来配置服务端类和浏览器端javascript类之间的映射。可以下载dtd看一下,在<allow></allow>里类配置映射类如:<create javascript="jshello" creator="new" scope="application"> <param name="class" value="org.li.dwr.Hello"></param> </create> javascript="jshello"是在浏览器端的javascript的映射的类名,(不要用javascript里的关键字)creator="new"是表示这个类是dwr自己创建的,如果creator="new"那么就必须有下面的<param name=”class” value=”类的全路径”></param>,creator还可为spring(与spring集成的时候),script(与apache的一个框架BSF集成的时候用),后来又加入了struts,jsf,ejb3.现在是个HelloWorld让大家体验一下,具体后面会细讲。最后的scope=”application”是说这个pojo类的范围,和jsp是一样的。 3. 创建hello.js和HelloWorld.html都是看自己是怎么发挥了,注意的是在HelloWorld.html中导入js文件的时候注意顺序和路径命名规律,自己发挥的这个hello.js一定放在后面,因为要调用其它js文件中的函数。由于在HelloWorld.html里写入了<script>load()</script>所以在html加载的时候会调用hello.js里的load方法(注意这几个js文件里的函数最好不要重名)在load里面做的事情就是注册一下id为jbutton的按钮的点击事件。当我们点击id为jbutton的按钮的时候就开始用与服务器端的类相对应的javascript类了(jshello),直接调用jshello类的getHelloWorld方法,可以向函数传递参数,不过要在最后加一个回调函数。而我们的服务端的类没有参数就直接传回调函数了。在回调函数的形参msg是服务端Hello类中getHelloWorld方法返回值。在回调函数里面调用了DWR的工具类DWRUtil类的setValue方法设置id为jdiv的值。另外我们把doucment.getElementById(“jbutton”);换与$(“jbutton”)也可以得到同样的效果,这就有点像prototype了。 4. 在web.xml里加入DWRServlet的配置一是为了远程调用,二是自动生成了<script type='text/javascript' src='dwr/interface/jshello.js'></script> <script type='text/javascript' src='dwr/engine.js'></script> <script type='text/javascript' src='dwr/util.js'></script>文件。 上个HelloWorld例子只是返回了一个字符串,当然我们显示字符串很容易,可是如果返回一个对象怎么办呢?,DWR为我们将java类和javascript的DOM对象,不过这得需要我们在dwr.xml里配置。 再看一个综合的例子: 新建类User
package org.li.dwr;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Properties;
public class User
{
private String welcome;
private String username;
private String address;
private List<Book> books;
private int age;
public String getAddress()
{
return address;
}
public void setAddress(String address)
{
this.address = address;
}
public int getAge()
{
return age;
}
public void setAge(int age)
{
this.age = age;
}
public String getUsername()
{
return username;
}
public void setUsername(String username)
{
this.username = username;
}
public String getWelcome()
{
return welcome;
}
public void setWelcome(String welcome)
{
this.welcome = welcome;
}
public List<Book> getBooks()
{
return books;
}
public void setBooks(List<Book> books)
{
this.books = books;
}
public List<Book> getBook()
{
this.books = new ArrayList<Book>();
Book javaBook = new Book();
Book vcBook = new Book();
javaBook.setAuthor("孙鑫");
vcBook.setAuthor("孙鑫");
javaBook.setName("java Web开发详解");
vcBook.setName("vc++深入详解");
this.books.add(javaBook);
this.books.add(vcBook);
return this.books;
}
public User getUser(String welcome)
{
this.welcome=welcome;
try
{
FileInputStream fis = new FileInputStream("D:\\workspace\\DWRStudy\\src\\user.properties");
Properties pp = new Properties();
pp.load(fis);
this.username=pp.getProperty("username");
this.age=Integer.valueOf(pp.getProperty("age"));
this.address=pp.getProperty("address");
fis.close();
}
catch (FileNotFoundException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
catch (IOException e)
{
// TODO Auto-generated catch block
e.printStackTrace();
}
return this;
}
}
新建Book类: package org.li.dwr;
public class Book
{
private String name;
private String author;
public String getAuthor()
{
return author;
}
public void setAuthor(String author)
{
this.author = author;
}
public String getName()
{
return name;
}
public void setName(String name)
{
this.name = name;
}
}
新建DWRLog类
package org.li.dwr.log;
import java.lang.reflect.Method;
import org.directwebremoting.AjaxFilterChain;
public class DWRLog implements org.directwebremoting.AjaxFilter
{
public Object doFilter(Object obj, Method method, Object[] params, AjaxFilterChain chain) throws Exception
{
System.out.println("过滤器Log输出:..对象:"+obj.getClass().getName()+"方法:"+method.getName());
return chain.doFilter(obj, method,params);
}
}
新建D:\\workspace\\DWRStudy\\src\\user.properties username=javafish age=21 address=北京市海淀区 然后在dwr.xml里加入 <create javascript="jsuser" creator="new"> <param name="class" value="org.li.dwr.User"></param> <!-- 过滤允许调用的方法 --> <include method="getUser"/> <include method="getBook"/> <!-- 配置自己的过滤器 --> <filter class="org.li.dwr.log.DWRLog"></filter> </create> <!-- 需要转换的类 --> <convert match="org.li.dwr.User" converter="bean"></convert> <convert match="org.li.dwr.Book" converter="bean"></convert> 新建UserInfo.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>UserInfo.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='dwr/interface/jsuser.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type="text/javascript" src="userInfo.js"></script>
</head>
<body>
请输入你的名字:
<input id="name" type="text"/>
<input id="jbutton" type="button" value="得到javafish的信息"/>
<input id="sbutton" type="button" value="得到javafish的书"/>
<div id="result"></div>
<script>load()</script>
</body>
</html>
新建userInfo.js function load()
{
var jbutton = $("jbutton");
jbutton.onclick=function(event)
{
bOnClick();
};
var sbutton = $("sbutton");
sbutton.onclick=function(event)
{
sOnClick();
};
}
function bOnClick()
{
jsuser.getUser($("name").value,callback);
}
function callback(msg)
{
var user = msg;
DWRUtil.setValue('result',"欢迎你!"+user.welcome+" 姓名:"+user.username+",年龄:"+user.age+",住址:"+user.address+user.books[0].author);
}
function sOnClick()
{
jsuser.getBook(callbackBooks);
}
function callbackBooks(msg)
{
alert(msg);
DWRUtil.setValue('result',msg);
}
运行服务器输入http://localhost:8080/DWRStudy/UserInfo.html,可看到运行结果 这个例子需要解释的就是dwr.xml了 在这里用到了两个java类,User、Book,方法呢就是User.getUser和User.getBook,而Book类呢由于我们没有在javascript中调用,所以就不用配置Book的create了。 大家可能会奇怪为什么会多出来两个<convert match="org.li.dwr.User" converter="bean"></convert> <convert match="org.li.dwr.Book" converter="bean"></convert> 呢,是因为在调用getBook和getUser的时候会返回给javascript有关User和Book的对象或数据,这里的用<convert match=”类” converter=”bean”/>做一下转换,否则javascript将不会得到有效的数据。 下面讨论一下DWR的安全性,由于我们将javaBean整体都对外暴露了,所以说会有非常多的安全问题,真对这些DWR也作了一些的措施就是上面例子中dwr.xml的配置: <include method="getUser"/> <include method="getBook"/> <filter class="org.li.dwr.log.DWRLog"></filter> 这样配置的话就只暴露了User类的两个方法getUser,getBook。就相对安全多了,相反还有<exclude>的配置它们是类似的。对于安全我们也可以用DWR的过滤器来实现,这里我用过滤器实现的是一个日志记录。过滤器类只需要实现AjaxFilter接口就可以了,不过注意的是这个过滤器不是HttpServelt的过滤器而是DWR自己内部实现的(有兴趣可以查看一下源代码)。 真对DWR的安全性上来说,官方也不敢保证,官方只是说自己可以看一下源代码因地施宜。 不过DWR可以和acegi集成,让acegi来管理安全问题。由于acegi我还没有完全搞定关于DWR和acegi的集成,先放一放日后补充。 下面对DWR.xml的配置具体补充一下: 首先是<init></init>里面有<converter>和<create>是配置在初始化的时候需要创建和转化的类。 然后是<allow></allow>里面有<converter>和<create>这个地方就是正式的配置了,creator里有param,filter,include,exclude,auth,除了auth我们都接触过了,而auth是集成J2EE的安全认证用的,这个可能和acegi的集成有关吧(?)。<converter>呢,它的converter有很多 ? Array Converter ? Bean and Object Converters ? Collection Converter ? Enum Converter ? DOM Objects 这些都是转换的时候配置的 还有就是<signatures></signatures>的配置了,申明一些不java用反射不可得到的参数类型。 我在上面例子上用的getBook来本来想用signatures实现List<Book>的转换可是没有成功(不用配置就可以) 主要是真对jdk1.4以下的,我本机用的是jdk6,所以屡试不爽最后在官方DWR2的特性中看到如果你用的是DWR2和JDK5以上的话就不用配置了DWR会自动转换。 下面讲一下DWR与Spring的集成: 还是上面那个例子用Spring搞定大部分和上面一样 新建类User(包换了) package org.li.dwr.spring;
import java.util.List;
import org.li.dwr.Book;
public class User
{
private String welcome;
private String username;
private String address;
private List<Book> books;
private int age;
public String getAddress()
{
return address;
}
public void setAddress(String address)
{
this.address = address;
}
public int getAge()
{
return age;
}
public void setAge(int age)
{
this.age = age;
}
public String getUsername()
{
return username;
}
public void setUsername(String username)
{
this.username = username;
}
public String getWelcome()
{
return welcome;
}
public void setWelcome(String welcome)
{
this.welcome = welcome;
}
public List<Book> getBooks()
{
return books;
}
public void setBooks(List<Book> books)
{
this.books = books;
}
public User getUser(String welcome)
{
this.welcome=welcome;
return this;
}
}
Book还是以前那个 在src下新建application.xml文件(spring的配置文件) <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" "http://www.springframework.org/dtd/spring-beans.dtd"> <beans> <bean id="user" class="org.li.dwr.spring.User"> <property name="username"> <value>javafish</value> </property> <property name="age"> <value>21</value> </property> <property name="address"> <value>北京市海淀区</value> </property> </bean> </beans> 在dwr.xml加入: <create javascript="springUser" creator="spring"> <param name="beanName" value="user"></param> <!-- 指定Spring配置文件的位置,如果没设置DWR会根据web.xml找到主配置文件,不过速度上就慢了 --> <param name="location" value="applicationContext.xml"></param> </create><convert match="org.li.dwr.spring.User" converter="bean"></convert> 新建springUserInfo.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>UserInfo.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='dwr/interface/springUser.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type="text/javascript" src="springuserInfo.js"></script>
</head>
<body>
请输入你的名字:
<input id="name" type="text"/>
<input id="jbutton" type="button" value="得到javafish(spring)的信息"/>
<div id="result"></div>
<script>load()</script>
</body>
</html>
新建springUserInfo.js function load()
{
var jbutton = $("jbutton");
jbutton.onclick=function(event)
{
bOnClick();
};
var sbutton = $("sbutton");
sbutton.onclick=function(event)
{
sOnClick();
};
}
function bOnClick()
{
springUser.getUser($("name").value,callback);
}
function callback(msg)
{
var user = msg;
DWRUtil.setValue('result',"欢迎你!"+user.welcome+" 姓名:"+user.username+",年龄:"+user.age+",住址:"+user.address);
}
在web.xml中加入 <context-param> <param-name>contextConfigLocation</param-name> <param-value>/WEB-INF/classes/applicationContext.xml</param-value> </context-param> <listener> <listener-class> org.springframework.web.context.ContextLoaderListener </listener-class> </listener> 运行服务器输入http://localhost:8080/DWRStudy/springUserInfo.html,可以看到运行结果 主要的区别是dwr.xml的配置,需要在creator=spring,然后里面的<param>的name用beanName,值是spring的配置文件里的bean的id。Name=location是指定spring的配置文件的路径(如果不指定DWR可以根据web.xml自动找到spring的主配置文件)。 DWR的Annotation配置 还是上面spring那个例子的功能再来一遍(new 的配置太简单),这样的话项目中的dwr.xml对于这个例子就没有作用了 新建User类(包名换了)
package org.li.dwr.spring.annotation;
import java.util.List;
import org.directwebremoting.annotations.Convert;
import org.directwebremoting.annotations.Create;
import org.directwebremoting.annotations.Param;
import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.annotations.RemoteProperty;
import org.directwebremoting.convert.BeanConverter;
import org.directwebremoting.spring.SpringCreator;
import org.li.dwr.Book;
@Create(creator=SpringCreator.class,name="anspringuser",creatorParams={@Param(name="beanName",value="anuser"),@Param(name="location",value="applicationContext.xml")})
@Convert(converter=BeanConverter.class)
public class User
{
private String welcome;
private String username;
@RemoteProperty
private String address;
private List<Book> books;
private int age;
public String getAddress()
{
return address;
}
public void setAddress(String address)
{
this.address = address;
}
public int getAge()
{
return age;
}
public void setAge(int age)
{
this.age = age;
}
public String getUsername()
{
return username;
}
public void setUsername(String username)
{
this.username = username;
}
public String getWelcome()
{
return welcome;
}
public void setWelcome(String welcome)
{
this.welcome = welcome;
}
public List<Book> getBooks()
{
return books;
}
public void setBooks(List<Book> books)
{
this.books = books;
}
@RemoteMethod
public User getUser(String welcome)
{
this.welcome=welcome;
return this;
}
}
新建过滤器类DWRAnLog
package org.li.dwr.log.annotation;
import java.lang.reflect.Method;
import org.directwebremoting.AjaxFilter;
import org.directwebremoting.AjaxFilterChain;
import org.directwebremoting.annotations.Filter;
import org.directwebremoting.filter.SpringTransactionAjaxFilter;
@Filter(type=SpringTransactionAjaxFilter.class)
public class DWRAnLog implements AjaxFilter
{
public Object doFilter(Object obj, Method method, Object[] params, AjaxFilterChain chain) throws Exception
{
System.out.println("annotation过滤器Log输出:..对象:"+obj.getClass().getName()+"方法:"+method.getName());
return chain.doFilter(obj, method, params);
}
}
在spring的applicationContext.xml里加入 <bean id="anuser" class="org.li.dwr.spring.annotation.User"> <property name="username"> <value>javafish</value> </property> <property name="age"> <value>21</value> </property> <property name="address"> <value>北京市海淀区</value> </property> </bean> 新建AnSpringUserInfoHtml.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>UserInfo.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type='text/javascript' src='dwr/interface/anspringuser.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type="text/javascript" src="anspringuserInfo.js"></script>
</head>
<body>
请输入你的名字:
<input id="name" type="text"/>
<input id="jbutton" type="button" value="得到javafish(spring)的信息"/>
<div id="result"></div>
<script>load()</script>
</body>
</html>
新建anspringuserInfo.js
function load()
{
var jbutton = $("jbutton");
jbutton.onclick=function(event)
{
bOnClick();
};
}
function bOnClick()
{
alert("haha");
anspringuser.getUser($("name").value,callback);
}
function callback(msg)
{
var user = msg;
DWRUtil.setValue('result',"欢迎你!"+user.welcome+" 姓名:"+user.username+",年龄:"+user.age+",住址:"+user.address);
}
在web.xml中 的DWR的servlet的初始化参数里加入 <init-param>
<param-name>classes</param-name>
<param-value>
org.li.dwr.log.annotation.DWRAnLog,org.li.dwr.spring.annotation.User
</param-value>
</init-param>
运行服务器输入http://localhost:8080/DWRStudy/AnSpringUserInfo.html,成功了 用Annotation的配置和dwr.xml的意思基本一样,这里就不多做介绍了。 Util.js的函数库 $()和prototype.js一样相当于document.getElementById (Set)getValue()(设置)得到元素的值一般是(设置)得到元素的innerHTML。 getText()得到元素的文本值 (set)getValues()(设置)得到元素下的元素,以array为对象载体。 这里都是一些最常用的函数,具体可以看一下util.js文件。 声明:JavaEye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
|
|
| 返回顶楼 | |
|
最后更新时间:2006-12-24
挺好的,学习ing
|
|
| 返回顶楼 | |
|
最后更新时间:2006-12-23
TO:likunkun
你好,我是初学者,我按你的第一个入门例子出现了javascript错误。“EvalError”没有定义,网上搜了一下,没找到。不知什么原因? 是哪没配置对吗? |
|
| 返回顶楼 | |
|
最后更新时间:2006-12-23
EvalError,不可能没定义,它是javascript内置的.
|
|
| 返回顶楼 | |
|
最后更新时间:2007-01-02
很好,学习以下
|
|
| 返回顶楼 | |
|
最后更新时间:2006-12-26
我做了第一个例子,但是运行的时候,点击"得到Hello World"按钮没有反映,网页下面出现了一个警告符号,这是怎么回事,是不是我的浏览器设置有问题?
|
|
| 返回顶楼 | |
|
最后更新时间:2006-12-26
lnj2050 写道 我做了第一个例子,但是运行的时候,点击"得到Hello World"按钮没有反映,网页下面出现了一个警告符号,这是怎么回事,是不是我的浏览器设置有问题? 我把我的源代码上传了,看看吧^_^
|
|
| 返回顶楼 | |
|
最后更新时间:2006-12-26
likunkun 写道 lnj2050 写道 我做了第一个例子,但是运行的时候,点击"得到Hello World"按钮没有反映,网页下面出现了一个警告符号,这是怎么回事,是不是我的浏览器设置有问题? 我把我的源代码上传了,看看吧^_^ |
|
| 返回顶楼 | |
|
最后更新时间:2006-12-26
我用刚才楼主的代码试了,还是一样的错误,我感觉应该是javascript脚本错误,因为我看hello.js里面和userinfo.js里面的函数前面都出现了黄色的警告.
|
|
| 返回顶楼 | |
|
最后更新时间:2006-12-26
异常是什么?
如果有异常的话也应该能够根据异常解决啊 我这里一切正常. |
|
| 返回顶楼 | |










