Posted on 2005-10-23 11:52
qiyadeng 閱讀(570)
評(píng)論(0) 編輯 收藏 所屬分類(lèi):
WEB
一個(gè)Ajax Projecthttp://getahead.ltd.uk/dwr/,DWR，就是有點(diǎn)像遠(yuǎn)程方法調(diào)用，但是它的文檔里強(qiáng)調(diào)過(guò)，這個(gè)遠(yuǎn)程方法的調(diào)用是安全的，所有安全問(wèn)題應(yīng)該不需要擔(dān)心。
下面測(cè)試個(gè)簡(jiǎn)單的例子，算是開(kāi)始。這個(gè)例子是來(lái)自它的文檔的一篇文章，主要是實(shí)現(xiàn)一個(gè)類(lèi)似聊天室的東西，有個(gè)輸入文本框，還要個(gè)顯示部分。用戶(hù)輸入的信息點(diǎn)擊發(fā)送就可以把消息顯示到顯示區(qū)域，當(dāng)然是不需要刷新的^_^。
1、先到DWR網(wǎng)站去下載個(gè)jar包dwr.jar，地址是：http://getahead.ltd.uk/dwr/download，并把該包放到自己的webproject的WEB-INF/lib目錄下。
2、然后修改配置文件web.xml把加入如下信息：
<servlet>
<display-name>DWR Servlet</display-name>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
這個(gè)應(yīng)該和我們其他的app配置沒(méi)什么兩樣的。
3、配置DWR專(zhuān)門(mén)的配置文件dwr.xml(放到和web.xml一個(gè)目錄下)，這個(gè)文件就是部署你可以被調(diào)用的遠(yuǎn)程的方法和類(lèi)。
<dwr>
<allow>
<create creator="new" javascript="Chat">
<param name="class" value="com.motel168.chat.Chat"></param>
</create>
<convert converter="bean" match="com.motel168.chat.Message"/>
</allow>
</dwr>
這個(gè)文件描述的服務(wù)器端的類(lèi)Chat和JavaBean,Message。
4、對(duì)應(yīng)的服務(wù)器類(lèi)文件：
Chat.java
package com.motel168.chat;
import java.util.LinkedList;
import java.util.List;
public class Chat {
static LinkedList messages = new LinkedList();
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;
}
}
Message.java
package com.motel168.chat;
public class Message {
long id = System.currentTimeMillis();
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;
}
}
5、在前端頁(yè)面調(diào)用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<script type='text/javascript' src='/DWR/dwr/interface/Chat.js'></script>
<script type='text/javascript' src='/DWR/dwr/engine.js'></script>
<script type='text/javascript' src='/DWR/dwr/util.js'></script>
<head>
<title>chat.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<P>聊天記錄：</P>
<DIV id="chatlog"></DIV>
<p>
請(qǐng)輸入信息：<INPUT id="text"/>
<INPUT type="button" value="發(fā)言" onclick="sendMessage()"/>
</body>
</html>
<script language="javascript">
function sendMessage(){
var text = DWRUtil.getValue("text");
DWRUtil.setValue("text","");
Chat.addMessage(gotMessages,text);
}
function gotMessages(messages)
{
var chatlog = "";
for (var data in messages)
{
chatlog = "<div>" + messages[data].text +
"</div>" + chatlog;
}
DWRUtil.setValue("chatlog", chatlog);
}
</script>
<script type='text/javascript' src='/DWR/dwr/interface/Chat.js'></script> 是動(dòng)態(tài)產(chǎn)生的js文件，另外兩個(gè)util.js,engine.js是兩個(gè)javascript庫(kù)文件。
后面有個(gè)DWRUtil類(lèi)可以參考對(duì)應(yīng)的文檔。
最后應(yīng)該是類(lèi)似下面這個(gè)效果：
