DWR之入门学习笔记

相信很多朋友也和我一样，在开始学习dwr的时候，遇到一些不可思议的问题，同样很郁闷、头疼，都在网上找过很多资料。

而最常遇到的问题是：

 

    1、A request has been denied as a potential CSRF attack

    2、没有了以上的错误，但还是不能达到想要的效果。js校验失败。

   为了解决第一个问题，在web.xml文件中配置crossDomainSessionSecurity参数，其值为false（默认为true）

    而第二个问题，将

    <script type="text/javascript" src="js/util.js"></script>
  <script type="text/javascript" src="js/engine.js"></script>
  <script type="text/javascript" src="dwr/interface/user.js"></script>

修改为：

<script type="text/javascript" src="dwr/util.js"></script>
  <script type="text/javascript" src="dwr/engine.js"></script>
  <script type="text/javascript" src="dwr/interface/user.js"></script>即可解决。

虽然为了解决问题，花了我一天的时间，但我相信终有一天，我会因为今天的付出而有所收获。现在我就将今天所遇到的问题详细记录，希望能给跟我遇到同一问题朋友的做个参考。

我所做的实例名称为：DwrDemo（简单的表单注册校验功能）

在看下面的内容之前，请您先把dwr.jar包导入到该项目的/WEB-INF/lib下，再把dwr用到的两个重要的js文件也copy到项目的WebRoot下的比如放在js文件夹中（这里两个js到底用不用到，我还没有仔细查找资料。为什么这么说呢？先往下看看吧。）。

首先是创建数据库。这个数据库有

    id（主键）、username、password三个字段。怎么创建就不需要我废话了。下面顺便贴上我的代码（为了整个实例的整洁）

 

1. create table `test`.`dwrfirst`(
2.         `id` int default '' not null,
3.        `username` varchar(30) default '' not null,
4.        `password` varchar(20) default '' not null,
5.         primary key (`id`)
6.     );

其二创建一个po类User；

1. private int id;
2.     
3.     private String username;
4.     
5.     private String password;
6.     
7.     //这里省略各属性的set、get方法了...

其三创建一个封装（获取）数据库连接的类DBConnection类，代码如下： 

1. public class DBConnection {
3.     private static String driverClass = "org.gjt.mm.mysql.Driver";
4.     private static String url = "jdbc:mysql://localhost:3306/test";
5.     private static String name = "root";
6.     private static String pwd = "ldhhjldph";
8.     public static Connection getConnection() throws SQLException {
9.         try {
10.             Class.forName(driverClass);
11.             Connection conn = DriverManager.getConnection(url, name, pwd);
12.             return conn;
13.         } catch (ClassNotFoundException e) {
14.             System.err.println("加载驱动错误！！！");
15.             return null;
16.         }
17.     }
18. }

 

其四创建一个操作数据库（这里只提供一个方法：根据用户输入的用户名从数据库中查找，从而判断该用户名是否可用）

        UserDAO；

1. public class UserDAO {
3.     public boolean isExistUser(String name) {
4.         // 如果为true，则存在该用户
5.         boolean flag = true;
6.         String sql = "select count(*) from dwrfirst where username = ?";
7.         try {
8.             java.sql.Connection conn = DBConnection.getConnection();
9.             PreparedStatement pstmt = conn.prepareStatement(sql);
10.             pstmt.setString(1, name);
11.             ResultSet rs = pstmt.executeQuery();
12.             rs.next();
13.             if (0 == rs.getInt(1)) {
14.                 flag = false;
15.             }
16.         } catch (SQLException e) {
17.             System.err.println("执行语句错误" + e.getMessage() + sql);
18.         }
19.         return flag;
20.     }
21. }

其五再创建一个供jsp页面中js调用的类UserDAODwr；

1. public boolean isExistUser(String name)
2.     {
3.         UserDAO dao = new UserDAO();
4.         return dao.isExistUser(name);
5.     }

到了这里，服务器端的代码基本上写完了。

接下来，我们看看配置文件web.xml

要使项目支持dwr，出来dwr.jar这个包，还需要在web.xml文件中配置有关servlet；将该文件修改如下：

