DWR框架配置详细教程

r囧r小猫 2022-04-05 05:29 237阅读 0赞

--------------------

## 1、首先要准备两个jar包，下载链接：\* ##

\*\*  
dwr.jar文件：链接：[https://pan.baidu.com/s/1TZrVwtlmRrv-y0QyG8XOwQ][https_pan.baidu.com_s_1TZrVwtlmRrv-y0QyG8XOwQ]  
提取码：x5tm

commons-logging-1.2.jar文件：链接：[https://pan.baidu.com/s/1njataC6-WLFFT\_RGHFXkwA][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 的目录下， ##

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70]

然后，分别右键两个jar包，Build Path，Add to Build Path  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1]

--------------------

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

注意：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 2]

--------------------

## 5、在WEB-INF的目录下新建一个dwr.xml文件 ##

--------------------

编辑dwr文件：

<?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>
      
    	<create creator="new" javascript="HelloService">	
    		
    		<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函数来调用  
![在这里插入图片描述][20181211002440232.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">
    	
      </head>
      
      
      
      <script type="text/javascript" src="dwr/engine.js"></script>
      <script type="text/javascript" src="dwr/util.js"></script>
      
      <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、创建一个普通类 ##

--------------------

![在这里插入图片描述][20181210235302884.png]

package com.ht.bean;
    
    public class HelloService {
    	public String sayHello(String name){
    		return "您好，"+name;
    	}
    	
    //	public void aa(){
    //		System.out.println("我是java代码，我被js函数调用了");
    //	}
    }

--------------------

## 8、测试： ##

--------------------

点击测试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 3]

点击测试后，其中“您好“这个字符串是从普通类里面来的，达到js函数直接调用java代码的效果！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 4]

Tip：修改web.xml或者dwr.xml文件以后，要重启web服务才会生效！

**【如果想再新建一个可用js调用的java类，叫A类吧，那么，还需要在dwr.xml里面添加一个create标签，属性javascript=“A”，param标签的属性value=“com.ht.bean.A” 即可，然后在jsp页面文件添加**，要改动的地方就是这些】

[https_pan.baidu.com_s_1TZrVwtlmRrv-y0QyG8XOwQ]: https://pan.baidu.com/s/1TZrVwtlmRrv-y0QyG8XOwQ
[https_pan.baidu.com_s_1njataC6-WLFFT_RGHFXkwA]: https://pan.baidu.com/s/1njataC6-WLFFT_RGHFXkwA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70]: /images/20220405/ac17add9108945febdb7a0a698dac89b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 1]: /images/20220405/6492f281dd7a4303bafde2b6dd231548.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 2]: /images/20220405/43f9632325644b1d99a5f15bc55f0c20.png
[20181211002440232.png]: /images/20220405/644c4907074e4d8b9e689a744e19057a.png
[20181210235302884.png]: /images/20220405/58e0b095abfa4c6fbb924ebe2e85a9fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 3]: /images/20220405/55a83d3a1b3a42879b27611fb496b779.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hlb25fQ0M_size_16_color_FFFFFF_t_70 4]: /images/20220405/32a5628b7bfe4fdbbe8f2c79023a551a.png