DWR框架配置过程

1、在WEB工程的lib目录中导入dwr，commons-logging.jar类库包
2、在web.xml中配置DWRServlet，映射地址为/dwr/*；
 <servlet>
      <servlet-name>ddd</servlet-name>
      <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
      <init-param>
          <param-name>debug</param-name>
          <param-value>true</param-value>
      </init-param>
      <init-param>
          <param-name>crossDomainSessionSecurity</param-name>
          <param-value>false</param-value>
      </init-param>
      <init-param>
          <param-name>allowScriptTagRemoting</param-name>
          <param-value>true</param-value>
      </init-param>
  </servlet>
 
  <servlet-mapping>
      <servlet-name>ddd</servlet-name>
      <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>    
3、创建DWR调用的Java文件，实现需调用的方法；
public class UserDaoImpl extends BaseDao implements UserDao {

    public List<Userinfo> getAll() {
        String sql = "select * from userinfo";
        List<Userinfo> list = new ArrayList<Userinfo>();
        rs = this.execQuery(sql, null);
        try {
            while (rs.next()) {
                Userinfo user = new Userinfo();
                user.setUid(rs.getInt("uid"));
                user.setUname(rs.getString("uname"));
                user.setUpass(rs.getString("upass"));
                list.add(user);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return list;
    }

    public Userinfo getUserById(int uid) {
        String sql = "select * from userinfo where uid=" + uid;
        Userinfo user = null;
        rs = this.execQuery(sql, null);
        try {
            while (rs.next()) {
                user = new Userinfo();
                user.setUid(rs.getInt("uid"));
                user.setUname(rs.getString("uname"));
                user.setUpass(rs.getString("upass"));
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return user;
    }

}
4、创建一个dwr.xml配置文件，配置Java类以及其它参数；
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
    "http://getahead.org/dwr/dwr20.dtd">

<dwr>
  <allow>
    <!-- First是在JS中调用方法的对象名 -->
    <create creator="new" javascript="First" scope="application">
    <!-- value中是对应的Java类 -->
      <param name="class" value="com.qijiabin.dao.impl.UserDaoImpl"/>
    </create>
    <convert match="java.util.Collection"  converter="collection"/>
    <!-- 定义做为返回值的JavaBean类 -->
    <convert converter="bean" match="com.qijiabin.entity.*"/>
  </allow>
</dwr>
5、在jsp页面中加入dwr.xml中JavaScript属性值.js、engine.js和util.js文件；
6、在jsp页面中创建两个函数，一个是我们要触发的事件，一个是回调函数（回调函数中的data参数是调用Java方法的返回值）；
一、利用dwr返回对象（点击当前行，在列表下面显示详情）
<script type='text/javascript' src='/TestmvcAndFenye/dwr/interface/First.js'></script>
    <script type='text/javascript' src='/TestmvcAndFenye/dwr/engine.js'></script>
    <script type='text/javascript' src='/TestmvcAndFenye/dwr/util.js'></script>
    <script type="text/javascript">
        function getFkList(uid){
            First.getUserById(uid,rtnFkList);
        }
        function rtnFkList(data){
                var trTitle =     '<table  align="center" border="1"  >'+
                                   '<tr>'+
                                    '<th colspan="8" align="center">'+
                                        '详情'+
                                    '</th>'+
                                '</tr>'+
                                '<tr>'+
                                    '<td>序号</td>'+
                                    '<td>姓名</td>'+
                                    '<td>密码</td>'+
                                '</tr>';
                var trContent = '<tr>'+
                                            '<td >'+data.uid+'</td>'+
                                            '<td >'+data.uname+'</td>'+
                                            '<td >'+data.upass+'</td>'+
                                '</tr>';
                var trBottom = '</table>';
        
            document.getElementById("fkDetail").style.display = "inline";
               document.getElementById("fkDetail").innerHTML = trTitle + trContent + trBottom;
        }
    </script>


 <body>
   <table border="1" bordercolor="green" align="center">
           <caption align="center"><a href="add.jsp">添加用户</a></caption>
           <tr>
               <td>用户编码</td><td>用户姓名</td><td>用户密码</td><td>操作</td>
           </tr>
           <c:forEach var="user" items="${list}" varStatus="item">
               <c:if test="${item.index%2==0}">
                   <tr onclick="getFkList(${user.uid});" bgcolor="#8000ff">
               </c:if>
               <c:if test="${item.index%2!=0}">
                   <tr onclick="getFkList(${user.uid});" bgcolor="#ff8000">
               </c:if>
               <td>${user.uid }</td><td>${user.uname }</td><td>${user.upass }</td>
               <td>
                   <a href="UserServlet?op=prepare&uid=${user.uid }">修改</a>
                   <a href="UserServlet?op=delete&uid=${user.uid }">删除</a>
               </td>
               </tr>
           </c:forEach>
           <tr>
            <td colspan="4" align="center"><a href="UserServlet?op=getAll&pageId=1">首页</a>&nbsp;&nbsp;
            <a href="UserServlet?op=getAll&pageId=${pageId-1 }">上一页</a>&nbsp;&nbsp;
            ${pageId }/${pageCount }&nbsp;&nbsp;
            <a href="UserServlet?op=getAll&pageId=${pageId+1 }">下一页</a>&nbsp;&nbsp;
            <a href="UserServlet?op=getAll&pageId=${pageCount }">尾页</a></td>
        </tr>
   </table>
   <div id="fkDetail" style="display:none"></div>
  </body>
二、利用dwr返回对象集合（点击当前行，在列表下面显示详情）
 <script type='text/javascript' src='/TestmvcAndFenye/dwr/interface/First.js'></script>
    <script type='text/javascript' src='/TestmvcAndFenye/dwr/engine.js'></script>
    <script type='text/javascript' src='/TestmvcAndFenye/dwr/util.js'></script>
    <script type="text/javascript">
        function getFkList(uid){
            First.getAll(rtnFkList);
        }
        function rtnFkList(list){
                var trTitle =     '<table  align="center" border="1"  >'+
                                   '<tr>'+
                                    '<th colspan="8" align="center">'+
                                        '详情'+
                                    '</th>'+
                                '</tr>'+
                                '<tr>'+
                                    '<td>序号</td>'+
                                    '<td>姓名</td>'+
                                    '<td>密码</td>'+
                                '</tr>';
                                
                var trContent = "";
                if(list!=undefined && list!=''){
                       for(var i=0;i<list.length;i++){
                           var vo = list[i];
                           trContent += '<tr>'+
                                            '<td >'+vo.uid+'</td>'+
                                            '<td >'+vo.uname+'</td>'+
                                            '<td >'+vo.upass+'</td>'+
                                      '</tr>';
                       }
                }else{
                    alert("无反馈记录");
                    document.getElementById("fkDetail").innerHTML="";
                    return;
                }                
                                
                var trBottom = '</table>';
        
            document.getElementById("fkDetail").style.display = "inline";
               document.getElementById("fkDetail").innerHTML = trTitle + trContent + trBottom;
        }
    </script>


<body>
   <table border="1" bordercolor="green" align="center">
           <caption align="center"><a href="add.jsp">添加用户</a></caption>
           <tr>
               <td>用户编码</td><td>用户姓名</td><td>用户密码</td><td>操作</td>
           </tr>
           <c:forEach var="user" items="${list}" varStatus="item">
               <c:if test="${item.index%2==0}">
                   <tr onclick="getFkList();" bgcolor="#8000ff">
               </c:if>
               <c:if test="${item.index%2!=0}">
                   <tr onclick="getFkList();" bgcolor="#ff8000">
               </c:if>
               <td>${user.uid }</td><td>${user.uname }</td><td>${user.upass }</td>
               <td>
                   <a href="UserServlet?op=prepare&uid=${user.uid }">修改</a>
                   <a href="UserServlet?op=delete&uid=${user.uid }">删除</a>
               </td>
               </tr>
           </c:forEach>
           <tr>
            <td colspan="4" align="center"><a href="UserServlet?op=getAll&pageId=1">首页</a>&nbsp;&nbsp;
            <a href="UserServlet?op=getAll&pageId=${pageId-1 }">上一页</a>&nbsp;&nbsp;
            ${pageId }/${pageCount }&nbsp;&nbsp;
            <a href="UserServlet?op=getAll&pageId=${pageId+1 }">下一页</a>&nbsp;&nbsp;
            <a href="UserServlet?op=getAll&pageId=${pageCount }">尾页</a></td>
        </tr>
   </table>
   <div id="fkDetail" style="display:none"></div>
  </body>