DWR 入用（三）
<?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回取得，息以一列一列的表格方式示出，另外定了期性的，即使不入新息，也可以期性的取得新的聊天息…
<!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>?
抓面… 
?
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中放一下…
<?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的方式存取。
接著是的客端…
<!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取得回的息…
抓面… 
?
?
转载：http://www.javaworld.com.tw/jute/post/view?bid=49&id=167679&sty=1&tpg=2&age=0
?