dwr2 学习运用 _Web前端

dwr2 学习使用
在javaweb 开发中用户名验证下拉框绑定我使用最多的是dwr技术因其简单方便直接调用java方法
一下是我初学时用的例子 dwr2.0
需要两个包dwr.jar ，commons-logging-1.0.4.jar

dwr配置java类公开页面可以调用文件WEB-INF下

<dwr>
<allow>
<create creator="new" javascript="JsSortService">
<param name="class" value="DwrService"/>
</create>
</allow>
</dwr>

web.xml 需要加载dwr

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
	<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>
	</servlet>
	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

java类供页面调用

 import java.util.*;

@SuppressWarnings("unchecked")
public class DwrService {
	private static Map bb;
	static{
		bb=Collections.synchronizedMap(new HashMap());
		bb.put("猫", "001");
		bb.put("猪", "002");
		bb.put("狗", "003");
	}
	public String[] getdetal(){
		return (String[])bb.keySet().toArray(new String[]{});
		
	}
	public static Map getbb(){
		return bb;
	}
	public boolean isUser(String userName){
		if(userName.equals("hello"))
		return true;
		return false;
	}
}

js脚本文件

//绑定下拉框
function pp(map) {
	alert("");
	DWRUtil.removeAllOptions("book");
	add("book", map);
}
function add(_id, _map) {
	alert("");
	var sel = document.getElementById(_id);
	var opl = null;
	if (sel != null) {
		for (var prop in _map) {
			opt = document.createElement("option");
			opt.setAttribute("value", _map[prop]);
			opt.appendChild(document.createTextNode(prop));
			sel.appendChild(opt);
		}
	}
}
页面加载时调用函数
window.onload = function () {
	JsSortService.getbb(pp);
};
//验证用户名
function checkUser(widget) {
	var username = widget.value;
	JsSortService.isUser(username, showUsermsg);
}
//用户名验证dwr返回函数
var showUsermsg = function (data) {
	if (data) {
		DWRUtil.setValue("usermsg", "<font color='red'>"+data+"</font>", {escapeHtml:false});
	} else {
		DWRUtil.setValue("usermsg", "<font color='green'>error</font>", {escapeHtml:false});
	}
};

//调用页面

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<title>My JSP 'index.jsp' starting page</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="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/JsSortService.js"></script>
<script type="text/javascript" src="sele.js"></script>
</head>

<body>

	<form action="#">
		<table border="0">
			<tr>
				<td><select id="book" onchange="javascript:alert('');"></select>
				</td>
			</tr>
			<tr>
				<td>用户名：</td>
				<td><input type="text" name="username" id="username" value=""
					onblur="checkUser(this);" /><span id="usermsg"></span>
				</td>
			</tr>
			<tr>
				<td>密码：</td>
				<td><input type="password" name="userpwd" id="userpwd" value="">
				</td>
			</tr>
			<tr>
				<td><input type="submit" value="注册" />
				</td>
				<td><input type="reset" value="清空" />
				</td>
			</tr>
		</table>
	</form>
</body>

</html>