理论不说了，直接上实例。
实例分4部分功能：
1.Say Hello : 调用java带参方法
2.Get Data : 调用java无参方法
3.下拉菜单联动
4.简单聊天室
图片：
代码：
1.web.xml：这个不用说了吧，直接写上。
|
<?xml version="1.0" encoding="UTF-8"?>
<web-app id="WebApp_ID" version="2.4"
xmlns=""
xmlns:xsi=""
xsi:schemaLocation=" /web-app_2_4.xsd">
<display-name>dwr</display-name>
<servlet>
<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>
<welcome-file-list>
<welcome-file>dwr.html</welcome-file>
</welcome-file-list>
</web-app>
|
2.dwr.xml：将Java类型转化为JavaScript类型。
|
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"">
<dwr>
<allow>
<create creator="new" javascript="ajaxTest">
<param name="class" value="com.test.ajax.AjaxTest" />
</create>
<convert converter="bean" match="com.test.ajax.Message"/>
</allow>
</dwr>
|
3.AjaxTest.java：所有Java向JavaScript公开的方法都在这里。
|
package com.test.ajax;
import java.util.Date;
import java.util.LinkedList;
import java.util.List;
import java.util.Map;
import java.util.TreeMap;
public class AjaxTest {
public String dispCurrentTime() {
return new Date().toString();
}
public String sayHello(String name) {
return "Hello " + name + " !";
}
public String getInitData() {
return "Init Data";
}
private Map<String, String[]> bikes;
public AjaxTest() {
bikes = new TreeMap<String, String[]>();
bikes.put("2000", new String[] { "2000 T1", "2000 T2", "2000 T3" });
bikes.put("2001", new String[] { "2001 A1", "2001 A2" });
bikes.put("2002", new String[] { "2002 BW1", "2002 BW2", "2002 BW" });
bikes.put("2003", new String[] { "2003 S320" });
bikes.put("2004", new String[] { "2004 TA1", "2004 TA2", "2004 TA3" });
}
public String[] getYears() {
String[] keys = new String[bikes.size()];
int i = 0;
for (String key : bikes.keySet()) {
keys[i++] = key;
}
return keys;
}
public String[] getBikes(String year) {
return bikes.get(year);
}
private static LinkedList<Message> messages = new LinkedList<Message>();
public 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;
}
public List<Message> getMessages() {
return messages;
}
}
|
4.Message.java：聊天室消息类
|
/**
*
* TestDwr
* com.test.ajax.Message.java
* Nov 18, 2008 2:29:05 PM
*/
package com.test.ajax;
/**
* @author qbq
*
*/
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;
}
}
|
5.dwrhtml.js：使用DWR写的操作都在这里。
|
//Show time
var reply0 = function (data) {
if (data != null && typeof data == "object") {
alert(DWRUtil.toDescriptiveString(data, 2));
} else {
DWRUtil.setValue("timestr", DWRUtil.toDescriptiveString(data, 1));
}
};
//Say hello
function sayHello() {
ajaxTest.sayHello($("name").value, hello);
}
var hello = function (data) {
DWRUtil.setValue("hello", data);
};
//Dropdown List
function refreshYearList() {
DWRUtil.useLoadingMessage();
ajaxTest.getInitData(hello);
ajaxTest.getYears(populateYearList);
}
function populateYearList(list) {
DWRUtil.removeAllOptions("years");
DWRUtil.addOptions("years", list);
refreshBikeList();
}
function refreshBikeList() {
var year = $("years").value;
ajaxTest.getBikes(year, populateBikeList);
}
function populateBikeList(list) {
DWRUtil.removeAllOptions("bikes");
DWRUtil.addOptions("bikes", list);
}
//Chat
function sendMessage() {
var text = DWRUtil.getValue("text");
DWRUtil.setValue("text", "");
ajaxTest.addMessage(text, gotMessages);
}
function gotMessages(messages) {
var chatlog = "";
for (var data in messages) {
chatlog = messages[data].text + "
" + chatlog;
}
$('chatlog').innerHTML = chatlog;
setTimeout("queryMessage()", 2000);
}
function queryMessage() {
ajaxTest.getMessages(gotMessages);
}
|
6.dwr.html：页面。
|
<html>
<head>
<title>DWR Test</title>
<script type='text/javascript' src='dwr/interface/ajaxTest.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>
<script type="text/javascript" src="JS/dwrhtml.js"></script>
</head>
<body onload="refreshYearList();">
<table>
<tr>
<td>
<input type="text" id="name">
<input type="button" value="Say Hello" id="btnHello"
onclick="sayHello()">
</td>
<td>
<div id="hello"></div>
</td>
</tr>
<tr>
<td>
<br />
<br />
<input class='ibutton' type='button'
onclick='ajaxTest.dispCurrentTime(reply0);' value='Now Time'
title='Now Time' />
</td>
<td>
<br />
<br />
<span id='timestr' class='reply'></span>
</td>
</tr>
<tr>
<td>
<br />
<br />
年份：
<select id="years" onchange="refreshBikeList();"></select>
</td>
<td>
<br />
<br />
型号：
<select id="bikes"></select>
</td>
</tr>
<tr>
<td>
<p>
<br />
<br />
Your Message:
<input id="text" />
<input type="button" value="Send" onclick="sendMessage()" />
</p>
</td>
</tr>
<tr>
<td>
<p>
Messages:
</p>
<div id="chatlog"></div>
</td>
</tr>
</table>
</body>
</html>
|
Eclipse工程：
 |
| 文件: |
TestDwr.zip |
| 大小: |
455KB |
| 下载: |
下载 | |
阅读(1671) | 评论(0) | 转发(0) |
