第一个DWR程序

最新推荐文章于 2017-06-21 15:19:59 发布

simplehumn

最新推荐文章于 2017-06-21 15:19:59 发布

阅读量113

点赞数

分类专栏： DWR 文章标签： DWR JSP Java XML Web

本文链接：https://blog.csdn.net/simplehumn/article/details/83424384

版权

DWR 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. 第一个DWR程序
1.1 准备工作
把dwr.jar放在WebRoot/WEB-INF/lab下，另外还需要engine.js（必需）和util.js，不过我没找到在哪，加载时直接加载的，
1.2 在WebRoot/WEB-INF目录下配置web.xml，配置时注意：把所有<servlet>标签放在一起，所有<servlet-mapping>标签放在一起


<?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">
	<!-- dwr -->
	<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>

1.3 配置dwr.xml目录与web.xml相同，其中value就是class的位置


<?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="helloWorld.Service"></param>
		</create> 
	</allow>
</dwr>

1.4 编写java代码，写一个java类(Service.java)，普通的就行


package helloWorld;
public class Service {
	public String sayHello(String yourName) {
		//可以访问数据库的复杂代码
		return "Hello world: " + yourName;
	}
}

OK了，到这里就可以测试了，登录 http://localhost:8080/yourProjectName/dwr
你会看到一个service的链接，点击找到sayHello( );
提示："Hello world: 输入名字"测试成功！
1.5 加上JSP文件（first_dwr.jsp）
这JSP文件里说道就多了，首先看加载的几个JS文件，其中../interface/service.js文件是dwr自动生成的JS，JS名字与dwr.xml文件配置里的 javascript="service" 名字（service）要一样。再看JS代码,firstDwr()不说了就是下面调用到的一个function, dwr.util是util.js的功能，至于util.js有多少功能有待查阅，先不管了。再下面service.sayHello(userName,callBackHello);中service是dwr.xml中的配置名字，也即dwr生成的JS文件名，大小写敏感，这里方法多了个参数，后面那个是反调函数的名字，来调用function callBackHello(data)这个函数，当然也可以把函数直接写到参数的位置，如：function firstDwr(){
var userName = dwr.util.getValue("userName");
//alert(userName);
service.sayHello(userName, function(data){
dwr.util.setValue("result",data);
});
}
Data就是你界面上输入框里的内容，它把值赋给字符创"result",由<div id="result"></div>显示在界面上。以下是JSP内容


<%@ page language="java"  pageEncoding="UTF-8"%>
<html>
  <head>    
    <title>My JSP 'first_dwr.jsp' starting page</title>
    <script type='text/javascript' src='/Ext_Dwr_Spring/dwr/engine.js'></script>
	<script type='text/javascript' src='/Ext_Dwr_Spring/dwr/util.js'></script>
	<script type='text/javascript' src='/Ext_Dwr_Spring/dwr/interface/service.js'></script>
	<script type="text/javascript">
	function firstDwr(){
		var userName = dwr.util.getValue("userName");
		//alert(userName);
		service.sayHello(userName,callBackHello);
	}
	function callBackHello(data){
		dwr.util.setValue("result",data);
	}
	</script>
  </head>

  <body>
  	<div>请输入姓名：<input type="text" name="userName"></div>    
    <div><input type="button" value="提交" onclick="firstDwr()"></div>
    <div id="result"></div>
  </body>
</html>