DWR 入門與應用(三)

原创 2006年09月30日 13:41:00
來寫個AJAX版的聊天室吧!先看看直接使用AJAX要如何做到,首先需要一個簡單的聊天室Servlet…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
package onlyfun.caterpillar;
 
import java.io.IOException;
import java.io.PrintWriter;
import java.util.LinkedList;
import java.util.List;
 
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
public class ChatRoomServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
private static LinkedList<Message> messages = new LinkedList<Message>();

public ChatRoomServlet() {
super();
}

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

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Message> list = null;

if("send".equals(request.getParameter("task"))) {
list = addMessage(request.getParameter("msg"));
}
else if("query".equals(request.getParameter("task"))){
list = getMessages();
}
 
PrintWriter out = response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
 
out.println("<response>");
for(int i = 0; i < list.size(); i++) {
String msg = list.get(i).getText();
out.println("<message>" + msg + "</message>");
}
out.println("</response>");
}
}


Message物件如下…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package onlyfun.caterpillar;
 
public class Message {
private long id = System.currentTimeMillis();
private 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;
}
}


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

Servlet會以XML傳回目前List當中的訊息,客戶端可以查詢或插入新訊息時,取得目前List中的訊息,接著在web.xml中設定一下…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<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回應取得時,將訊息以一列一列的表格方式顯示出來,另外還設定了週期性的輪詢,即使不輸入新訊息,也可以週期性的取得新的聊天訊息…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Chat Room</title>
 
<script type="text/javascript">
var xmlHttp;
 
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
 
function sendMessage() {
var msg = document.getElementById("text").value;

if(msg == "") {
refreshMessage();
return;
}

var param = "task=send&msg=" + msg;
ajaxRequest(param);
document.getElementById("text").value = "";
}
 
function queryMessage() {
var param = "task=query";
ajaxRequest(param);
}
 
function ajaxRequest(param) {
var url = "ChatRoomServlet?timestamp" + new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange = refreshMessage;
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;");
xmlHttp.send(param);
}

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

var table_body = document.getElementById("dynamicUpdateArea");
var length = table_body.childNodes.length;
for (var i = 0; i < length; i++) {
table_body.removeChild(table_body.childNodes[0]);
}

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

table_body.appendChild(row);
}
setTimeout("queryMessage()", 2000);
}
}
}
 
function createRow(message) {
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell_data = document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
 
</script>
 
</head>
<body>
 
<p>
Your Message:
<input id="text"/>
<input type="button" value="Send"
onclick="sendMessage()"/>
</p>
 
<p>Messages:</p>
<table align="left">
<tbody id="dynamicUpdateArea"></tbody>
</table>
 
</body>
</html>


簡單抓個畫面… 



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

改成DWR的話,就很簡單了,寫個簡單的Java物件…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
package onlyfun.caterpillar;
 
import java.util.LinkedList;
import java.util.List;
 
public class Chat {
private static LinkedList<Message> messages = new LinkedList<Message>();
 
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;
}
}


接著…在dwr.xml中開放一下…
1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

<dwr>
<allow>
 
<create creator="new" javascript="Chat">
<param name="class" value="onlyfun.caterpillar.Chat"/>
</create>

<convert converter="bean" match="onlyfun.caterpillar.Message"/>
</allow>
</dwr>


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

接著是簡單的客戶端網頁…
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>Insert title here</title>
 
<script src="dwr/interface/Chat.js" type="text/javascript"></script>
<script src="dwr/engine.js" type="text/javascript"></script>
<script src="dwr/util.js" type="text/javascript"></script>
 
<script type="text/javascript">
function sendMessage() {
var text = DWRUtil.getValue("text");
DWRUtil.setValue("text", "");
Chat.addMessage(text, gotMessages);
}
 
function gotMessages(messages) {
var chatlog = "";
for (var data in messages) {
chatlog = "<div>" + messages[data].text +
"</div>" + chatlog;
}
DWRUtil.setValue("chatlog", chatlog);
setTimeout("queryMessage()", 2000);
}
 
function queryMessage() {
Chat.getMessages(gotMessages);
}
</script>
 
</head>
<body>
 
<p>
Your Message:
<input id="text"/>
<input type="button" value="Send"
onclick="sendMessage()"/>
</p>
 
<p>Messages:</p>
<div id="chatlog"></div>
 
</body>
</html>


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

簡單抓個畫面…

相关文章推荐

DWR 入門與應用(三)

  • 2009年02月19日 11:06
  • 84KB
  • 下载

DWR入门与应用

DWR入门  DWR众多Ajax框架中的一种,那么在众多框架中它的特色是什么呢?通过JavaScript代码调用服务器端的Java方法这也就是DWR的特色所在,今天自学了一下DWR框架现在就来做个简...

DWR 入门与应用(一)

DWR 入门与应用(一) Java 开发人员与网页设计人员的桥梁 DWR…呃!我懒得写简介了…直接来看看可以做什么吧!… 请先到 http://getahead.ltd.uk/dwr/ 下载...

入门DWR框架应用

DWR框架作用:能返回很多东西。你把对象放置request中,页面在拿出对象时,会刷新整个页面。用DWR就只用刷新局部。Ajax能返回页面和字符串。不能返回对象? 实例展示:用DWR返回St...

DWR 入門與應用

  • 2012年01月10日 22:05
  • 446KB
  • 下载

DWR入门与应用

  • 2008年02月02日 09:36
  • 268KB
  • 下载

dwr入门代码三

把滑鼠指到書的照片上,會顯示提示文字,這些提示文字本身不是存在網頁上的,而是在Server端,當滑鼠指到書上時,會用Request object去抓,然後顯示在框框中…先寫個Java類別吧!會抓pro...

DWR 入門與應用(一)

  • 2009年02月19日 11:03
  • 111KB
  • 下载

DWR 入門與應用-林信良

  • 2009年01月21日 16:10
  • 231KB
  • 下载

dwr入门实例三之批请求

在2月份实习的时候,公司给我们的第一个任务就是阅读开源项目的源代码,我选择的是dwr。由于刚开始实习的时候,在前端技术中心,故主要分析了下前端的代码和交互协议。 前面写了两篇入门实例,也做了一些简单...
  • lazy_p
  • lazy_p
  • 2011年09月25日 21:47
  • 765
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DWR 入門與應用(三)
举报原因:
原因补充:

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