DWR的一个最简单的例子 -

taiyang.yu

浏览: 19103 次
性别:
来自: 西安

最近访客更多访客>>

oym1989

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (16)

社区版块

存档分类

DWR的一个最简单的例子

DWR JavaScript Spring JSF Struts

1。加载DWR的jar包。
2。配置web.xml

   
<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>
                 
                 
      <create creator="new" javascript="Demo">
                 
      <param name="class" value="action.DwrTest"/>

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

分享到：