DWR 入門與應用（一）

最新推荐文章于 2022-05-18 23:31:52 发布
最新推荐文章于 2022-05-18 23:31:52 发布
阅读量556 收藏
点赞数
文章标签： dwr javascript java spring ajax callback
Java 開發人員與網頁設計人員的橋樑 DWR…呃！我懶得寫簡介了…直接來看看可以做什麼吧！…

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

負責處理客戶端請求，並呼叫Java物件的是DWRServlet，DWR其實也有些Model 2的味道，只是View的這一層比較弱，因為放到客戶端的JavaScript應用程式中…

在web.xml中加入DWRServlet… 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<?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>
  ajaxDWR</display-name>
  <servlet>
    <servlet-name>dwr-invoker</servlet-name>
    <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
    <init-param>
      <description>
      </description>
      <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吧！ 
1
2
3
4
5
6
7
 
package onlyfun.caterpillar;
 
public class Hello {
  public String hello(String name) {
      return "哈囉！" + name + "！您的第一個DWR！";
    }
}


客戶端要呼叫這個Java物件，傳給它參數，而後傳回一個字串，客戶端再顯示這個字串，神奇？其實是要告訴DWRServlet這件事，這需要一個dwr.xml： 
1
2
3
4
5
6
7
8
9
10
11
 
<?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="Hello">
      <param name="class" value="onlyfun.caterpillar.Hello" />
    </create>
  </allow>
</dwr>


creator設定為new，表示使用Hello的無參數建構子來生成物件，javascript設定為Hello，表示客戶端JavaScript程式可以使用Hello來呼叫對應的onlyfun.caterpillar.Hello物件。

來寫個客戶端的網頁，當中有一個輸入欄位… 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
  <title>第一個DWR程式</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()函式： 
1
2
3
4
5
6
7
8
 
