dwr2.0版本的demo

谈起DWR,这个东西在上学的时候接触过，但工作之后就再也没有用过。

对DWR的印象是不手写AJAX，使用JavaScript调用java后台的代码，就如同调用前台代码一样。

于是乎，随着这次修改新景后台的功能之际，了解一下DWR的使用。顺便照着网上的DEMO简单地实现了一下~

简介如下：

web.xml需要配置一个servlet，处理所有/dwr/*的请求

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

<init-param>
<param-name>crossDomainSessionSecurity</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>

在和web.xml同级目录下新建dwr.xml

配置dwr需要调用的类，配置请求参数所需函数和js参数的对应关系。

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

<createcreator="new"javascript="DWRUserMessage">

<paramname="class"value="com.wang.dao.UserUtil"/>
</create>

<convertconverter="bean"match="com.wang.bean.User"></convert>
</allow>
</dwr>

后台在dwr中调用的函数：

package com.wang.dao;
import com.google.gson.Gson;
import com.wang.bean.User;
public class UserUtil {
public String genUserJson(User tempUser){
if(tempUser == null){
return "空参数";
}
User user = new User();
user.setName(tempUser.getName());
user.setAge(tempUser.getAge());
return new Gson().toJson(user);
}
}

前端页面：

基于回调函数，调用后端参数传入后端需要的参数和回调函数。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>首页</title>
<scripttype="text/javascript"src="dwr/engine.js"></script>
<scripttype="text/javascript"src="dwr/util.js"></script>
<scripttype="text/javascript"src="dwr/interface/DWRUserMessage.js"></script>
<scripttype="text/javascript">
functionUserrollback(data){
if(data){
//拿到java代码返回的json参数，并转化为js对象，然后获取属性并展示到dom对象的innerHTML中
var qq =eval("("+data+")");
console.log(qq+"=="+qq.name +"=="+qq.age);
var ss = document.getElementById("ss");
var ss2 = document.getElementById("ss2");
ss.innerHTML = qq.name;
ss2.innerHTML = qq.age;
}
}
function genAndShowUserMessage(){
console.log('sb');
var param ={};
param.name ="张三";
param.age =18;
console.log(param);
//调用java后端的函数，并传入参数：param对应后端需要的参数，Userrollback代表执行完java代码执行的回调函数。
//我猜的DWR原理就是基于ajax和回调函数执行的。
DWRUserMessage.genUserJson(param,Userrollback);
console.log('pre rollback');
}
</script>
</head>
<body>
<ahref="javascript:void(0)"onclick="genAndShowUserMessage()">点我获取用户信息</a>
<br/>
名称：<spanid="ss"></span>
<br/>
年龄：<spanid="ss2"></span>
</body>
</html>

除了DWR，顺带了解了新景后台的修改方式。

拿当前任务举例，要求在两个后面对文本框的值做校验，文本框的值是以英文逗号隔开（,）的，通过network找到进入页面的请求，定位到后台代码，找到进入页面jsp，查看逻辑。用DWR实现，对着两处的校验也有相应的数据。

来自为知笔记(Wiz)