DWR3.0框架入门—— 实现ajax

框架简介：DWR（Direct Web Remoting）

本Demo实现的基本功能：

点击jsp界面的按钮，通过DWR调用到服务器端的java代码，在控制台打印出jsp输入框中的值

Demo构建流程：

1.新建Web工程

2.导入jar包：commons-logging-x.x.x.jar和dwr3.0.jar

3.在web.xml中加入DWR使用能力：

    <servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>uk.ltd.getahead.dwr.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>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

4.在src中新建类MessagePush：

package sugar.dwr;

public class MessagePush 
{
    
    public void send(String msg)
    {
        System.out.println(msg);
    }

}

5.与web.xml同级目录下创建dwr.xml，用来配置js函数与java代码的映射关系：

<?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= "messagePush">
                      <param name="class" >sugar.dwr.MessagePush</param>
               </create>
        </allow> 
</dwr>

6.在index.jsp中写入js逻辑：

<%@page pageEncoding="utf-8"%>
<html>  
<head>
 <SCRIPT type="text/javascript" src="js/jquery-1.4.3.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/messagePush.js" ></script>
    
    <SCRIPT type="text/javascript">
      $(function(){ 
        $('#btn').click(function(){
        var txt = $('#txt').val();
        messagePush.send(txt);
        });
      }); 
    </SCRIPT>
  </head>
  <body>
   <table>
    <tr><Td><input type="text" id="txt" /></Td></tr>
   <tr><td><input type="button" value="Click" id="btn" /></td></tr>
   </table>
  </body>
</html>

说明：jsp文件中必须引入几个js,它们都是隐含存在的，不用考虑它们在哪儿。其中engine.js和util.js是固定的。另外的一个js的名称就是dwr.xml中配置的类名。

测试结果：

posted on 2014-04-12 15:48 苏荷酒吧阅读(251) 评论(0) 收藏举报