dwr入门

Posted on 2008-08-21 21:15 H2O 阅读(671) 评论(0)  编辑  收藏 所属分类: ajax

Dwr入门操作手册

DWR配置和使用

设置DWR的使用是简单的:将DWR的jar文件拷入Web应用的WEB-INF/lib目录中,在web.xml中增加一个servlet声明,并创建DWR的配置文件。

DWR的分发中需要使用一个单独的jar文件。你必须将DWR servlet加到应用的WEB-INF/web.xml中布署描述段中去。

<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>
            <load-on-startup>1</load-on-startup>
    </
servlet>

    
<servlet-mapping>
        
<servlet-name>dwr-invoker</servlet-name>
        
<url-pattern>/dwr/*</url-pattern>
    
</servlet-mapping>

 一个可选的步骤是设置DWR为调试模式—象上面的例子那样—在servlet描述段中将debug参数设为true。当DWR在调试模式时,你可以从HTMl网页中看到所有的可访问的Java对象。包含了可用对象列表的网页会出现在/WEBAPP/dwr这个url上,它显示了对象的公共方法。所列方法可以从页面中调用,允许你,第一次,运行服务器上的对象的方法。下图显示了调试页的样子:

  调试页

  现在你必须让DWR知道通过XMLHttpRequest对象,什么对象将会接收请求。这个任务由叫做dwr.xml的配置文件来完成。在配置文件中,定义了DWR允许你从网页中调用的对象。从设计上讲,DWR允许访问所有公布类的公共方法,但在我们的例子中,我们只允许访问几个方法。下面是我们示例的配置文件:

 

<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www.getahead.ltd.uk/dwr/dwr20.dtd">  
<dwr>
    
<allow>
    
<!-- javascript的对象是TestDWR,create="new"是DWR自己创建类,通过new关键字创建java类的实例 -->
       
<create creator="new" javascript="TestDWR">
       
<param name="class" value="com.yd.colbean.TestDWR"></param>
       
<!-- include表示客户端通过TestDWR可以调用服务器对象的那些方法 
        如果不写则代表可以调用该类的所有公有(public)方法
        -->
            
<include method="getHello"/>
        
</create>      
  
</allow>
</dwr>

 

上面的文件实现了我们例子中的两个目标。首先,<convert>标记告诉DWR将com.yd.pojos.Userss对象的类型转换为联合数组,因为,出于安全的原因,DWR默认的不会转换普通bean。第二,<create>标记让DWR暴露出com.yd.imp.UserCol类给JavaScript调用;我们在页面中使用JavaScript文件被javascript属性定义。我们必须注意<include>标记,它指明了com.yd.imp.UserCol类的哪些方法可用。

1: 基本的客户端发送值和接受值

过程:

1:导入包dwr.jar

2: 修改web。Xml文档

3:编写java处理类(代码从简)

package com.yd.colbean;

public class TestDWR {

public String getHello(String name){

return "你好: "+name;

}

}

4:编写Dwr.xml,在其中暴露可以脚本中间调用的方法。其中javascript="TestDWR"指在 客户端脚本中调用的名字。<include method="getHello"/> 暴露的方法

<dwr>

    <allow>

       <create creator="new" javascript="TestDWR">

<param name="class"  value="com.yd.colbean.TestDWR"/>

            <include method="getHello"/>

        </create>       

   </allow>

</dwr>

5:下面编写Test1.jsp

先在jsp页面中间增加下面的代码。这个可以在上面提到的测试页面中间找到,复制过来即可

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

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

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

<!--这里的代码是从前面的调试页面复制过来的。à

<!下面的代码自己编写,进行业务处理-->

<SCRIPT type='text/javascript'>

function test1(){

     //通过方法得到值 

     var s=DWRUtil.getValue("username"); //使用getvalue方法得到id为username的值

     TestDWR.getHello(s,del)//调用getHello方法,第一个参数为传递的值,最后一个参数为回调程序

     }

//回调程序,参数为返回的结果

     function del(data){

     //将值保存在页面的变量中间

     DWRUtil.setValue("a",data); //调用setValue方法来设置值

     DWRUtil.setValue("rst",data);

     }

    </SCRIPT>

使用DWRUtil必须注意的事项:必须在web.xml中配置DWR Servlet在web服务器启动时就加载实例化即 配置
<load-on-startup>1</load-on-startup>

  </head>

    <body>

   <INPUT type="text" id="username">

    <INPUT type="button" value="提交" onclick="test1()">

    <INPUT type="text" id="rst">

    <div id="a">

</div>

下面点击按钮就可以通过ajax向服务器发请求。

2: 对表格数据进行操作

刚才我们在客户端使用文本框和div块来输入数据可接受数据,在这个中间可以使用下面的方法来处理数据。

DWRUtil.getValue(username); //这个方法得到页面中间idusername的值

DWRUtil.setValue(rst,你好); //这个方法设置页面中间idusername的值

在客户端显示数据还有其他的方式,其中使用比较多的有表格显示数据集合,下拉框显示多条数据。

在dwr中间可以使用方法来比较方便的再客户端操作显示数据

先看基本的方法

DWRUtil.removeAllOptions('rst');//删除列表中的所有option

DWRUtil.addOptions('rst', goods,"id","msg");

//添加option对象,goods是对象数组,其属性id作为option的value值。其属性msg作为option的text的值

DWRUtil.removeAllRows("rst");//删除tbody中间所有的行

DWRUtil.addRows("rst", goods,[getid, getmsg]);//添加表的行,goods数组

下面例子说明:

先看后台bean:

Message.java封装基本的消息

package com.yd.colbean;

public class Message {

private Integer id;

private String msg;

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getMsg() {

return msg;

}

public void setMsg(String msg) {

this.msg = msg;

}

}

控制类

package com.yd.colbean;

import java.util.ArrayList;

import java.util.List;

public class UserCol {

private static List ls=new ArrayList();

//模拟得到所有的的消息集合,

public List getUserMessage(){

if(ls.size()<2){//如果消息数量太少,就删除,另外增加,在实际中应该从数据库中取值

ls.clear();

for(int i=0;i<6;i++){

Message msg=new Message();

msg.setId(new Integer(i));

msg.setMsg("消息内容"+i);

ls.add(msg);

}

}

return ls;

}

}

配置文件

Web.xml同上

dwr.xml

<dwr>

    <allow>

    <!-- convert将Message的集合变成javascript中间的对象数组-->

        <convert  converter="bean" match="com.yd.colbean.Message"/>

        

        <create creator="new" javascript="userAction" scope="session">

<param name="class" value="com.yd.colbean.UserCol"></param>

<include method="getUserMessage" />

</create>

    </allow>

</dwr>

注意在服务器返回集合到客户端时,需要进行转换位javascript的对象。需要定义convert

下面是

Test1.jsp

同样需要复制

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

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

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

到页面中间

<SCRIPT type='text/javascript'>

//这个函数在点击按钮的时候调用。首先删除rst这个tbody中间的内容。然后请求服务器的方法

    function test1() {

    DWRUtil.removeAllRows("rst");

    userAction.getUserMessage(fillTable);

  }

  //这里定义对数据的转化规则,转换规则是用对象数据中的每一个对象来进行转换,返回一个字符串或其他对象,显示在表格的td中间

  var getid = function(unit) 

  if (unit.id % 2 == 0)

   return "<font color=red>"+unit.id+"</font>";

  else

   return "<font color=green>"+unit.id+"</font>";

 };

 

  var getmsg = function(unit) { return unit.msg};

 

  var bt=function(unit) {

     return "<input type='button' value='delete' onclick='alert(\""+unit.id+"\");'/>";

   };

   //回调函数 ,在这里会对返回的goods对象集合,循环调用对应的转化规则来得到没一行的内容来显示

  function fillTable(goods) {

//对于dwr2,我们需要增加下面这个语句

//这个方法用来设置dwr是不是转化对应的html标签

  DWRUtil.setEscapeHtml(false);

DWRUtil.addRows("rst", goods,[getid, getmsg,bt]);

  }

    </SCRIPT>

  </head>

  <body>

    <INPUT type="button" value="得到消息" onclick="test1()">

<table>

<thead> <!这个是表格的头 -->

<th>id</th>

<th>msg</th>

<th>aa</th>

</thead>

    <tbody id="rst"> <!这个是表格的主体,使用ajax来动态的修改 -->

    </tbody>

    </table>

  </body>

最后显示结果

点击按钮


只有注册用户登录后才能发表评论。


网站导航:
 

posts - 0, comments - 21, trackbacks - 0, articles - 101

Copyright © H2O