[AJAXJSP]使用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>