最简单的DWR例子

什么是DWR？

    DWR是一个Open Source的 java项目。DWR可以让JavaScript调用运行在Web服务器里面的JAVA程序。简单一点或者专业一点就是Easy AJAX for JAVA. 官方网站：http://getahead.org/dwr ，下面将一步一步的介绍怎么完成一个简单DEMO :TestDwr。

一、从官方网站下载DWR.jar包

    把他直接放到apache-tomcat-7.0.27\lib目录下面

二、新建Web Project工程

编写一个TestDwr.Java类如下:

// TestDwr.java

[java] view plaincopyprint?
  1. package com.test.ajax; 
  2.  
  3. publicclass TestDwr 
  4.  
  5. {    
  6.  
  7.     public String getMyName() 
  8.  
  9.     {       
  10.  
  11.         return"Hello Casco!";  
  12.  
  13.     }       
  14.  
  15. }    
package com.test.ajax;

publicclass TestDwr

{   

    public String getMyName()

    {      

        return"Hello Casco!"; 

    }      

}

三、修改web.xml

// web.xml

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8"?>   
  2.  
  3. <web-app version="3.0"    
  4.  
  5.     xmlns="http://java.sun.com/xml/ns/javaee"    
  6.  
  7.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    
  8.  
  9.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee    
  10.  
  11.     http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">   
  12.  
  13.   <display-name></display-name>    
  14.  
  15.   <servlet>   
  16.  
  17.     <servlet-name>dwr-invoker</servlet-name>   
  18.  
  19.     <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>   
  20.  
  21.     <init-param>   
  22.  
  23.         <param-name>debug</param-name>   
  24.  
  25.         <param-value>true</param-value>   
  26.  
  27.     </init-param>   
  28.  
  29.   </servlet>   
  30.  
  31.   <servlet-mapping>   
  32.  
  33.     <servlet-name>dwr-invoker</servlet-name>   
  34.  
  35.     <url-pattern>/dwr/*</url-pattern>   
  36.  
  37.   </servlet-mapping>   
  38.  
  39.   <welcome-file-list>   
  40.  
  41.     <welcome-file>index.jsp</welcome-file>   
  42.  
  43.   </welcome-file-list>   
  44.  
  45. </web-app>    
<?xml version="1.0" encoding="UTF-8"?>  

<web-app version="3.0"   

    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_3_0.xsd">  

  <display-name></display-name>   

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

四、新建dwr.xml文件

    把TestDwr类配置在dwr.xml中，dwr.xml是DWR的配置文件，所有需要在JavaScript中调用的java的类都必须在这个文件中描述 (必须与web.xml同级)

// dwr.xml

[html] view plaincopyprint?
  1. <?xml version="1.0" encoding="UTF-8"?>   
  2.  
  3. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">   
  4.  
  5. <dwr> 
  6.  
  7. <allow> 
  8.  
  9. <create creator="new" javascript="CASCO" scope="application"> 
  10.  
  11. <param name="class" value="com.test.ajax.TestDwr"/> 
  12.  
  13. </create> 
  14.  
  15. </allow> 
  16.  
  17. </dwr>  
<?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="CASCO" scope="application">

<param name="class" value="com.test.ajax.TestDwr"/>

</create>

</allow>

</dwr>

五、配置DWR包中的引用

    把\dwr\WEB-INF\lib复制到testDwr\WebRoot\WEB-INF\lib。

六、编写jsp文件

    编写调用TestDwr类中的getMyName方法的index.jsp文件：

[javascript] view plaincopyprint?
  1. <%@ page language="java" contentType="text/html; charset=GB18030" 
  2.  
  3.   pageEncoding="GB18030"%> 
  4.  
  5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  6.  
  7. <html> 
  8.  
  9. <head> 
  10.  
  11. <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> 
  12.  
  13. <title>DWR - Test Home</title> 
  14.  
  15. <script type='text/javascript' src='dwr/engine.js'></script> 
  16.  
  17. <script type='text/javascript' src='dwr/util.js'></script> 
  18.  
  19. <script type='text/javascript' src='dwr/interface/CASCO.js'></script> 
  20.  
  21. <script language="javascript">  
  22.  
  23.     var mycall=function callBack(data){ 
  24.  
  25.         dwr.util.setValue("demo1",data); 
  26.  
  27.     } 
  28.  
  29.     function showMyName(){ 
  30.  
  31.         CASCO.getMyName(mycall); 
  32.  
  33.     } 
  34.  
  35.     function clearName(){ 
  36.  
  37.         demo1.value=""; 
  38.  
  39.     } 
  40.  
  41. </script> 
  42.  
  43. </head> 
  44.  
  45. <body> 
  46.  
  47.     <h1>Ajax Test Page</h1>     
  48.  
  49.     <input type="button" value="显示姓名" onclick="javascript:showMyName()">    
  50.  
  51.     <input type="button" value="清空" onclick="javascript:clearName()"><br>     
  52.  
  53.     <input type="text" id="demo1"><br>     
  54.  
  55.   
  56.  
  57. </body> 
  58.  
  59. </html>  
<%@ page language="java" contentType="text/html; charset=GB18030"

  pageEncoding="GB18030"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GB18030">

<title>DWR - Test Home</title>

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

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

<script type='text/javascript' src='dwr/interface/CASCO.js'></script>

<script language="javascript"> 

    var mycall=function callBack(data){

        dwr.util.setValue("demo1",data);

    }

    function showMyName(){

        CASCO.getMyName(mycall);

    }

    function clearName(){

        demo1.value="";

    }

</script>

</head>

<body>

    <h1>Ajax Test Page</h1>    

    <input type="button" value="显示姓名" onclick="javascript:showMyName()">   

    <input type="button" value="清空" onclick="javascript:clearName()"><br>    

    <input type="text" id="demo1"><br>    

 

</body>

</html>

七、编译运行

    在浏览器中输入 http://localhost:8080/TestDwr/，按“显示姓名”按钮，即可显示我们的函数getMyName内容。

posted @ 2013-10-21 13:55  tbyang  阅读(270)  评论(0)  编辑  收藏  举报