废话不多说,直接上干货。
1 . 获取dwr,地址:点击下载
2 . 创建maven项目,这里不多说,在pom.xml里引入依赖,如下:
<dependency>
<groupId>org.directwebremoting</groupId>
<artifactId>dwr</artifactId>
<version>3.0.2-RELEASE</version>
</dependency>
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.2</version>
</dependency>
3 .web.xml配置
<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app id="dwr">
<servlet>
<servlet-name>dwr-demo</servlet-name>
<!--dwr3.0版本-->
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<!--激活ajax反转-->
<init-param>
<param-name>activeReverseAjaxEnabled</param-name>
<param-value>true</param-value>
</init-param>
<!--是否允许跨域访问-->
<init-param>
<param-name>crossDomainSessionSecurity</param-name>
<param-value>false</param-value>
</init-param>
<!--是否允许远程调用js-->
<init-param>
<param-name>allowScriptTagRemoting</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-demo</servlet-name>
<url-pattern>/js/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
4 . dwr.xml配置,该文件放在web.xml旁边,内容如下:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">
<dwr>
<allow>
<!--javasript:生成的js文件名,该文件名应该位于/js/dwr/interface/HelloWorld.js,这和dwr的servlet配置相关-->
<create creator="new" javascript="HelloWorld">
<!--该全类名为java处理的类名-->
<param name="class" value="com.baibin.dwr.HelloWorld"/>
</create>
</allow>
</dwr>
5 . java处理逻辑
package com.baibin.dwr;
import org.directwebremoting.ScriptBuffer;
import org.directwebremoting.WebContext;
import org.directwebremoting.WebContextFactory;
import org.directwebremoting.proxy.dwr.Util;
import java.util.Collection;
/**
* Created by 白彬 on 2017/3/16.
*/
public class HelloWorld {
public void send(String msg) {
WebContext webContext = WebContextFactory.get();
Collection sessions = webContext.getAllScriptSessions();
ScriptBuffer scriptBuffer = new ScriptBuffer();
scriptBuffer.appendScript("callback(");
scriptBuffer.appendScript(msg);
scriptBuffer.appendScript(")");
Util util = new Util(sessions);
util.addScript(scriptBuffer);
}
}
6 . jsp展示代码
<%@page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<%--下面这两个js可以从我们在pom.xml文件里引入的dwr依赖的jar文件里解压得到,解压后搜索下名字就得到了--%>
<script src="/js/dwr/util.js"></script>
<script src="/js/dwr/engine.js"></script>
<%--这里我们并没有这个js,但是却这样写,这是因为这个js是java动态为我们生成的--%>
<script src="/js/dwr/interface/HelloWorld.js"></script>
<%--这个jquery文件别放在/js/dwr文件夹下,因为这个路径已经被dwr接管了--%>
<script src="/js/jquery-1.3.2.min.js"></script>
<body>
<h2>Hello World!</h2>
<input type="text" name="msg" id="msg" size="30"/>
<input type="button" id="btn" value="发布消息"/>
</body>
<script type="text/javascript">
$(function () {
dwr.engine.setActiveReverseAjax(true);
$("#btn").click(function () {
HelloWorld.send($("#msg").val());
});
});
function callback(msg) {
alert(msg);
}
</script>
</html>
到了这里我们就配置结束了,这个时候启动你的项目,在浏览器开两个窗口,在其中一个窗口中点击发布消息,两个网页都会alert出你输入的内容。
下一篇博客会详细的介绍下具体的实现原理,敬请期待。