1、从DWR官网下载最新版本的jar包,地址:http://directwebremoting.org/dwr/downloads/index.html
2、将jar包放入WEB-INF的lib文件夹下。同时,dwr依赖于commons-logging.jar这个包,所以必须将这个jar包也放入到WEB-INF的lib文件夹下。
3、配置dwr的环境:
a)配置web.xml文件.
1
|
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet- class >uk.ltd.getahead.dwr.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><br></span>
|
web.xml中其他配置不影响,正常配置即可
b)配置dwr
1
|
<?xml version= "1.0"
encoding= "UTF-8" ?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" <br> "http://www.getahead.ltd.uk/dwr/dwr20.dtd" >
<!-- 关键配置 -->
<dwr>
<allow>
<create creator= "new"
javascript= "Chat" >
<param name= "class"
value= "com.epri.xts.wxqyh.app.chatroom.module.Chat" />
</create>
<convert converter= "bean"
match= "com.epri.xts.wxqyh.app.chatroom.bean.Message" />
</allow>
</dwr>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd" >
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr20.dtd" >
|
dwr.xml是dwr的核心配置文件,主要的标签有:<converter>、<convert>、<create>这三个标签。
<create>标签是dwr中重要的标签,用来描述 java(服务器端) 与 javascript (客户端)的交互方式。
其中,creator和javascript是必须属性,其他可以忽略。creator包含有以下几个值:
new:Java用“new”关键字创造对象
none:它不创建对象 (v1.1+)
scripted:通过BSF使用脚本语言创建对象,例如BeanShell或Groovy
spring:通过Spring框架访问Bean
struts:使用Struts的FormBean (v1.1+)
jsf:使用JSF的Bean (v1.1+)
pageflow:访问Weblogic或Beehive的PageFlow (v1.1+)
ejb3:使用EJB3 session bean (v2.0+)
4、页面配置
页面需要引入3个JS
<script src=
"<%=ctxPath%>/dwr/interface/Chat.js"
type=
"text/javascript"
></script>
<script src=
"<%=ctxPath%>/dwr/engine.js"
type=
"text/javascript"
></script>
<script src=
"<%=ctxPath%>/dwr/util.js"
type=
"text/javascript"
></script>
其中engine.js必须要,如果需要用到dwr提供的一些方便的工具要引用util.js ,然后是dwr自动生成的js文件,名字必须和dwr.xml中create标签的javascript属性值一样,且必须是dwr/interface开头的目录
javascript代码:
function sendMessage() {
var text = DWRUtil.getValue(
"message"
);
if
(
""
!= text){
DWRUtil.setValue(
"message"
,
""
);
Chat.addMessage(text, name, taskId, gotMessages);
}
}
function gotMessages(messages) {
var chatlog =
""
;
for
( var data in messages) {
chatlog =
"<div> <li class='even'>"
+ messages[data].text + "</li></div
}
DWRUtil.setValue(
"chatlog"
, chatlog);
setTimeout(
"queryMessage()"
,
2000
);
}
function queryMessage() {
Chat.getMessages(taskId, gotMessages);
}
html代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<%@ page language= "java"
contentType= "text/html; charset=UTF-8"
pageEncoding= "UTF-8" %>
<!DOCTYPE html>
<%
String ctxPath = request.getContextPath();
%>
<html>
<head>
<title>聊天组</title>
<meta charset= "utf-8" >
<meta name= "viewport"
content= "width=device-width, initial-scale=1" >
<link rel= "stylesheet"
href= "../css/jquery.mobile-1.4.5.min.css" >
<link rel= "stylesheet"
type= "text/css"
href= "../css/bootstrap.min.css" >
<link rel= "stylesheet"
href= "../css/add.css" >
<script src= "../js/jquery-1.8.3.min.js" ></script>
<script src= "../js/jquery.mobile-1.4.5.min.js" ></script>
</head>
<body class = "bgc"
onload= "queryMessage()" >
<div data-role= "page"
id= "pageone" >
<!-- 聊天内容显示区域 -->
<div data-role= "content"
class = "container"
role= "main" >
<ul class = "content-reply-box mg10"
id= "chatlog" >
</ul>
</div>
<!-- 下方输入框 -->
<div data-position= "fixed"
data-role= "footer" >
<ul class = "footer" >
<li class = "col-xs-3" >
<span class = "b_pic" >
<form action= "<%=request.getContextPath()%>/chat"
method= "post"
enctype= "multipart/form-data"
data-ajax= "false"
name= "form"
id= "form"
target= "relnews" >
<input type= "hidden"
name= "name"
id= "name"
value= ""
/>
<input type= "hidden"
name= "taskId"
id= "taskId"
value= ""
/>
<input type= "file"
name= "image"
id= "image"
class = "photo"
onchange= "sendImage(this)"
/>
</form>
</span>
</li>
<li class = "col-xs-6" ><input type= "text"
name= "fname"
id= "message" ></li>
<li class = "col-xs-4" ><a href= ""
data-role= "button"
class = "b_submit"
id= "submitInfo"
onclick= 'sendMessage();' >发送</a></li>
</ul>
</div>
</div>
<!-- 隐藏域作为表单提交后页面不跳转使用 -->
<iframe align= "center"
frameborder= "0"
marginheight= "0"
marginwidth= "0"
name= "relnews"
id= "hiddenIframe"
scrolling= "no"
style= "width: 100%; height: 100%; display: none" > </iframe>
</body>
<script src= "<%=ctxPath%>/dwr/interface/Chat.js"
type= "text/javascript" ></script>
<script src= "<%=ctxPath%>/dwr/engine.js"
type= "text/javascript" ></script>
<script src= "<%=ctxPath%>/dwr/util.js"
type= "text/javascript" ></script>
<script type= "text/javascript"
src= "../js/chat.js" ></script>
</html>
|
6、其他
dwr可以设置是否采用异步方式访问java代码:
1
|
dwr.engine.setAsync( false ); //false为同步,true(默认)为异步
|
以及dwr对于异常的处理,这里标注一个简单的全局异常,细分的后续学习补充:
1
2
3
4
5
|
dwr.engine.setErrorHandler(errh);
function errh(errorString, exception) {
errorFlag = true ;
alert( "操作失败!" );
}
|