DWR框架--让前端JS代码调用JAVA后端的方法

目录

1.DWR框架简介

2.使用步骤

2.1.pom.xml导入包

2.2.配置web.xml文件

2.2.1.先了解dwr的jar包(不同版本不一样，需注意)

2.2.2.在web.xml中增加dwr配置

2.3.配置dwr.xml

2.4.dwr.xml常用的标签解释（不完全）

2.5.前端引用

2.6.dwr包自带的测试页

3.闲话

---

1.DWR框架简介

• DWR框架是一个可以允许你去创建AJAX WEB站点的JAVA开源库。
• 允许在浏览器的JavaScript代码中调用Web服务器的Java代码
• 通过动态把Java类生成JavaScript，让使用者感觉调用就像发生在浏览器端
• 核心是ajax提交，实现页面数据局部刷新

2.使用步骤

2.1.pom.xml导入包

<dependency>
	<groupId>dwr</groupId>
	<artifactId>dwr</artifactId>
	<version>1.1.3</version>
</dependency>
<dependency>
	<groupId>commons-logging</groupId>
	<artifactId>commons-logging</artifactId>
	<version>1.2</version>
</dependency>

这里我选择的dwr包是1.1.3版本，不同的版本后续的配置也不一样，需要注意

2.2.配置web.xml文件

2.2.1.先了解dwr的jar包(不同版本不一样，需注意)

需要引入dwr的DWRServlet.class，具体可以打开dwr的jar包，查看具体路径和DWRServlet.class的路径

 可以发现DWRServlet.class的路径是\uk\ltd\getahead\dwr

这里要留心几个文件，在当前jar的目录下：

dwr.xml：dwr框架的配置文件，后续需要配置

engine.js：前端需要引用，后续再说

util.js：前端需要引用，后续再说

2.2.2.在web.xml中增加dwr配置

<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>

其中<init-param>标签中<param-value>设置成true，可以启用dwr包自带的测试页面，便于后端自己调测，测试环境下推荐打开true，正式环境下推荐设置成关闭false，默认是false，不打开。

2.3.配置dwr.xml

2.2中提到了dwr.xml，这里需要配置自定义的配置文件

创建一个空的dwr.xml文件，将它放在web.xml所在的WEB-INF目录下

自定义的dwr.xml的头文件需要参照dwr包里的dwr.xml

这里给出自定义的dwr.xml示例

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
    <allow>
        <create creator="new" javascript="SysUserTask" >
            <param name="class" value= "com.achi.system.service.SysUserTaskService" />
            <include method="getTaskProgress"/>
        </create>
        <convert match="com.achi.system.SysUserTask " converter="bean">
            <param name="include" value="name,age"></param>
        </convert>
        <convert converter="exception" match="java.lang.Exception"/>
        <convert converter="bean" match="java.lang.StackTraceElement"/>
    </allow>
</dwr>

2.4.dwr.xml常用的标签解释（不完全）

<allow>： 部分定义了DWR能够创建和转换的类，以供 javascript 访问。

<create>： 标签中指定 javascript 中可以访问的 java 类，并定义 dwr 应当如何获得要进行远程的类的实例，其中 javascript=" testClass " 属性指定 javascript 代码访问对象时使用的名称。

creator是类构造器，creator="new" 属性指定 java 类实例的生成方式， new 意味着 DWR 应当调用类的默认构造函数来获得实例，其他的还有 spring 方式，通过与 IOC 容器 Spring 进行集成来获得实例等

默认情况下DWR1.1有8种创造器。它们是：

new: 用Java的new关键字创造对象。
none: 它不创建对象。 (v1.1+)
scripted: 通过BSF使用脚本语言创建对象，例如BeanShell或Groovy。
spring: 通过Spring框架访问Bean。
jsf: 使用JSF的Bean。 (v1.1+)
struts: 使用Struts的FormBean。 (v1.1+)
pageflow: 访问Beehive或Weblogic的PageFlow。 (v1.1+)
还有一个属性为scope，默认为page ，其值还有application、session、request、script。

<creator>下的配置节点：
<param> 标签指定要公开给 javascript 的 java 类名。
<include> 标签指定要公开给 javascript 的方法。不指定的话就公开所有方法。
<exclude> 标签指定要防止被访问的方法。
<auth> 标签指定一个J2EE角色作为访问控制检查。

<convert>： 标签由于dwr只支持json的数据格式，因此在dwr中我们要读取javaBean中的属性，就必须将其转换成json的数据格式，这需要配置convert进行转换。

<convert converter="bean" match="com.tgb.DwrTest"/>
  <param name="include" value="property1, property2"/>
</convert>

其中include表示只允许value中的属性可以访问，exclude表示除了value中的属性，其他属性均可访问。如果不设定param，则所有属性均可访问。

2.5.前端引用

在页面中引入以下javascript脚本

<script type="text/javascript" src="dwr/interface/SysUserTask.js" ></script>
<script type="text/javascript" src="dwr/engine.js" ></script>
<script type="text/javascript" src="dwr/util.js" ></script>

<script type="text/javascript">
 function saySomething(){ 
   var name=document.getElementById("name"); 
   var result=document.getElementById("result"); 
    //dwr调用sayhello方法
    //脚本中的SysUserTask，应该与dwr.xml文件中的'javascript="SysUserTask"'这一致。 
    SysUserTask.getTaskProgress(name.value,function(ret){ 
        //将相应打印到页面上 result.innerHTML=ret;
      } ); 
 }

1.第一句是由DWR框架在运行时自动生成的，dwr/是一个虚拟的路径，我们并不能真是的看到这个文件的存在。

后面两句中的js文件在dwr的jar包中可以找到，可以选择拷贝这两个文件到前端，前后端分离开发模式下也可以远程访问后端的文件

2.编写javascript调用后台java代码。如果从后台获取了返回值，还可以通过DOM技术将值表现在页面上，这时页面并不会被全局刷新，只是局部发生改变，可以极大提高用户体验。

3.前端可以定时刷新调用后端方法

 对应的后端java端方法如下：

private volatile static List<SysUserTask> currentCacheList = new CopyOnWriteArrayList<>();

/**
 * 暴露给前端，生成js文件
 * 访问测试地址：http://127.0.0.1:8080/项目名/dwr/index.html
 * @return
 */
public List<SysUserTask> getTaskProgress(){
	return currentCacheList;
}

2.6.dwr包自带的测试页

地址：http://xxxx:8080/项目名/dwr/index.html

 点击SysUserTask，进入

 点击Execute按钮即可模拟前端进行测试。

3.闲话

前后端分离下，消息实时或者非实时推送到前端，有多种方案，dwr可以作为一种备选方案，亲测可用，其他的方案如：SSE，WebSocket，前端定时轮询后端接口等方案均可，但是资源消耗的代价比较高而已。