DWR框架配置详细教程
2019-06-16 本文已影响0人
Xeon_CC
1、首先要准备两个jar包，下载链接：
dwr.jar文件：链接：https://pan.baidu.com/s/1TZrVwtlmRrv-y0QyG8XOwQ
提取码：x5tm
commons-logging-1.2.jar文件：链接：https://pan.baidu.com/s/1njataC6-WLFFT_RGHFXkwA
提取码：fgya
其他从网上下载来的jar包好些是用不了的，用我分享的两个jar包即可
2、新建一个Web Project，注意java EE version 为javaEE 6-Web 3.0
3、把dwr.jar和commons-logging-1.2.jar复制到WebRoot->WEB-INF->lib 的目录下，
image.png
然后，分别右键两个jar包，Build Path，Add to Build Path
image.png
4、配置web.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>TestDwr</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
<!-- 添加以下下配置即可 -->
<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>
<init-param>
<param-name>crossDomainSessionSecurity</param-name>
<param-value>false</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
注意：
image.png
5、在WEB-INF的目录下新建一个dwr.xml文件
<?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>
<!-- 当在jsp页面引入engine.js、util.js 和 HelloService.js文件时候，注意，第三个js文件名要和这里javascript的值要一样 -->
<create creator="new" javascript="HelloService">
<!-- 这里面com.ht.bean是包的名字，HelloService是此包里面的类的名字，
这个param标签是用来指定那些java类可被js函数调用 -->
<param name="class" value="com.ht.bean.HelloService" />
</create>
</allow>
</dwr>
注意：engine.js、util.js、文件在dwr.jar->org.directwebremoting里面，这两个文件自带，不用去找，HelloService.js是找不到的，到时候要用的时候直接引用就行。注意创建包名的时候！！要根据dwr.xml里面的 来写！
6、编写jsp页面，此时要引用三个js文件，这些文件的路劲是虚拟的不用去找
第三个js文件要根据你要是使用js函数调用的类，我这里是HelloService类要使用js函数来调用
image.png
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<!-- 引用三个js文件，前两个是必须的也是固定的，第三个js文件要看dwr.xml文件里面的配置 -->
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<!-- 先看看dwr.xml里面的<create creator="new" javascript="HelloService"> 这个标签里面的javascript的值为HelloService
所以 src="dwr/interface/HelloService.js" 引用的的是HelloService.js文件，这个文件是看不到的
-->
<script type="text/javascript" src="dwr/interface/HelloService.js"></script>
<script type="text/javascript">
function testDwr(){
var username=document.getElementById("username").value;
HelloService.sayHello(username,callback);
}
//回调函数,也就是说，服务器端（普通类）返回一个值的时候要做的事情
function callback(data){
document.getElementById("msg").innerHTML=data;
}
//如果你想简单一点
// function func(){
// //点击按钮时，直接调用HelloService类里面的aa()方法;
// HelloService.aa();
// }
</script>
<body>
<h1 align="center">DWR类库使用</h1>
<div id="msg">显示服务器端传给客户端的值</div>
<input type="text" name="username" id="username" value="张三">
<input type="button" value="测试" onclick="testDwr()">
</body>
</html>
7、创建一个普通类
image.png
package com.ht.bean;
public class HelloService {
public String sayHello(String name){
return "您好，"+name;
}
// public void aa(){
// System.out.println("我是java代码，我被js函数调用了");
// }
}
8、测试：
点击测试
image.png
点击测试后，其中“您好“这个字符串是从普通类里面来的，达到js函数直接调用java代码的效果！
image.png
Tip：修改web.xml或者dwr.xml文件以后，要重启web服务才会生效！
【如果想再新建一个可用js调用的java类，叫A类吧，那么，还需要在dwr.xml里面添加一个create标签，属性javascript=“A”，param标签的属性value=“com.ht.bean.A” 即可，然后在jsp页面文件添加，要改动的地方就是这些】
