- 浏览: 137395 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
sparksun007:
不是你粗心,是作者应该更详细地备注说明下!
BufferedInputFile---thinking in java书上的一个问题??? -
coosummer:
推荐使用http://buttoncssgenerator.c ...
css制作button 带有滤镜效果 -
concideration:
thank you!
BufferedInputFile---thinking in java书上的一个问题??? -
lvlcl:
me too 。。。
BufferedInputFile---thinking in java书上的一个问题??? -
asi2012:
thingking in java就是经常使用很多他自定义的封 ...
BufferedInputFile---thinking in java书上的一个问题???
來寫個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來 取得傳回的訊息…
簡單抓個畫面…
发表评论
-
JS十进制,十六进制,八进制,二进制他们的转换总结
2009-06-13 17:38 5285十进制转换成其他进制 ... -
下载弹出提示框
2009-05-15 20:28 1351有个朋友问我下载弹出提示框的写法,具体如下: 出现 ... -
JS读取xml
2009-05-14 18:20 1777<!DOCTYPE html PUBLIC ... -
CSS参考样式
2009-04-20 14:09 848http://www.52css.com/css_templa ... -
类的访问权限
2009-04-14 11:25 819public:作用域为所有类。protected:作用域为当前 ... -
IO模式详解URL
2009-04-08 17:50 1076http://www.builder.com.cn/2008/ ... -
正则验证16进制
2009-04-01 17:55 3676今天我写了个正则表达式的16进制的 表达式 var hex = ... -
sql exists 总结
2009-02-25 09:38 1019select t1.code as bossgroupid ... -
js 对页面table数据排序
2009-02-13 18:41 1852function ieOrFireFox(ob) { ... -
MD5算法学习及其对用户密码加密的应用收藏和RSA加密及解密3DEX加密解密
2009-02-12 14:55 2326前段时间有个客户提交了一个需求,说我们的系统中,subscr ... -
JS 生成Word ,excel 例子
2009-02-10 17:46 2713<HTML> <HEAD> ... -
innerHTML,outerHTML,innerText,outerText区别
2009-02-10 17:36 1008innerHTML获取标签内的HTMLouterHTML获取标 ... -
css制作button 带有滤镜效果
2009-01-19 09:42 1651.btn { BORDER-RIGHT: ... -
java IO 经验总结
2009-01-18 13:48 1435IO 一直让我很困惑,下面我就IO 读取文件总体 总结下 In ... -
BufferedInputFile---thinking in java书上的一个问题???
2009-01-18 11:59 6666呵呵,我也发发现这个问题,刚开始我也很困惑,BufferedI ... -
web 网页材料制作的好去处
2008-12-08 15:37 751http://www.cool80.com/gif/index ... -
开发工作空间映射for windows operationsystem
2008-12-03 09:57 916SUBST M: D:\workspace -
创建dblink
2008-11-07 18:29 2453创建dblink create database link O ... -
time
2008-11-07 18:03 844import java.text.ParseExceptio ... -
正则表达式总结
2008-11-02 19:23 811一 正则表达式的正文。 正则表达式中使用了特殊符号。下面我就将 ...
相关推荐
dwr3的快速入门,一个简单实例.快速掌握dwr3的用法,快速开发
Dwr3+Spring3 全注解 annotation 方式实现
整合spring3mvc+hibernate4+spring-security3+dwr3的架包
这是一个简单的dwr3的俩聊天消息推送Demo,项目下载下来直接导入工程可用,最好使用tomcat7部署,简单案例,分享给大家。。
dwr3.x的实例,其中有反转ajax,轮询,文件上传,下载,时钟,编辑,查询等实例。
dwr3,推送消息,指定用户推送demo
struts2.1 spring2.5 ibatis2.3 dwr3 annotation配置 集成 此中例子不完整. 如要下载:http://download.csdn.net/source/2138885
DWR后台推送消息至web浏览器上,实时推送信息。
Struts2,Hibernate5,Dwr3
本项目为“基于Java的DWR3测试项目设计源码”,包含68个文件,其中包括54个JAR包、3个XML配置文件、2个字节码文件、2个JSP页面、2个Java源文件、1个Classpath文件、1个MyMetaData文件、1个Project文件、1个Prefs文件...
Maven3+mybatis3+dwr3+mysql5.5,请用Chrome浏览器,兼容性还未调试。 自己写的一个小系统,包含一个模块:产品模块。 基本这个模块包括的内容就比较多了,CRUD,无刷新查询,图片上传等, 其实也是整个系统最复杂的...
内容:dwr函数,和初级入门手册 简化ajax开发
Maven3+spring3+mybatis3+dwr3+mysql5.5,请用Chrome浏览器,兼容性还未调试。 自己写的一个小系统,包含一个模块:产品模块。 基本这个模块包括的内容就比较多了,CRUD,无刷新查询,图片上传等, 其实也是整个...
最好,最常用的Ajax框架 DWR
spring3 dwr3 聊天 dwr server push spring3+dwr3实现聊天功能 使用DWR SERVER PUSH 实现聊天功能
DWR的各种版本Jar文件——dwr2.0.5.jar、dwr2.0.6.jar、dwr3.rc1.jar
用dwr3实现推送功能,文件就是该实现代码
dwr 与ssh整合开发的web 聊天系统,采用了dwr3 的reverse ajax 以及服务器推送技术。自带源码和jar包
实现一个简单的Web版的聊天功能,Java使用开源框架最新版本的dwr3,包括相应的JSP页面的实现。
dwr3实现服务器根据用户id向前端用户精准推送的实例,直接解压可运行,实例内部注解清晰,初学者可也看懂。访问http://localhost:8080/dwr/登录,访问http://localhost:8080/dwr/MyJsp.jsp进行推送。 放到myeclipse...