手把手教你用DWR实现js前台调用后台程序而不需要AJAX
利用DWR组件实现前台直接操作后台数据
1.到http://download.csdn.net/detail/lishirong/4012162下载dwr.jar组件，添加到工程的WEB-INF的lib目录下
加入之后输入
2.后台准备
在bean包下新建一个用户类User.java,用于保存用户信息
package bean;
/**
* @Title: User.java
* @Package bean
* @Description: 用户保存暂时性信息的JavaBean
* @author lishirong
* @date Nov 7,2011 10:07:16 AM
* @version V1.0
*/
public class User {
private String id;
private String name;
private String password;
private String email;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getpassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
(2)在servlet包下新建一个控制类DWRUserAccess.java，用于控制业务逻辑
package servlet;
import business.UserDAO;
import bean.User;
public class DWRUserAccess {
UserDAO userDAO = new UserDAO();
public boolean save(User user) {
System.out.println("id:"+user.getId());
System.out.println("name:"+user.getName());
System.out.println("password:"+user.getpassword());
System.out.println("email:"+user.getEmail());
return userDAO.save(user);
}
public User find(String id) {
System.out.println("查找的id是："+id);
return userDAO.find(id);
}
}
(3)在business包下新建一个业务类UserDAO.java，用于处理与数据库相关的业务逻辑(此处为模拟存数据库)
package business;
import java.util.HashMap;
import java.util.Map;
import bean.User;
public class UserDAO {
//存放保存的数据
private static Map dataMap = new HashMap();
//持久用户
public boolean save(User user) {
if (dataMap.containsKey(user.getId()))
return false;
System.out.println("下面开始保存用户");
System.out.println("id："+user.getId());
System.out.println("password："+user.getpassword());
System.out.println("name："+user.getName());
System.out.println("email："+user.getEmail());
dataMap.put(user.getId(),user);
System.out.println("用户保存结束");
return true;
}
//查找用户
public User find(String id) {
return (User)dataMap.get(id);
}
//测试写的业务类,呵呵
public static void main(String args[]){
User user=new User();
user.setId("306897442");
user.setName("ricky");
user.setPassword("qqq111");
user.setEmail("lishirongtech@126.com");
UserDAO ud=new UserDAO();
ud.save(user);
User user1=ud.find("1");
if(user1!=null){
System.out.println("userId:"+user1.getId());
System.out.println("userPass:"+user1.getpassword());
System.out.println("userName:"+user1.getName());
System.out.println("userEmail:"+user1.getEmail());
}else{
System.out.println("查找不到该用户！");
}
User user2=ud.find("306897442");
if(user2!=null){
System.out.println("userId:"+user2.getId());
System.out.println("userPass:"+user2.getpassword());
System.out.println("userName:"+user2.getName());
System.out.println("userEmail:"+user2.getEmail());
}else{
System.out.println("查找不到该用户!");
}
}
}
3.前台准备
(1)在Webroot下的jsp文件夹下新建一个jsp文件DWRTest.jsp,用于接收用户提交的数据
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" errorPage="errorPage.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>
<TITLE>DWR测试</TITLE>
<Meta http-equiv=Content-Type content="text/html; charset=UTF-8">
<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/DWRUserAccess.js"></script>
<script type="text/javascript" src="../js/dwrFun.js"></script>
</HEAD>
<BODY>
<B>用户注册</B><br>
------------------------------------------------
<Br>
<form name="regForm">
登陆ID：<input type="text" name="id"><br>
口 令：<input type="password" name="password"><br>
姓 名：<input type="text" name="name"><br>
电子邮件：<input type="text" name="email"><br>
<input type="button" name="submitBtn" value="提交" onclick="OnSave()"><br>
</form>
<br>
<br><B>用户查询</B><br>
------------------------------------------------
<Br>
<form name="queryForm">
登陆ID：<input type="text" name="id"><br>
<input type="button" name="submitBtn" value="提交" onclick="OnFind()"><br>
</form>
<br>
</BODY>
</HTML>
(2)在Webroot的js文件夹下新建一个js文件dwrFun.js,用户响应用户请求
function saveFun(data) {
if (data) {
alert("注册成功！");
} else {
alert("登陆Id已存在！");
}
}
function OnSave() {
var userMap = {};
userMap.id = regForm.id.value;
userMap.password = regForm.password.value;
userMap.name = regForm.name.value;
userMap.email = regForm.email.value;
//alert('id:'+userMap.id+'password:'+userMap.password+'name:'+userMap.name+'email:'+userMap.email);
DWRUserAccess.save(userMap,saveFun);
}
function findFun(data) {
if (data == null) {
alert("无法找到该用户：" + queryForm.id.value);
return;
}
alert("找到用户，nId:" + data.id + "nPassword:" + data.password + "nName:" + data.name + "nEmail:" + data.email);
}
function OnFind() {
DWRUserAccess.find(queryForm.id.value,findFun);
}
4.xml转换配置
(1)在web.xml中配置DWRServlet,适配路径到dwr目录下(在web.xml中加入这段代码即可)
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<!-- DWR配置 -->
<servlet>
<description>Direct Web Remoter Servlet</description>
<display-name>DWR Servlet</display-name>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</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>
<!-- DWR配置 -->
</web-app>
(2)在Webroot的WEB-INF文件夹(与web.xml同级)下新建一个xml文件dwr.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="DWRUserAccess" scope="application">
<param name="class" value="servlet.DWRUserAccess"/>
</create>
<convert converter="bean" match="bean.User"/>
</allow>
</dwr>
(3)测试dwr转换的业务类DWRUserAccess.java和DWRUserAccess.js是否对应上，可输入http://localhost:8080/DWR/dwr进行测试。
大功告成，发布项目，启动Tomcat,输入http://localhost:8080/DWR/jsp/DWRTest.jsp进行最后的测试。
PS:我的示例工程源码下载：http://download.csdn.net/detail/lishirong/4012764
下面是一些效果展示图：
第一张：