來寫個AJAX版的聊天室吧!先看看直接使用AJAX要如何做到,首先需要一個簡單的聊天室Servlet…
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 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物件如下…
1234567891011121314151617181920212223 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中設定一下…
12345678910111213141516171819202122 <?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回應取得時,將訊息以一列一列的表格方式顯示出來,另外還設定了週期性的輪詢,即使不輸入新訊息,也可以週期性的取得新的聊天訊息…
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 <!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物件…
1234567891011121314151617181920212223 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中開放一下…
12345678910111213 <?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這樣的方式來存取。
接著是簡單的客戶端網頁…
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647 <!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來 取得傳回的訊息…
簡單抓個畫面…
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/caterpillar_here/archive/2006/09/30/1311605.aspx
分享到:
相关推荐
(网络整理资料)DWR入门与应用,手把手教你从配置到实例的应用
DWR_入门与应用-林信良(良葛格)
dwr实例 - 这是本人,开发的:小游戏 [大家一起来赚钱] 本例子可做为dwr入门级应用; 有什么问题请和我沟通;
本资料详细讲述了dwr的配置及简单常见的应用,方便快速上手!
基于dwr框架的web应用的设计与使用,是介绍dwr入门的不错的文章。
请先到 http://getahead.ltd.uk/dwr/ 下载 dwr.jar ,放到 WEB-INF/lib 下 … 负责处理客户端请求,并呼叫 Java 对象的是 DWRServlet , DWR 其实也有些 Model 2 的味道,只是 View 的这一层比较弱,因为放到客户端...
内容包括: DWR教程.txt DWR实例教程.txt DWR学习.txt DWR应用总结.txt DWR购物车实例 DWR与界面开发 一个简单的例子 DWR 入门与应用-林信良(良葛格).doc
DWR是是关于开发web2.0网站实现动态交互性,增强用户体验度的一个Ajax框架技术,本文档共10章,其内容依次为:第1章.DWR入门,含3小节;第2章.web.xml配置,含6小节;第3章.dwr.xml配置,含4小节;第4章.整合,含8小节;...
AJAX中的DWR的入门和应用,与大家一起共享
DWR基础应用教程。比较基础知识,入门用
这个是dwr的初级出门例子但对现在已有的应用来说已经够了
ssh+dwr 整合案例.4个框架整合应用入门案列
DWR中文文档和dwr.jar包 DWR中文文档v0.9Ajax向我们袭来的时候,很多写代码的程序员看到了Ajax的发展前景,但并不是每一个程序员都能将页面与代码完美整合在一起,DOM、CSS、javascript让人眼花缭乱,不知从何下手。...
一个很基本的dwr应用示例,很好地说明了dwr工作原理,附工程源代码
DWR是一个Java库,能够使浏览器中的JavaScript和服务器上的Java进行互动,并尽可能简单地调用Java的方法。本文档讲一下关于这个框架的入门配置及应用,服务器采用tomcat
经过本人测试,dwr教程高质量教程,一个星期之内,从入门到实际的项目应用。
快速入门dwr能够然你很容易的理解dwr比快速应用
Java 开发人员与网页设计人员的桥梁 DWR…呃!我懒得写简介了…直接来看看可以做什么吧!… 请先到 http://getahead.ltd.uk/dwr/ 下载 dwr.jar,放到WEB-INF/lib下… 负责处理客户端请求,并呼叫Java对象的是...
DWR入门 8 1.1 简介 8 1.2 第一个DWR程序:Hello World 9 1.2.1 将DWR放入你的工程 9 1.2.2 编辑配置文件 9 1.2.3 编写service 10 1.2.4 测试DWR 10 1.2.5 编写一个jsp 11 1.3 本...