1. <?xml version="1.0" encoding="UTF-8"?>
2. <web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
4.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
5.     http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
6.     <welcome-file-list>
7.         <welcome-file>login.jsp</welcome-file>
8.     </welcome-file-list>
9.     <servlet>
10.         <servlet-name>dwr</servlet-name>
11.         <servlet-class>
12.             org.directwebremoting.servlet.DwrServlet
13.         </servlet-class>
14.         <init-param>
15.             <param-name>debug</param-name>
16.             <param-value>true</param-value>
17.         </init-param>
18.      </servlet>
19.     <servlet-mapping>
20.         <servlet-name>dwr</servlet-name>
21.         <url-pattern>/dwr/*</url-pattern>
22.     </servlet-mapping>
23. </web-app>

接下来还需要新建一个xml文件：dwr.xml，将你在jsp/html页面要调用的java类定义在这个文件中。

完整代码如下：

1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE dwr PUBLIC
3.     "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
4.     "http://getahead.org/dwr/dwr20.dtd">
6. <dwr>
8.     <allow>
9.         <create creator="new" javascript="user">
10.             <param name="class" value="org.qpyong.dwr.UserDAODwr" />
11.         </create>
12.     </allow>
14. </dwr>

下面我们来看看最后几步了。主要是一些页面：

login.jsp页面：

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3. <html>
4.     <head>
5.         <title>登录页面</title>
6.         <script type="text/javascript" src="js//util.js"></script>
7.         <script type="text/javascript" src="js/engine.js"></script>
8.         <script type="text/javascript" src="dwr/interface/user.js"></script>
9.         <script type="text/javascript">
10.         function callBack(flag)
11.         {
12.             if(flag)
13.             {
14.                 document.getElementById("error_td").innerHTML = "对不起,该用户名已存在！";
15.             }
16.             else
17.             {
18.                 document.getElementById("error_td").innerHTML = "恭喜,该用户名可用！";
19.             }
20.         }
21.         function isUsed()
22.         {
23.             var name = document.all.username.value;
24.             user.isExistUser(name,callBack);
25.         }
26.     </script>
27.     </head>
28.     <body>
29.         <center>
30.             <form action="index.jsp" method="post">
31.                 <table>
32.                     <tr align="center">
33.                         <td colspan="2">
34.                             <font size="3">用户注册</font>
35.                         </td>
36.                     </tr>
37.                     <tr align="center">
38.                         <td colspan="2" style="color: red; height: 20;" id="error_td"></td>
39.                     </tr>
40.                     <tr>
41.                         <td>用户名：</td>
42.                         <td><input type="text" name="username" οnchange="isUsed()" /></td>
43.                     </tr>
44.                     <tr>
45.                         <td>密  码：</td>
46.                         <td><input type="password" name="password" /></td>
47.                     </tr>
48.                     <tr>
49.                         <td colspan="2" align="center">
50.                             <input type="submit" value="注册" />
51.                         </td>
52.                     </tr>
53.                 </table>
54.             </form>
55.         </center>
56.     </body>
57. </html>

index.jsp页面：

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
3. <html>
4.   <head>
5.     <title>登录成功页面</title>
6.   </head>
7.   <body>
8.     <center>
9.         <font color="red">
10.         注册成功！！！
11.         </font>
12.     </center>
13.   </body>
14. </html>

到这里，这个项目总算完成了。

打开浏览器，输入：http://localhost:8080/DwrDemo/

打开login.jsp页面。在“用户名”右边的文本框中输入一些字符串。但不管你输的是什么字符串。在MyEclipse后台中你都会看到下面的错误：

严重: A request has been denied as a potential CSRF attack.

错误原因（引用别人的话）：请求被拒绝因为可能存在csrf(cross-site request forgeries,跨站请求伪造)攻击.
也就是说页面URL可能被跨站了的服务所调用.
例如:自己页面的一个图片.可能被其他站直接通过[img]....[/img]来引用.

我也采取了别人的意见，在web.xml文件中配置corssDomainSessionSecurity

修改web.xml文件，代码如下：

1. <servlet>
2.         <servlet-name>dwr</servlet-name>
3.         <servlet-class>
4.             org.directwebremoting.servlet.DwrServlet
5.         </servlet-class>
6.         <init-param>
7.             <param-name>debug</param-name>
8.             <param-value>true</param-value>
9.         </init-param>
10.         <init-param>
11.             <param-name>crossDomainSessionSecurity</param-name>
12.             <param-value>false</param-value>
13.         </init-param>
14.     </servlet>
15.     <servlet-mapping>
16.         <servlet-name>dwr</servlet-name>
17.         <url-pattern>/dwr/*</url-pattern>
18.     </servlet-mapping>

粗体部分是添加的代码。再次运行jsp页面，却发现出现如下图的错误：

在浏览器的状态栏上提示“网页上有错误”，而MyEclipse的后台上也没有刚才的那一错误信息了。

我就更觉得奇怪了。因为我是按照dwr参考资料上的代码写的，我感觉我没有“抄”错（代码）。

于是又在网上找资料。终于皇天不负苦心人。让我参考了一份很好的资料。

建议如下：

将

1. <script type="text/javascript" src="js/util.js"></script>
2. script type="text/javascript" src="js/engine.js"></script>
3. <script type="text/javascript" src="dwr/interface/user.js"></script>

改为如下：

1. <script type="text/javascript" src="dwr/util.js"></script>
2. <script type="text/javascript" src="dwr/engine.js"></script>
3. <script type="text/javascript" src="dwr/interface/user.js"></script>

再次运行login.jsp页面

效果图如下：

到此，这个小案例终于告一段落。

不过，我到现在也不明白，在jsp/html页面为什么不直接引用js文件夹的js文件。明天再上网查查资料。

说明：

    对于DWR，我也是初学者。有很地方也许说得不对、不好，请各位见谅。也请高手给给意见。