qiyadeng

专注于Java示例及教程
posts - 84, comments - 152, trackbacks - 0, articles - 34

DWR Sample

Posted on 2005-10-23 11:52 qiyadeng 阅读(554) 评论(0)  编辑  收藏 所属分类: WEB

一个Ajax Projecthttp://getahead.ltd.uk/dwr/,DWR,就是有点像远程方法调用,但是它的文档里强调过,这个远程方法的调用是安全的,所有安全问题应该不需要担心。

下面测试个简单的例子,算是开始。这个例子是来自它的文档的一篇文章,主要是实现一个类似聊天室的东西,有个输入文本框,还要个显示部分。用户输入的信息点击发送就可以把消息显示到显示区域,当然是不需要刷新的^_^。
1、先到DWR网站去下载个jar包dwr.jar,地址是:http://getahead.ltd.uk/dwr/download,并把该包放到自己的webproject的WEB-INF/lib目录下。
2、然后修改配置文件web.xml把加入如下信息:



 <servlet>
  <display-name>DWR Servlet</display-name>
  <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>
 </servlet>
 
 <servlet-mapping>
  <servlet-name>dwr-invoker</servlet-name>
  <url-pattern>/dwr/*</url-pattern>
 </servlet-mapping>

这个应该和我们其他的app配置没什么两样的。
3、配置DWR专门的配置文件dwr.xml(放到和web.xml一个目录下),这个文件就是部署你可以被调用的远程的方法和类。

<dwr>
  <allow>
    <create creator="new" javascript="Chat">
     <param name="class" value="com.motel168.chat.Chat"></param>
    </create>
    <convert converter="bean" match="com.motel168.chat.Message"/>
  </allow>
</dwr>


这个文件描述的服务器端的类Chat和JavaBean,Message。

4、对应的服务器类文件:
Chat.java
package com.motel168.chat;

import java.util.LinkedList;
import java.util.List;

public class Chat {
 static LinkedList messages = new LinkedList();
 public List addMessage(String text){
  if(text != null && text.trim().length()>0){
   messages.addFirst(new Message(text));
   while(messages.size() > 10){
    messages.removeLast();
   }
  }
  return messages;
 }
 public List getMessages(){
  return messages;
 }


}
Message.java
package com.motel168.chat;

public class Message {
 long id = System.currentTimeMillis();
 String text;
 
 public Message(String newtext){
  text = newtext;
  if(text.length()>256){
   text = text.substring(0,256);
  }
  text = text.replace('<','[');
  text = text.replace('&','_');
 }
 public long getId(){
  return id;
 }
 public String getText(){
  return text;
 }
}

5、在前端页面调用:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script type='text/javascript' src='/DWR/dwr/interface/Chat.js'></script>
<script type='text/javascript' src='/DWR/dwr/engine.js'></script>
<script type='text/javascript' src='/DWR/dwr/util.js'></script>

  <head>
    <title>chat.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  </head>
 
  <body>
 <P>聊天记录:</P>
 <DIV id="chatlog"></DIV>
 <p>
 请输入信息:<INPUT id="text"/>
 <INPUT type="button" value="发言" onclick="sendMessage()"/>
  </body>
</html>
<script language="javascript">
 function sendMessage(){
  var text = DWRUtil.getValue("text");
  DWRUtil.setValue("text","");
  Chat.addMessage(gotMessages,text);
 }
 function gotMessages(messages)
 {
     var chatlog = "";
     for (var data in messages)
     {
         chatlog = "<div>" + messages[data].text +
             "</div>" + chatlog;
     }
     DWRUtil.setValue("chatlog", chatlog);
 }
</script>

<script type='text/javascript' src='/DWR/dwr/interface/Chat.js'></script> 是动态产生的js文件,另外两个util.js,engine.js是两个javascript库文件。

后面有个DWRUtil类可以参考对应的文档。
最后应该是类似下面这个效果:
dwrsample.bmp


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


网站导航: