采用DWR、maven保存数据到数据库

一、原理： Ajax是时下比较流行的一种web界面设计新思路,其核心思想是从浏览器获取XMLHttp对象与服务器端进行交互. DWR（Direct Web Remoting）就是实现了这种Ajax技术的一种web框架. 最近做的项目中我也将它用上了,感觉很是方便,比如动态生成javascript代码,隐藏的http协议,java代码和javascript交互的是javascript的对象(或字符串).

二、步骤：

1.导入DWR所需要的jar包，dwr.jar ,commons-loggong.jar（日志处理）,pom.xml.

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>cn.com.liveuc.dwr</groupId>
	<artifactId>dwr</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>
	<name>dwr Maven Webapp</name>
	<url>http://maven.apache.org</url>
	<dependencies>
		<dependency>
			<groupId>junit</groupId>
			<artifactId>junit</artifactId>
			<version>4.7</version>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.apache.geronimo.bundles</groupId>
			<artifactId>dwr</artifactId>
			<version>3.0.M1_1</version>
		</dependency>
		<dependency>
			<groupId>commons-logging</groupId>
			<artifactId>commons-logging</artifactId>
			<version>1.1.3</version>
		</dependency>
		<dependency>
			<groupId>tomcat</groupId>
			<artifactId>servlet</artifactId>
			<version>4.1.36</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>javax.servlet.jsp-api</artifactId>
			<version>2.3.1</version>
		</dependency>
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>
		<dependency>
			<groupId>log4j</groupId>
			<artifactId>log4j</artifactId>
			<version>1.2.14</version>
		</dependency>
	</dependencies>
	<build>
		<finalName>dwr</finalName>
	</build>
</project>

2.在web.xml中配置dwr的拦截器

<!--配置dwr拦截器-->
	<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<display-name>DWR Servlet</display-name>
		<description>Direct Web Remoter Servlet</description>
		<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
		<!--dwr调试-->
		<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>
		<init-param>
			<param-name>allowScriptTagRemoting</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<param-name>scriptCompressed</param-name>
			<param-value>false</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>

	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>

3.编写js要调用的Java类

/**
 * js访问方法
 * @author Administrator
 *
 */
public class UserDaoADwr {

	UserDao userDao = new UserDao();

	/**
	 * 保存用户
	 * @param user 保存对象
	 * @return 是否保存成功
	 */
	@SuppressWarnings("static-access")
	public boolean saveUser(User user) {
		return userDao.saveUser(user);
	}

	/**
	 * 查询
	 * @param id 查询条件用户id
	 * @return 查询出的用户
	 */
	@SuppressWarnings("static-access")
	public User findUserById(Integer id) {
		return userDao.findUserById(id);
	}
}

4.在WEB-INF下配置dwr配置文件dwr.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">

<dwr>
	<allow>
		<!-- 类自动转换为js -->
		<create creator="new" javascript="UserDaoDwrjs" class="cn.com.liveuc.dwr.js.UserDaoADwr">
		</create>
		<!-- 表示Java和js转换 -->
		<convert converter="bean" match="cn.com.liveuc.dwr.domain.User" />

		<!--
		<create creator="new" javascript="***js调用的class***" class="***java里暴露的class,必须写完整路径***">
            <include method="***java暴露类里要公开的方法，如果不写默认全部公开***" />
      	 </create>
      	 <convert converter="bean" match="***一般来说是javabean***">  //int,String,list等不需要显式的转换就可以被js拿到
     		<param name="include" value="***javabean中的属性，用','隔开***" />  //这句可以不写
		</convert>
		<creator>标签负责公开用于Web远程的类和类的方法，<convertor>标签则负责这些方法的参数和返回类型。convert元素的作用是告诉DWR在服务器端Java 对象表示和序列化的JavaScript之间如何转换数据类型。
      	 -->
	</allow>
</dwr>

5、Jsp页面用户注册，直接js调用Java方法保存用户

<script type="text/javascript">
	function submitt() {
		var userMap = {};
		userMap.id = regForm.id.value;
		userMap.username = regForm.username.value;
		userMap.password = regForm.password.value;
		userMap.email = regForm.password.value;
		UserDaoDwrjs.saveUser(userMap, userFun);//调用Java方法保存用户
	}

	function userFun(data) {
		if (data) {
			alert("注册成功");
		} else {
			alert("注册失败");
		}
	}
</script>
</head>
<body>
	<table align="center" border="0">
		<form name="regForm">
			<tr>
				<td>登陆Id：</td>
				<td><input type="text" name="id"></td>
			</tr>
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="username"></td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="password"></td>
			</tr>
			<tr>
				<td>邮箱：</td>
				<td><input type="text" name="email"></td>
			</tr>
			<tr>
				<td colspan="2"><input type="button" value="提交"
					onclick="submitt()"></td>
			</tr>
		</form>
	</table>
</body>
</html>

6.js调用Java方法更加id查找用户

<body>
	<form name="findForm">
		<table align="center">
			<tr>
				<td>查询ID：</td>
				<td><input type="text" name="id"></td>
			</tr>
			<input type="submit" value="查询" onclick="selectUser()">
		</table>
	</form>
</body>
</html>
<script type="text/javascript">
	function selectUser() {
		UserDaoDwrjs.findUserById(findForm.id.value, {
			callback:function(data) {
				if (data == null) {
					alert("用户不存在");
					return;
				}
				alert("用户为：" + data.id + "用户名为：" + data.username);
			},
			async:true
		});
	}
</script>