Dwr教程（一）之用户名验证

  rel="File-List" href="file:///C:%5CDOCUME%7E1%5CXINGLE%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml"> rel="Edit-Time-Data" href="file:///C:%5CDOCUME%7E1%5CXINGLE%7E1%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_editdata.mso">  

CSDN中对应资源(包含源代码和dwr.jar包)地址： http://lxlzhn.download.csdn.net/

 

一．下载相应的包，配环境

1. 下载dwr.jar，官方具体地址为（），有多个版本，我用的是version: 2.0.M3；不同的版本会有些异同比如其中最常用的DWRUtil工具，所以要注意版本。查看版本很简单，解压开dwr.jar,查看dwr-version.properties就可以了

2. 我使用的是MyEclipse 5.5.1 GA+Tomcat5.5这个应该没有什么影响，只是个人感觉这两个版本的比较稳定一点,JDK用的是1.6的,只要是1.5以上的应该都没有问题,或者低版本的也没有问题,不过推荐使用1.5以上的。

3. 创建一个Web Project名为dwrHello,配置web.xml:(配置方法很固定的，以下是简单的配置)

<?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">

    <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>

 

    <welcome-file-list>

       <welcome-file>index.jsp</welcome-file>

    </welcome-file-list>

</web-app>

 

 

二． 编写相应的后台service类并配置到dwr，是dwr能够在前台直接调用

1. 创建dwr.service包，在其中创建TestDwrService.java类：

package dwr.service;

 

public class TestDwrService {

   

    /**

     * 验证用户名

     * @param username 用户名

     * @return 验证后的信息

     */

    public String checkUsername(String username){

       //要返回的验证后的信息

       String flag = "";

       //这里可以改为调用数据库验证，原理都是一样的，

       if(username.equals("lxl"))

           flag = "用户名可用";

       else

           flag = "用户名不存在";

       return flag;

    }

}

 

2. 配置TestDwrService.java到dwr.xml中：

<?xml version="1.0" encoding="UTF-8"?>

<!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，也可以使用spring。

           javascript赋值说明在前台客户端js代码中可以直接使用testDwrService

来调用下面java类dwr.service.TestDwrService中的方法，实质就是一个映射-->

       <create creator="new" javascript="testDwrService">

           <param name="class" value="dwr.service.TestDwrService"/>

       </create>

</allow>

</dwr>

三．使用dwr自带的测试来测试配置的dwr是否可用

       1. 经过第二步骤之后，就可以在前台使用dwr来调用service层相应java类了。Dwr自带了一个用于测试是否配置成功的测试方法（有点测试驱动的感觉，每次配置好映射，最好先在这里测试通过，当然并非所有的都可以测试）。

2. 在浏览器中输入http://localhost:8080/dwrHello/dwr，其中dwrHello是你自己的工程名字，dwr将把你带到测试页面上。如果配置正确，则会看到：

Classes known to DWR:

• testDwrService (dwr.service.TestDwrService)

3. 点击testDwrService，就可以进入testDwrService的测试页面了。

Methods For: testDwrService (dwr.service.TestDwrService)

To use this class in your javascript you will need the following script includes:

  <script type='text/javascript' src='/dwrHello/dwr/interface/testDwrService.js'></script>
  <script type='text/javascript' src='/dwrHello/dwr/engine.js'></script>

In addition there is an optional utility script:

  <script type='text/javascript' src='/dwrHello/dwr/util.js'></script>

Replies from DWR are shown with a yellow background if they are simple or in an alert box otherwise.
The inputs are evaluated as Javascript so strings must be quoted before execution.

There are 10 declared methods:

• checkUsername(  );  
• wait() is not available: Methods defined in java.lang.Object are not accessible
• wait() is not available: Methods defined in java.lang.Object are not accessible
• wait() is not available: Methods defined in java.lang.Object are not accessible
• hashCode() is not available: Methods defined in java.lang.Object are not accessible

       4. 其中蓝色字体的部分三句话，是在接下来自己写前台JS调用的时候要用的，这三句话只有一个部分会变，就是“/dwrHello”部分,这个指代工程的名字，是你开始时命名的名称，这里是dwrHello。

       5. 接下来在“Execute”按扭的一行，是用于测试相关方法的，会提供一个输入框，这里因为要判断的是个字符串所以可以直接输入。输入的内容必须在””之内才会有效。先输入一个测试数据lxl，点击“Execute”,显示checkUsername(  );  用户名可用 ，然后再输入其他的，如xxx，则结果是checkUsername(  );  用户名不存在 。则表明你前面所有的代码和配置都是正确的。

四．编写前台JS代码调用service

       1. 完成了第三步之后，就要开始写自己的前台了。

       2. 创建一个index.jsp页面，代码改为：

<%@ page language="java" pageEncoding="UTF-8"%>

 

<html>

    <head>

       <title>index.jsp</title>

 

       <!-- 导入DWR相关CSS和JS文件，第三步中已经介绍过了 -->

       <script type='text/javascript'

           src='/dwrHello/dwr/interface/testDwrService.js'></script>

       <script type='text/javascript' src='/dwrHello/dwr/engine.js'></script>

       <script type='text/javascript' src='/dwrHello/dwr/util.js'></script>

      

       <script type="text/javascript">  

       <!—-这个部分的JS代码是要自己写的，主要是利用dwr的util，注意不同版本的dwr调用dwr的util的方法不一样，我这里是DWRUtil，别的也有是dwr.util之类的，看到的时候要注意了，其实都是一样的 -->

           function check()

           {

              //dwr自带的一个loading，使用起来很方便，效果在页面的右上角显示

              //这个和Gmail的那个效果很一样，实际上dwr也承认是copy Gmail的

              DWRUtil.useLoadingMessage("正在验证用户名...");

             

               //使用DWRUtil的getValue方法可以获取页面上相应id的值

               var name = DWRUtil.getValue("username");

              

               //调用类TestDwrService的checkUsername(String username)方法，其中

               //function(data)是回调函数，即带着返回值的一个函数，这里的返回值是data

               testDwrService.checkUsername(name,function(data){

                   //使用DWRUtil的setValue方法可以为相应id赋值

                   DWRUtil.setValue("nameMessage" ,data);

                 }

               );

           }

          

       </script>

    </head>

    <body>

       <form action="">

           username : <input type="text" id="username" onblur="check();" />

           <span id="nameMessage" ></span>

           <br/>

           password : <input type="text" id="passwrod" />

           <br/>

           <input type=button value=submit></input>

           <input type=reset value=reset></input>

       </form>

       <br>

    </body>

</html>

 

3. 然后就是部署到Tomcat了，完成后，保证tomcat是开着的，然后输入http://localhost:8080/dwrHello，就可以看到页面了。

4. 按照前面的测试数据来测试，就可以看到效果了。下面是一个错误的效果，这里也可以再进一步做判空处理：（我这里没有做

username :  用户名不存在 
password :