function hello() {
    var user = $('user').value;
    Hello.hello(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頁面啦！ 


好啦！這個無聊的Hello DWR可以做啥！…XD

已經可以讓您做個簡單的文字提示功能了…像這個…
http://caterpillar.onlyfun.net/Gossip/index.html

把滑鼠指到書的照片上，會顯示提示文字，這些提示文字本身不是存在網頁上的，而是在Server端，當滑鼠指到書上時，會用Request object去抓，然後顯示在框框中…

當然！我的網站只支援PHP，所以那不是DWR完成的功能，而且我是直接用Request object跟DOM去慢慢刻的…對初學者來說已經有些麻煩了…XD

不過！用DWR就可以很簡單完成這個功能…

先寫個Java類別吧！會抓properties檔案中的文字訊息，例如… 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
package onlyfun.caterpillar;
 
import java.util.ResourceBundle;
 
public class Book {
  private ResourceBundle resource;
  
  public Book() {
    resource = ResourceBundle.getBundle("book"); 
  }
        
  public String getDescription(String key) {
    return resource.getString(key);
  }
}


從程式中就知道，它會去抓book_zh_TW.properties的資料，這不是重點啦！只是Java的一個功能，我們要看的是DWR，不過先把book_zh_TW.properties準備好… 
1
2
3
 
java=Java 學習筆記的介紹 … BlaBla...
spring=Spring 技術手冊的介紹…BlaBla...
ajax=Ajax in action 中文版的介紹…


唔！裏頭是中文字，自己用native2ascii轉換吧…這也不是重點…我們是要看DWR怎麼做到文字提示功能…

一樣的…要開放這個Book物件，在dwr.xml中… 
1
2
3
4
5
6
7
8
9
10
11
 
<?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="Book" scope="application">
            <param name="class" value="onlyfun.caterpillar.Book"/>
        </create>  
  </allow>
</dwr>


scope設定為application，表示這個Book物件在整個應用程式階段都活著。

然後，客戶端寫個網頁… 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
  <script type='text/javascript' src='dwr/interface/Book.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='book.js'></script>
<title>個人著／譯作</title>
</head>
<body>
 
      <div id="ajax" οnmοuseοver="getBookData(this);"
 οnmοuseοut="clearData();"><a
 href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=AXP011800"><small><img
 style="border: 0px solid ; width: 80px; height: 110px; float: left;"
 alt="Ajax in action 中文版" title="Ajax in action 中文版"
 src="images/ajax_in_action_c.jpg" hspace="10" vspace="2"></small></a></div>
 
      <div id="spring" οnmοuseοver="getBookData(this);"
 οnmοuseοut="clearData();"><a
 href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL021000"><small><img
 style="border: 0px solid ; width: 80px; height: 110px; float: left;"
 alt="Spring 技術手冊" title="Spring 技術手冊"
 src="images/SpringTech_S.jpg" hspace="10" vspace="2"></small></a></div>
 
      <div id="java" οnmοuseοver="getBookData(this);"
 οnmοuseοut="clearData();"><a
 href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL020931"><small><img
 style="border: 0px solid ; width: 80px; height: 110px; float: left;"
 alt="Java 學習筆記" title="Java 學習筆記"
 src="images/JavaGossip_Cover_Small.jpg" hspace="10"
 vspace="2"></small></a></div>
 
    <br/><br/><br/><br/><br/><br/>
 
    <div id="info"></div>
 
</body>
</html>


重點在於onmouseover跟onmouseout，滑鼠移入與移出時會呼叫的函式，還有最下面的info，抓回來的書籍介紹會放到當中…

book.js如下，簡單的很… 
1
2
3
4
5
6
7
8
9
10
11
 
function getBookData(ele) {
  Book.getDescription(ele.id, setBookData);
}
 
function setBookData(description) {
  DWRUtil.setValue('info', description);
}
 
function clearData() {
  DWRUtil.setValue('info', '');
}


程式很簡單，我懶得解釋了…XD

看一下畫面好了…這是滑鼠移到 Ajax in action中文版 上的介紹畫面…


Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1186566


 
squallffx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DWR入门与应用
02-02
（网络整理资料）DWR入门与应用，手把手教你从配置到实例的应用
DWR_入门与应用-林信良(良葛格)
04-23
DWR_入门与应用-林信良(良葛格)
dwr的使用和ajax的标签使用
我是谁的专栏
11-10 2540
非常详细介绍了DWR和ajax标签的使用。及真实配置 分为两个部分：dwr的原理和应用/真实环境使用（在文章的最后面）。基本上适合所有人查阅 DWR的作用:DWR是一个可以允许你去创建AJAX WEB站点的JAVA开源库。它可以让你在浏览器中的Javascript代码调用Web服务器上的Java代码，就像在Java代码就在浏览器中一样。 在使用dwr前,先介绍下我们远程调用的方法,以方便下文
Dwr框架入门教学
weixin_45203607的博客
10-17 1419
Dwr框架入门教学 DWR（Direct Web Remoting）是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架，可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数，就像它就在浏览器里一样。 虽然现在慢慢被淘汰了,但是还是很多公司在用的,还是有必要简单的学习下以便不时之需 dwr 支持和spring结合,或者dwr +SSM 结合, 需要自己研究研究 dwr官方文档: http://directwebremoting.or
Dwr详解
weixin_34395205的博客
10-20 534
2019独角兽企业重金招聘Python工程师标准>>> ...
DWR（1）：DWR服务端推送技术介绍
u013938578的博客
05-18 1305
1 什么是DWR 是一个基于Ajax的框架，动态的把java类生成为Javascript，让客户端Javascript通过DWR访问Java程序。 2 DWR工作原理 服务器启动时，读取dwr.xml,根据里面的配置将java类生成xxx.js,客户端通过js触发xxx.js的方法，然后web容器接收请求创建实例，处理数据并将数据返回给客户端，然后客户再去呈现给用户。 3 ScriptSession 创建：每次访问都会创建一个新的scriptSession DWR有两种创建方
DWR介绍
weixin_42098860的博客
02-28 299
Java 开发人员与网页设计人员的桥梁 DWR
06-06
Java 开发人员与网页设计人员的桥梁 DWR…呃！...负责处理客户端请求，并呼叫Java对象的是DWRServlet，DWR其实也有些Model 2的味道，只是View的这一层比较弱，因为放到客户端的JavaScript应用程序中…
dwr实例 - dwr入门 本人开发的：小游戏 大家一起来赚钱
08-07
dwr实例 - 这是本人，开发的：小游戏 [大家一起来赚钱] 本例子可做为dwr入门级应用； 有什么问题请和我沟通；
DWR技术简介及应用
03-13 2190
dwr(Direct Web Remoting)是一个WEB远程调用框架.利用DWR可以在客户端利用javascript直接调用服务端的java方法,并返回值给javascript. 原理：DWR通过反射，将java翻译成javascript，然后利用回调机制，轻松实现了javascript调用java代码。    配置及使用步骤： 1. 在项目中引入dwr.jar，在web.xml文件中配
DWR(Direct Web Remoting)介绍
07-20
DWR 是一个开放源码的使用 Apache 许可协议的解决方案，它包含服务器端 Java 库、一个 DWR servlet 以及 JavaScript 库。虽然 DWR 不是 Java 平台上唯一可用的 Ajax-RPC 工具包，但是它是最成熟的，而且提供了许多有用的功能
DWR介绍及使用方法
08-09
它包含两个主要的部分:允许Java从WEB服务器上一个遵循了AJAX原则的Servlet中获取数据.另外一方面一个Java库可以帮助网站开发人员轻松地利用获取的数据来动态改变网页的内容.
dwr源码包,dwr.jar包下载
07-11
1、 导入dwr.jar包 2、 在web.xml中配置dwr,如下： dwr-invoker org.directwebremoting.servlet.DwrServlet debug true//开启调试 dwr-invoker /dwr/*
DWR调用及传参总结
01-08
以上本人学习DWR后总结的一个简单的文档,主要总结了调用方法,以及不同参数形态的传递方法,例如,多参数传递、Map参数传递、List参传递数，对象参数传递有参数互传等。
DWR框架包（包含所有jar、js）
12-04
DWR（Direct Web Remoting）是一个web远程调用框架，利用这个框架可以让AJAX变得很简单，通过DWR可以在客户端通过JavaScript直接调用服务器的Java方法并返回值给JavaScript，整个过程就好像通过本地客户端调用一样，DWR通过Java类动态生成JavaScript代码，它的最新版本DWR6.0添加许多特性：如支持Dom Trees的自动配置，支持Spring（JavaScript远程调用Spring bean），更好的浏览器支持，还支持可选的commons-logging日志操作。
DWR是什么？
wangle100wangle的专栏
07-03 1216
来源：IBM中国DWR 是什么？从最简单的角度来说，DWR 是一个引擎，可以把服务器端 Java 对象的方法公开给 JavaScript 代码。使用 DWR 可以有效地从应用程序代码中把 Ajax 的全部请求-响应循环消除掉。这意味着客户端代码再也不需要直接处理 XMLHttpRequest 对象或者服务器的响应。不再需要编写对象的序列化代码或者使用第三方工具才能把对象变成 XML。甚至不再需要编
DWR 入门知识进阶四
振华
04-13 135
一、DWR配置说明： DWR配置文件主要有以下四个部分组成 1、web.xml文件主要配置DWR的后台控制器和配置文件的载入 [code="xml"] dwr-invoker org.directwebremoting.servlet.DwrServlet dwr-invoker /dwr/* [/code] 2、dwr...
DWR入门教程
jing_le的专栏
03-04 837
DWR（Direct Web Remoting）是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架，可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数，就像它就在浏览器里一样。 一、引入DWR裤架的步骤 （1）添加dwr.jar和commons-logging.jar到WEB-INF/lib目录下 （2）修改web
DWR的使用，配置，例子，详解整理
洪文聊架构
04-23 4558
DWR的原理：在安装DWR时会在web.xml中配置一个servlet，这个servlet负责把前台的JS参数封装成JAVA，去调用你的JAVA类，然后将返回结果（JAVA类型）再翻译成JS生成到你的JSP页面上，给你的错觉就是你用JS直接调用了JAVA方法 实际：JAVA类实现了js与java类之间的接口(DWR根据Java类来动态生成JavaScrip代码，是不是有些像JSP是由servle
springboot dwr
最新发布
09-28
Spring Boot 是一个快速开发的框架，它简化了基于Java的应用程序的开发过程。而DWR（Direct Web Remoting）是一个用于Web应用程序的Java Ajax库。 Spring Boot 和 DWR 的结合使用可以实现简单和高效的Web应用程序开发。使用DWR可以将Java方法暴露为可通过JavaScript远程调用的Web服务。 在Spring Boot中集成DWR非常简单。首先，需要在项目的依赖项中添加DWR库的引用。然后，在Spring Boot应用程序的配置文件中配置DWR的Servlet，使其能够接收Ajax请求。 在Spring Boot应用程序中使用DWR，首先需要创建一个Java类，并在其中定义具有@RemoteMethod注解的方法。这些方法将通过DWR暴露为Web服务，可以在JavaScript中进行远程调用。 然后，在前端页面中引入DWR的JavaScript库，并使用其提供的API来调用远程方法。这样就可以实现从前端页面直接调用后端的Java方法，实现前后端的数据交互和业务逻辑处理。 需要注意的是，使用DWR进行远程调用时，需要考虑安全性和验证。可以通过配置DWR的拦截器和过滤器，限制访问和验证用户身份，确保应用程序的安全性。 总之，Spring Boot和DWR的结合使用可以快速开发出高效、灵活的Web应用程序，实现前后端的数据交互和业务逻辑处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值