DWR入门教程之HelloWorld

最新推荐文章于 2017-04-10 18:07:45 发布

pangchao

最新推荐文章于 2017-04-10 18:07:45 发布

阅读量353

点赞数

分类专栏：编程随想文章标签： dwr javascript callback string user webapp

本文链接：https://blog.csdn.net/pangchao/article/details/4524248

版权

编程随想专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Java 开发人员与网页设计人员的桥梁 DWR… 呃！我懒得写简介了 … 直接来看看可以做什么吧！ …

请先到 http://getahead.ltd.uk/dwr/ 下载 dwr.jar ，放到 WEB-INF/lib 下 …

负责处理客户端请求，并呼叫 Java 对象的是 DWRServlet ， DWR 其实也有些 Model 2 的味道，只是 View 的这一层比较弱，因为放到客户端的 JavaScript 应用程序中 …

在 web.xml 中加入 DWRServlet…

Xml代码

<?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">
<display-name>dwrtest</display-name>
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.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>
</web-app>

<?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">
	<display-name>dwrtest</display-name>

	<servlet>
		<servlet-name>dwr-invoker</servlet-name>

		<servlet-class>org.directwebremoting.servlet.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>

</web-app>

接下来写个简单的 Hello 吧！

Java代码

package com.dwr;
public class HelloWorld {
private String name;
public HelloWorld(){
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String sayHello(String name) {
return "Hello, " + name;
}
}

package com.dwr;

public class HelloWorld {
	private String name;
	public HelloWorld(){
		
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String sayHello(String name) {
        return "Hello, " + name;
    }

}

客户端要呼叫这个 Java 对象，传给它参数，而后传回一个字符串，客户端再显示这个字符串，神奇？其实是要告诉 DWRServlet 这件事，这需要一个 dwr.xml，在WEB-INF目录下建立这个这个文件：

Xml代码

<!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="JDate">
<param name="class" value="java.util.Date"/>
</create>
<create creator="new" javascript="Hello">
<param name="class" value="com.dwr.HelloWorld"/>
</create>
</allow>
</dwr>

<!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="JDate">
      <param name="class" value="java.util.Date"/>
    </create>
    <create creator="new" javascript="Hello">
      <param name="class" value="com.dwr.HelloWorld"/>
    </create>
  </allow>
</dwr>

creator 设定为 new ，表示使用 Hello 的无参数建构子来生成对象， javascript 设定为 Hello ，表示客户端 JavaScript 程序可以使用 Hello 来呼叫对应的 onlyfun.caterpillar.Hello 物件。

来写个客户端的网页，当中有一个输入字段，这里我们建立一个index.html，内容如下：

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>DWR's HelloWorld</title>
<script type='text/javascript' src='dwr/interface/Hello.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='hello.js'></script>
</head>
<body>
<input id="user" type="text" /><input type='button' value='哈罗' onclick='hello();' /> <div id="result"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>DWR's  HelloWorld</title>
<script type='text/javascript' src='dwr/interface/Hello.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='hello.js'></script>
</head>
<body>
<input id="user" type="text" /><input type='button' value='哈罗' οnclick='hello();' />  <div id="result"></div>
</body>
</html>

dwr/interface/Hello.js 是由 DWRServlet 根据 dwr.xml 中的设定生成的， engine.js 负责客户端伺服端沟通， util.js 是一些好用的 JavaScript 程序，可以让您少写很多 JavaScript 。

hello.js 是我们自定义的函式，按下按钮后，会呼叫当中的 hello() 函式,因而需要在当前文件夹下建立一个hello.js:

Js代码

function hello(){
var user = $('user').value;

Hello.sayHello(user,callback);
}
function callback(msg){
DWRUtil.setValue('result',msg);
}

function hello(){
	var user = $('user').value;
	Hello.sayHello(user,callback);
}
function callback(msg){
	DWRUtil.setValue('result',msg);
}

${'user'} 取得输入字段的 DOM 对象， value 取得当中的域值，而后呼叫 Hello.hello() ，并将 value 当作参数传送 … 结果是呼叫 Server 端的 Hello Java 对象，当结果传回后，会呼叫 JavaScript 的 callback 函式， DWRUtil 的 setValue() 方法会将传回的 msg 设定给指定 id 的 DOM ，结果就是 … 啥！ AJAX 的功能在哪 … 就这个而言就是发出异步请求，而响应不用 Refresh 页面啦！

pangchao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DWR入门教程之HelloWorld

Java 开发人员与网页设计人员的桥梁 DWR… 呃！我懒得写简介了 … 直接来看看可以做什么吧！ … 请先到 http://getahead.ltd.uk/dwr/ 下载 dwr.jar ，放到 WEB-INF/lib 下 … 负责处理客户端请求，并呼叫 Java 对象的是 DWRServlet ， DWR 其实也有些 Model 2 的味道，只是 View 的这一层比较弱，因为放到客户端
复制链接

扫一扫

专栏目录