dwr简单入门使用（入门）

最新推荐文章于 2018-12-14 23:58:46 发布

最新推荐文章于 2018-12-14 23:58:46 发布 · 259 阅读

文章标签：

#DWR #Servlet #JavaScript #Web #JSP #ViewUI

dwr 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在Web项目中部署并使用Direct Web Remoting (DWR)，包括配置web.xml和dwr.xml文件，以及创建可与Java后端交互的前端JS页面。

我的web 项目目录：

步骤：

1.创建一个web 项目：
2.在lib 下放置 dwr.jar
3.将 util.js 和 engine.js放到 WebRoot 目录下（这里可以放的 js要在jsp 页面引用注意引用时路径问题{这里有个小技巧怎么才知道路径是正确的后边会提到}）

4.5两步骤的配置文件均可子啊dwr.jar包下找到模板

4. 在web.xml 配置使用 dwr

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
	xmlns="http://java.sun.com/xml/ns/j2ee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
	http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
  
  <servlet>
  		<servlet-name>dwr-invoker</servlet-name>
  		<servlet-class>org.directwebremoting.servlet.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>
  
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

5.在web.xml同一目录下创建一个新的 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>
		<create javascript="service"  creator="new">
			<param name="class" value="com.zx.libin.HelloWord"></param>
		</create>
	</allow>
</dwr>

注意这的value 是你的类的完整路径；

6.看一下我们要用的类：

package com.zx.libin;

public class HelloWord {
	public String sayHello(String name){
		
		return "your name  is : "+name;
	}
}

7. 完成测试：

将这个web项目发布，启动服务（我是用的是tomcat6.x），在浏览器地址栏输入：
http://localhost:8080/dwr/dwr/（http://localhost:8080/你的web项目名/dwr/）

出现下图：

点击service 进入：你会看到自己的方法：

经过上面的测试：你的dwr 已经可以成功运行了；

下边我们俩写一个jsp：

dwr.jsp

<%@ 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>dwr.jsp</title>
	<script type='text/javascript' src='/dwr/dwr/interface/service.js'></script>

(注意这里的路径问题最好 使用 图片2 中的方式  粘过来)
  <script type='text/javascript' src='/dwr/dwr/engine.js'></script>
  <script type='text/javascript' src='/dwr/dwr/util.js'></script>


	
	<script type="text/javascript">
		function firstDwr(){
			service.sayHello("libin",calBackHello);
		}
		
		function calBackHello(date){
			alert(date);
		}
		
	</script>
  </head>
  
  <body>
    <input type=button value="测试"  onclick="firstDwr()" >
  </body>
</html>

在浏览器测试：