DWR入门教程之HelloWorld
2009-09-06 10:30
447 查看
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>
接下来写个简单的 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;
}
}
客户端要呼叫这个 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>
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>
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);
}
${'user'} 取得输入字段的 DOM 对象, value 取得当中的域值,而后呼叫 Hello.hello() ,并将 value 当作参数传送 … 结果是呼叫 Server 端的 Hello Java 对象,当结果传回后,会呼叫 JavaScript 的 callback 函式, DWRUtil 的 setValue() 方法会将传回的 msg 设定给指定 id 的 DOM ,结果就是 … 啥! AJAX 的功能在哪 … 就这个而言就是发出异步请求,而响应不用 Refresh 页面啦!
请先到 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='哈罗' onclick='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 页面啦!
相关文章推荐
- DWR入门教程之HelloWorld
- DWR入门教程
- CodeIgniter框架入门教程-HelloWorld
- andorid jni入门教程一之helloworld
- [PHP]从HelloWorld开始的基本语法入门教程
- Struts 2 入门之 HelloWorld 教程
- ActiveMQ入门教程(三) - ActiveMQ P2P版的HelloWorld
- DWR 3.0 入门示例教程
- Unix/Linux环境C编程入门教程(21) 各个系统HelloWorld跑起来效果如何?
- DWR使用入门教程
- 【Cocos2d入门教程三】HelloWorld之一目了然
- ActiveMQ入门教程(四) - ActiveMQ Pub/Sub版的HelloWorld
- Apple Mac cocoa入门级教程- HelloWorld!
- DWR的环境搭建与第一个入门程序HelloWorld
- esri-leaflet入门教程(2)-地图的HelloWorld
- 9、dwr的入门教程
- DWR入门教程
- DWR入门教程
- andorid jni入门教程一之helloworld
- DWR入门教程(代码要稍微调整一下才能用)