ajax框架dwr的配置及使用introduction
1.引入dwr.jar包
2.在web.xml里配置dwr的servlet
3.通过一个JavaScript想java传一个user对象，java在返回一个user对象给JavaScript，说明dwr的用法
4.dwr.xml文件的配置：
5.bean.jsp
前台传递一个数组到后台，后台处理后，在返回这个数组
前台传递一个date到后台，后台处理后，在返回这个date
前台传递一个Map到后台，后台处理后，在返回这个Map
前台传递一个List到后台，后台处理后，在返回这个List，前后台和数组的转换没什么区别
就是后台又处理数组变成处理List
dwr与spring的整合
1.有个service，代码为：
2.在web.xml里配置dwr的servlet
<!-- dwr servlet configuration --> <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>
3.通过一个JavaScript想java传一个user对象，java在返回一个user对象给JavaScript，说明dwr的用法
User.java
package com.dwr;
public class User {
private String userName;
private String password;
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
---------------------------------
Login.java
package com.dwr;
public class Login {
public User login (User user){
user.setUserName("zj.china");
user.setPassword("888888");
return user;
}
}
4.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="login" creator="new" scope="session">
<param name="class" value="com.dwr.Login"></param>
</create>
<convert match="com.dwr.User" converter="bean">
<param name="include" value="userName,password"></param>
</convert>
</allow>
</dwr>
5.bean.jsp
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>dwr bean test</title>
<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/login.js"></script>
<script type="text/javascript" src="js/dwrTest.js"></script>
</head>
<body>
username:<input type="text" id="uName"><br>
password:<input type="text" id="pass"><br>
<input type="button" value="dwr bean" onclick="show();">
</body>
</html>
-------------------------------
js/dwrTest.js
//dwr test js
function show(){
var uName = $("uName").value;
var pass = $("pass").value;
//通过这种方法，在js里组装一个对象
var user = {userName:uName,password:pass};
login.login(user,
function(userData){
$("uName").value = userData.userName;
$("pass").value = userData.password;
}
);
}
前台传递一个数组到后台，后台处理后，在返回这个数组
前台js：
function showArray(){
var arr = new Array("abc","haha");
login.testArray(arr,
function(data){
alert(data[0]);
}
);
}
-------------------------------------
后台处理方法：
public String[] testArray(String[] arr){
System.out.println(arr[0]);
arr[0] = "鄙视你";
return arr;
}
在dwr.xml里对convert没有配置。
前台传递一个date到后台，后台处理后，在返回这个date
后台：
public Date testDate(Date date){
System.out.println(date.toString());
return date;
}
------------------------------------
前台：
function showDate(){
var date = new Date();
login.testDate(date,
function(data){
alert(data);
}
);
}
dwr.xml里也没有配置
前台传递一个Map到后台，后台处理后，在返回这个Map
后台：
public Map<String, String> testMap(Map<String, String> map) {
map.remove("key1");
return map;
}
---------------------------------
前台js：
function showMap(){
//通过键值对的方法组装Map
var map = {key1:"gcgmh",key2:"hello"};
login.testMap(map,
function(data){
//取值是，里面一定要是字符串
alert(data["key2"]);
}
);
}
dwr.xml里也没有配置
前台传递一个List到后台，后台处理后，在返回这个List，前后台和数组的转换没什么区别
就是后台又处理数组变成处理List
前台js：
function showList(){
var list = new Array("hello","world");
login.testList(list,
function(data){
alert(data[0]);
}
);
}
-----------------------------------
后台：
public List<String> testList(List<String> list){
System.out.println(list.get(1));
return list;
}
dwr对泛型也支持，下面的list传递的就是一个user对象
前台js：
function showList2(){
var list = new Array({userName:"gcgmh",password:"88888888"},{userName:"admin",password:"666666"});
login.testList2(list,
function(data){
alert(data[1].userName);
}
);
}
------------------------------
后台：
public List<User> testList2(List<User> users){
System.out.println(users.get(0).getUserName());
return users;
}
dwr与spring的整合
1.有个service，代码为：
package com.jwxd.service.impl;
import com.jwxd.pojo.User;
import com.jwxd.service.IUserService;
public class UserServiceImpl implements IUserService{
public User dwrSave(User user) {
System.out.println(user.getUserName());
System.out.println(user.getPass());
System.out.println(user.getSex());
System.out.println(user.getAddress());
System.out.println("用户注册了！");
user.setUserName("ksd");
return user;
}
}
//在spring的applicationContext-beans.xml配置为：
<?xml version="1.0" encoding="UTF-8"?>
<beans
xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd">
<!-- 用户service -->
<bean id="userServiceImpl" class="com.jwxd.service.impl.UserServiceImpl">
</bean>
</beans>
------------------------------------------
//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>
<create javascript="userService" creator="spring">
<param name="beanName" value="userServiceImpl"></param>
</create>
<convert match="com.jwxd.pojo.User" converter="bean">
<param name="include" value="userName,pass,sex,address"></param>
</convert>
</allow>
</dwr>
----------------------------------
//通过前台js，想这个service发一个调用request，传一个user对象过去，service处理后，在返回这个对象。前台jsp的核心代码：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<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/userService.js"></script>
<script type="text/javascript">
function userReg()
{
var name = $("uName").value;
var pass = $("pass").value;
var sex = $("sex").value;
var address = $("address").value;
//封装一个js得user对象
var user = {userName:name,pass:pass,sex:sex,address:address};
alert(user.pass);
userService.dwrSave(user,
//data,为dwr为我们返回的user对象
function(data){
alert(data.userName);
}
);
}
</script>
</head>
<body>
<b>用户注册</b>
<s:form action="RegisterAction" method="get">
用户名：<input type="text" id="uName" name="uName"><br>
密 码：<input type="password" id="pass" name="pass"><br>
性 别：<input type="text" id="sex" name="sex"><br>
地 址：<input type="text" id="address" name="address"><br><br><br>
<s:submit value="submit"></s:submit>
</s:form>
<!-- dwr 调用 -->
<input type="button" value="dwr spring" onclick="userReg()">
</body>
</html>