dwr入门 - 02 - HelloWord解释&&施用javabean _Web前端

dwr入门 -- 02 -- HelloWord解释&&使用javabean

1、在web.xml添加一段代码,解决上一篇第一访问时的错：DefaultContainer can't find a classes。修改结果如下：

<?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>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
		<init-param>
			<description></description>
			<!-- 调试模式 -->
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
		<!-- 解决错误：DefaultContainer can't find a classes -->
		<!-- 原因：DwrServlet初始化的时候会去检查注释的类,找不到就抱错. -->
		<init-param> 
            <param-name>classes</param-name> 
            <param-value>java.lang.Object</param-value> 
        </init-param> 
	</servlet>
	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>
</web-app>

?2、现在我们传递使用javabean, 首先建个javabean：

package com.xx;

import java.io.Serializable;

public class UserBean implements Serializable {
	private String name;
	private String pwd;

	public UserBean() {
	}

	public UserBean(String name, String pwd) {
		this.name = name;
		this.pwd = pwd;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getPwd() {
		return pwd;
	}

	public void setPwd(String pwd) {
		this.pwd = pwd;
	}

}

?然后修改Test类里的hello方法：

package com.xx;

public class Test {
	public UserBean hello(UserBean user) {
		//return "您好！" + user.getName() + ", 您的密码是: " + user.getPwd();
		return user;
	}
}

3、传递javabean需要在dwr.xml配置文件中做一些修改：

<!DOCTYPE dwr PUBLIC 
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" 
    "http://www.getahead.ltd.uk/dwr//dwr20.dtd">
<dwr>
	<allow>
		<!-- 
			 creator="new/spring/none/scripts" 业务组件的创建类型
			 javascript="Hello" 表示JS可以用Hello来调用com.xx.Test里的内容
			 					前台页面JS引用此组件的名称,名称需要唯一 
			 scope="session/request/application/page" 组件的生命周期
		-->
		<create creator="new" javascript="Hello">
			<!-- param配置业务组件的创建参数: name名称;value类全名称 -->
			<param name="class" value="com.xx.Test" />
			<!-- include授权方式.保护业务组件方法的可见性: method可以访问的方法名（默认所有都可以） -->
			<!-- exclude排除方式. -->
			<!-- auth EJB角色访问控制方式: method可以访问的方法名;role访问角色 -->
		</create>
		
		<!-- converter配置数据类型的转换器,一般是bean,因为基本类型的转换器DWR默认设置 -->
		<!-- match使用此转换器的java对象全名称 -->
		<convert match="com.xx.UserBean" converter="bean" />
	</allow>
	<!-- <signatures>标签是用来声明java方法中List、Set或者Map参数所包含的确切类,以便java代码作出判断. -->
	<!-- <signatures> 
		<![CDATA[ 
			import java.util.List; 
			import com.xx.Test; 
			import com.xx.UserBean; 
			Test.hello(List<UserBean>); 
		]]>
	</signatures>  -->
</dwr>

?4、JSP也改下,有用户名和密码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>dwr : hello word</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<script type='text/javascript' src='<%=basePath%>dwr/interface/Hello.js'></script>
		<!-- 负责客户端服务器端沟通 -->
		<script type='text/javascript' src='<%=basePath%>dwr/engine.js'></script>
		<!-- 包含了工具函数简化页面处理 -->
		<script type='text/javascript' src='<%=basePath%>dwr/util.js'></script>
		<script type='text/javascript' src='<%=basePath%>hello.js'></script>
	</head>

	<body>
		<input id="user_name" type="text" />
		<input id="user_pwd" type="password" />
		<input type='button' value='提交' onclick='hello();' />
		<div id="result"></div>
	</body>
</html>

?5、最后就是交互的hello.js文件修改：

function hello() {
	var user_name = $('user_name').value; // document.getElementById("user_name").value
	// 或者 DWRUtil.getValue("user_name") 直接取值
	var user_pwd = DWRUtil.getValue("user_pwd");
	var user = {name:user_name, pwd:user_pwd };
	Hello.hello(user, callback);
}
// 回调函数
function callback(msg) {
	//DWRUtil.setValue('result', msg);
	for(var property in msg){ 
		alert("property:"+property); 
		alert(property+"的值是:"+msg[property]); 
	}
	// 知道属性名的情况下直接msg.name
}

/* DWRUtil.getText("id"),返回一个select下拉菜单中的text值.仅适用于select类型的元素. 
 * DWRUtil.onReturn(event, submitFunction) 定义在输入框中按回车的响应,可以防止执行submit. 
 */

?6、OK.部署,启动服务器,访问！

1、要注意DWR异步机制带来的数据可能不同步问题

2、返回结果只能是一个值所以要详细设计返回结果类型

3、要注意Java引用传递和JavaScript值传递的差异

4、连续多次后台请求尽量采用批量调用(一个批量方法调用以DWREngine.beginBatch()开始WREngine.endBatch()结束.当DWREngine.endBatch()被调用时就说明开始调用批量方法,DWR就将这些方法打包在一起作为一次请求发送给服务器.)

5、尽量将JavaScript的逻辑处理代码抽取成一个独立的文件