[AJAX-JSP]使用DWR框架验证用户名是否存在

[LIUYONGCN]

[2011-06-30]

[http://www.cnblogs.com/liuyongcn/]
一 什么是DWR
DWR（Direct Web Remoting）是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站.它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样。

二 实现步骤
1-下载dwr框架的jar包（http://directwebremoting.org/dwr/）并将jar包放入环境
2-配置web.xml

<web-app>
<!-- DWR配置 -->
<servlet>
<servlet-name>dwr</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</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

<!-- 其他略。。。。 -->

</web-app>
3-在包test下创建UserBiz类，用于测试

public boolean checku(String s){
System.out.println(s);
if("test".equalsIgnoreCase(s)){
return true;
}else{
return false;
}
}

4-在WER-INF文件夹中创建dwr.xml,用于页面调用指定方法。 value指向指定的类，method指向指定的方法

配置如下：
<?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 creator="new" javascript="DWRUserCheck">
<param name="class" value="test.UserBiz" />
<include method="checku"/>
</create>
</allow>
</dwr>

配置完成后可以通过Http://localhost:8080/ajaxtest/dwr测试是否成功（ajaxtest是项目名）,点DWRUserCheck进入具体内容页面
可以在页面上输入测试数据测试是否可以达到想要的功能，
页面上的以下3条信息需要写在功能的JSP页面上.否则DWRUserCheck.checku(uname,back);时候会提示找不到函数。
<script type='text/javascript' src='/ajaxtest/dwr/engine.js'></script>
<script type='text/javascript' src='/ajaxtest/dwr/interface/DWRUserCheck.js'></script>
<script type='text/javascript' src='/ajaxtest/dwr/util.js'></script>、

5-页面JS实现调用后台方法
//script引用都为src='/项目名/dwr.....'
<script type='text/javascript' src='/ajaxtest/dwr/engine.js'></script>
<script type='text/javascript' src='/ajaxtest/dwr/interface/DWRUserCheck.js'></script>
<script type='text/javascript' src='/ajaxtest/dwr/util.js'></script>

<script type="text/javascript">
function checku(name){
//获取登陆名
var uname=name.value;
if(!uname){
//登陆名为空显示错误信息，并获取文本框焦点
document.getElementById("div").innerHTML="<font size='2' color='orange'> 用户名不能为空</font>";
name.focus();
return;
}
//发送请求checku（参数,回调函数）
DWRUserCheck.checku(uname,back);
}
//回调函数，完成操作后，最后调用这个函数显示结果
function back(result){
//result是接收方法的返回值
if(result){
document.getElementById("div").innerHTML="<font size='2' color='orange'> 用户名已存在</font>"
}else{
document.getElementById("div").innerHTML="<font size='2' color='green'> √</font>"
}
}

</script>

<form action="index.jsp" method="post">
<html:form action="/login">
name : <html:text property="name" onblur="return checku(this)" /><div id="div" style="display:inline" ></div>
<br/>
<html:submit/><html:cancel/>
</html:form>
</form>