当前位置: 代码迷 >> Web前端 >> DWR的一个最容易的例子
  详细解决方案

DWR的一个最容易的例子

热度:220   发布时间:2012-10-27 10:42:26.0
DWR的一个最简单的例子
1。加载DWR的jar包。
2。配置web.xml

   <!-- dwr -->
  <servlet>
<servlet-name>dwr-invoke</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-invoke</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>

3.在web.xml所在的目录下建立一个dwr.xml(这个xml的作用主要用于建立页面与java方法的对应法则)
<!DOCTYPE dwr PUBLIC  
    "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"  
    "http://getahead.org/dwr/dwr20.dtd">
<!-- 上面的说明一定要有-->
<dwr>
           <!-- allow段落里面定义的试DWR可以创建和转换的类。-->
  <allow>
                 <!--create用于定义一个在页面调用的js对象-->
                 <!--creator用来指定使用那种创造器,new:用于java.spring:通过Spring框架访问Bean.jsf:使用JSF的Bean.Struts:struts的formBean。pageflow:访问Beehive或Weblongic的pageflow. javascript用来定义一个页面调用后台方法的对象名称-->
      <create creator="new" javascript="Demo">
                 <!--param用于指向接受和处理的java类。在页面可以利用Demo来调用DwrTest这个java类里的方法-->
      <param name="class" value="action.DwrTest"/>
<!--如果<include method=“”/>没有配置;那class内的所有方法都是被允许调用的-->
                  <include method=“getName“ />  
    </create>
  </allow>
</dwr>

4.编写java类:DwrTest
public class DwrTest {

public int getName(String name){
System.out.println("my name is:"+name);
return 1;
}
}


5,在index.html里面我们嵌入
     <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/Demo.js'> </script>

    首先引入DWR中的两个核心javascript库:engine.js和util.js,它们分别是dwr中的核心引擎库和辅助工具函数库!
第三个引入的dwr/interface/Demo.js,实际上这个文件并不存在,这是由dwr在运行的时候动态生成的!Demo这个名称,跟dwr.xml文件中配置的对应对象的javascript属性一致!
而且,我们在使用的时候,直接使用Dome这个名称,作为这个对象的引用。直接调用这个对象的方法:getName(),这个方法的名称必须与JavaBean中的方法名称一致!
getName()方法有一个参数,同时返回一个值。我们可以直接传递参数,同时指定一个javascript函数来处理这个返回值
index.html页面代码:
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>DWR - Test Home</title>
  
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=gbk"> 
 
  <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/Demo.js'></script>  
  <script>
  /*ged()函数是用来取得页面的值,并将页面的值传递给服务器*/
   
    function ged(){   
    var name = dwr.util.getValue("demoName");
Demo.getName(name,haolejiaowo);  
    }
    /* 回调函数用来获取服务器传递过来的值,并将服务器响应的值动态展示到页面上*/
   
    function haolejiaowo(data){
    dwr.util.setValue("demoReply", data);
    }
   
    /**********原始的ajax传递方式*************/
    //创建XmlHttpRequest对象,首先对浏览器进行判断
    function createXmlHttpRequest(){   
    var xmlreq=false;
    if(window.XMLHttpRequest){
    xmlreq=new XMLHttpRequest();   
    }else if(window.ActiveXObject){
    try{
    //创建较新版本的对象
    xmlreq=new ActiveXObject("Msxml2.XMLHTTP");   
    }catch(e1){
    try{
    xmlreq=new ActiveXObject("Microsoft.XMLHTTP");   
    }catch(e2){
    }
    }   
    }
    return xmlreq;   
    }       
    var request;
    function testUse(){
    var useValue=document.getElementById("demoName").value;
    request=createXmlHttpRequest();//创建xmlHttpRequest对性     
          /*url用到了Struts1.2中的Actionneirong.需要自动以一个继承自DispathAction的Action*/
    var url="user.do?method=ajaxtest&useue="+useValue;
    //建立到服务器的新请求
request.open("post",url);
//向服务器发送请求
request.send();
//指定readyState属性改变时的事件处理
request.onreadystatechange=haole; 
    }
    function haole(){
           //status的状态0:未初始化。1:open方法成功调用以后。2:服务器已经应答客户端的请求。3:交互中,Http头部信息已经接收,相应数据尚未接收。4:完成。
        if(request.readyState==4&& request.status==200){        //responseText
         var data=request.responseText;
dwr.util.setValue("demoReply", data); }
    }
  </script>
</head>
<body>
<p>
Name:
<input type="text" id="demoName"/>
<input value="Send" type="button" onclick="testUse()"/>
<br/>
Reply: <span id="demoReply"></span>
</p>

</body>
</html>



  相关解决方案