DWR 入門與應用(三)

原创 2006年09月30日 13:41:00
來寫個AJAX版的聊天室吧!先看看直接使用AJAX要如何做到,首先需要一個簡單的聊天室Servlet…

            
 onlyfun.caterpillar;
 
java.io.IOException;
java.io.PrintWriter;
java.util.LinkedList;
java.util.List;
 
javax.servlet.ServletException;
javax.servlet.http.HttpServletRequest;
javax.servlet.http.HttpServletResponse;
 
ChatRoomServlet javax.servlet.http.HttpServlet javax.servlet.Servlet
LinkedList<Message> messages = LinkedList<Message>();

ChatRoomServlet()
();


List<Message> addMessage(String text)
(text != && text.trim().length() > 0)
messages.addFirst( Message(text));
(messages.size() > 10)
messages.removeLast();


 
messages;

 
List<Message> getMessages()
messages;


doPost(HttpServletRequest request, HttpServletResponse response) ServletException, IOException
List<Message> list = ;

(.equals(request.getParameter()))
list = addMessage(request.getParameter());

(.equals(request.getParameter()))
list = getMessages();

 
PrintWriter out = response.getWriter();
response.setContentType();
response.setHeader(, );
 
out.println();
( i = 0; i < list.size(); i++)
String msg = list.get(i).getText();
out.println( + msg + );

out.println();



Message物件如下…

            
 onlyfun.caterpillar;
 
Message
id = System.currentTimeMillis();
String text;

Message(String newtext)
text = newtext;
(text.length() > 256)
text = text.substring(0, 256);

text = text.replace(, );
text = text.replace(, );

 
getId()
id;

 
String getText()
text;



Servlet接受訊息新增與查詢,判斷的方式是檢查請求參數task是send或query。

Servlet會以XML傳回目前List當中的訊息,客戶端可以查詢或插入新訊息時,取得目前List中的訊息,接著在web.xml中設定一下…

            
<?xml version= encoding=?>
<web-app id= version= xmlns= xmlns:xsi= xsi:schemaLocation=>
<servlet>
<description>
</description>
<display-name>
ChatRoomServlet</display-name>
<servlet-name>ChatRoomServlet</servlet-name>
<servlet-class>
onlyfun.caterpillar.ChatRoomServlet</servlet-class>
</servlet>
 
<servlet-mapping>
<servlet-name>ChatRoomServlet</servlet-name>
<url-pattern>/ChatRoomServlet</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>


在網頁中,使用者可以在輸入訊息後按下按鈕送出資訊,並在XML回應取得時,將訊息以一列一列的表格方式顯示出來,另外還設定了週期性的輪詢,即使不輸入新訊息,也可以週期性的取得新的聊天訊息…

            
<!DOCTYPE HTML PUBLIC >
<html>
<head>
<meta http-equiv= content=>
<title>Chat Room</title>
 
<script type=>
var xmlHttp;
 
function createXMLHttpRequest()
(window.ActiveXObject)
xmlHttp = ActiveXObject();

(window.XMLHttpRequest)
xmlHttp = XMLHttpRequest();


 
function sendMessage()
var msg = document.getElementById().value;

(msg == )
refreshMessage();
;


var param = + msg;
ajaxRequest(param);
document.getElementById().value = ;

 
function queryMessage()
var param = ;
ajaxRequest(param);

 
function ajaxRequest(param)
var url = + Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange = refreshMessage;
xmlHttp.open(, url, );
xmlHttp.setRequestHeader(,
);
xmlHttp.send(param);


function refreshMessage()
(xmlHttp.readyState == 4)
(xmlHttp.status == 200)
var messages = xmlHttp.responseXML.getElementsByTagName();

var table_body = document.getElementById();
var length = table_body.childNodes.length;
(var i = 0; i < length; i++)
table_body.removeChild(table_body.childNodes[0]);


var length = messages.length;
(var i = length - 1; i >= 0 ; i--)
var message = messages[i].firstChild.data;
var row = createRow(message);

table_body.appendChild(row);

setTimeout(, 2000);



 
function createRow(message)
var row = document.createElement();
var cell = document.createElement();
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
row;

 
</script>
 
</head>
<body>
 
<p>
Your Message:
<input id=/>
<input type= value=
onclick=/>
</p>
 
<p>Messages:</p>
<table align=>
<tbody id=></tbody>
</table>
 
</body>
</html>


簡單抓個畫面… 


直接用AJAX,後端用JSP/Servlet,您要對請求參數做些判斷,看看是新增訊息或查詢,並要自行輸出XML,有的沒的…

改成DWR的話,就很簡單了,寫個簡單的Java物件…

            
 onlyfun.caterpillar;
 
java.util.LinkedList;
java.util.List;
 
Chat
LinkedList<Message> messages = LinkedList<Message>();
 
List addMessage(String text)
(text != && text.trim().length() > 0)
messages.addFirst( Message(text));
(messages.size() > 10)
messages.removeLast();



messages;

 
List getMessages()
messages;



接著…在dwr.xml中開放一下…

            
<?xml version= encoding=?>
<!DOCTYPE dwr PUBLIC >

<dwr>
<allow>
 
<create creator= javascript=>
<param name= value=/>
</create>

<convert converter= match=/>
</allow>
</dwr>


使用者取得訊息時,是直接傳回List物件,而List中裝的是Message物件,Message物件是自訂物件,conterver設定為 bean,表示DWR會自動將Message的getter名稱轉換為傳回客戶端的JavaScript物件中的屬性,例如Message中有 getText(),則在客戶端可以用message.text這樣的方式來存取。

接著是簡單的客戶端網頁…

            
<!DOCTYPE HTML PUBLIC >
<html>
<head>
<meta http-equiv= content=>
<title>Insert title here</title>
 
<script src= type=></script>
<script src= type=></script>
<script src= type=></script>
 
<script type=>
function sendMessage()
var text = DWRUtil.getValue();
DWRUtil.setValue(, );
Chat.addMessage(text, gotMessages);

 
function gotMessages(messages)
var chatlog = ;
(var data in messages)
chatlog = + messages[data].text +
+ chatlog;

DWRUtil.setValue(, chatlog);
setTimeout(, 2000);

 
function queryMessage()
Chat.getMessages(gotMessages);

</script>
 
</head>
<body>
 
<p>
Your Message:
<input id=/>
<input type= value=
onclick=/>
</p>
 
<p>Messages:</p>
<div id=></div>
 
</body>
</html>


當List物件傳回時,它成為gotMessages(messages)中的messages物件,而messages物件中包括 Message物件轉換後對應的JavaScript物件,由於我們已經設定了Converter,所以可以用messages[data].text來 取得傳回的訊息…

簡單抓個畫面…

一个简单额Python MVC框架(3)

MVC中的M已经介绍完了,C和V都是用户代码,先看几个工具类:A)全局变量类,用户定义全局变量和一个用于产生普通对象的类型:gl_A=1 gl_B='a' class Obj: def __i...
  • hawksoft
  • hawksoft
  • 2015年03月28日 16:54
  • 1763

Java初学者入门指南

跟其他语言相比,大家或许会觉得Java很难,因为Java一开始给人的感觉就不是平易近人和蔼可亲的,甚至对于从未接触过Java的人而言,Java是非常难上手的。其实,完全是一种偏见,Java的入手,可以...
  • u010619705
  • u010619705
  • 2013年05月29日 11:45
  • 486

Mybatis入門實例

一 工程目錄結構
  • jungle0127
  • jungle0127
  • 2014年05月18日 00:43
  • 368

Mybatis入門筆記

Mybatis入門筆記Mybatis入門筆記 了解Mybatis持久层框架 Mybatis的jar包下载 日志文件的配置 Mybatis的工作流程了解Mybatis——持久层框架首先了解ibatis ...
  • kidmiddle
  • kidmiddle
  • 2016年11月01日 17:36
  • 168

Photon + Unity3D 线上游戏开发 学习笔记(一)

大家好, 我也是学习Photon + unity3D 的新手 有什么说错
  • nicepainkiller
  • nicepainkiller
  • 2014年05月25日 13:33
  • 4130

SCSS 15分鐘入門

原文地址:http://eddychang.me/blog/others/91-scss-15-mins.html SCSS(Sassy CSS,時髦的CSS)是SASS中的一種新式語法,SAS...
  • u013692049
  • u013692049
  • 2017年03月29日 16:45
  • 250

Docker 實作入門

Docker 實作入門 建立日期 2014-12-05 09:46      最近更新在 2014-12-17 16:23作者是 黃儀銘 目的 主要介紹 Docker 的實作,會提到以...
  • xinghun_4
  • xinghun_4
  • 2015年08月22日 10:55
  • 467

redis 入門筆記

# String ##set get set mykey "abc" get mykey set counter 100 ##incr counter return 101 ##incrby ...
  • mochong
  • mochong
  • 2017年03月28日 14:34
  • 58

Unity3D游戏开发入门学习笔记

学习内容概要: 软件面板功能、材质球、预制体、摄像机、灯光、鼠标键盘输入、组件、刚体、碰撞体、PC端游戏打包发布.... 第1课:课程介绍与Unity3D环境搭建 1.Unity3D,一...
  • JNBINW
  • JNBINW
  • 2017年01月21日 17:06
  • 1239

Maven--DWR入门配置

配置步骤: 1.在pom.xml中导入DWR包 org.directwebremoting dwr 3.0.0-RELEASE 2.设置web.xml在这个xml中加入相应的...
  • Javer_Lo
  • Javer_Lo
  • 2015年11月25日 15:58
  • 1549
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DWR 入門與應用(三)
举报原因:
原因补充:

(最多只允许输入30个字)