DWR 入門與應用(一) - 林信良(良葛格)的专栏
来源:百度文库 编辑:神马文学网 时间:2024/06/04 20:06:48
DWR 入門與應用(一) Java 開發人員與網頁設計人員的橋樑 DWR…呃!我懶得寫簡介了…直接來看看可以做什麼吧!…
請先到 http://getahead.ltd.uk/dwr/ 下載 dwr.jar,放到WEB-INF/lib下…
負責處理客戶端請求,並呼叫Java物件的是DWRServlet,DWR其實也有些Model 2的味道,只是View的這一層比較弱,因為放到客戶端的JavaScript應用程式中…
在web.xml中加入DWRServlet…
接下來寫個簡單的Hello吧!
客戶端要呼叫這個Java物件,傳給它參數,而後傳回一個字串,客戶端再顯示這個字串,神奇?其實是要告訴DWRServlet這件事,這需要一個dwr.xml:
creator設定為new,表示使用Hello的無參數建構子來生成物件,javascript設定為Hello,表示客戶端JavaScript程式可以使用Hello來呼叫對應的onlyfun.caterpillar.Hello物件。
來寫個客戶端的網頁,當中有一個輸入欄位…
dwr/interface/Hello.js是由DWRServlet根據dwr.xml中的設定生成的,engine.js負責客戶端伺服端溝通,util.js是一些好用的JavaScript程式,可以讓您少寫很多JavaScript。
hello.js是我們自訂的函式,按下按鈕後,會呼叫當中的hello()函式:
${‘user‘}取得輸入欄位的DOM物件,value取得當中的欄位值,而後呼叫Hello.hello(),並將value當作參數傳送…結果是呼叫Server端的HelloJava物件,當結果傳回後,會呼叫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檔案中的文字訊息,例如…
從程式中就知道,它會去抓book_zh_TW.properties的資料,這不是重點啦!只是Java的一個功能,我們要看的是DWR,不過先把book_zh_TW.properties準備好…
唔!裏頭是中文字,自己用native2ascii轉換吧…這也不是重點…我們是要看DWR怎麼做到文字提示功能…
一樣的…要開放這個Book物件,在dwr.xml中…
scope設定為application,表示這個Book物件在整個應用程式階段都活著。
然後,客戶端寫個網頁…
重點在於onmouseover跟onmouseout,滑鼠移入與移出時會呼叫的函式,還有最下面的info,抓回來的書籍介紹會放到當中…
book.js如下,簡單的很…
程式很簡單,我懶得解釋了…XD
看一下畫面好了…這是滑鼠移到 Ajax in action中文版 上的介紹畫面…
請先到 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
"1.0" encoding="UTF-8"?>"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">
ajaxDWR
dwr-invoker
uk.ltd.getahead.dwr.DWRServlet
debug
true
dwr-invoker
/dwr/*
接下來寫個簡單的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
"1.0" encoding="UTF-8"?>
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
"new" javascript="Hello">
"class" value="onlyfun.caterpillar.Hello" />
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
"-//W3C//DTD HTML 4.01 Transitional//EN">
"Content-Type" content="text/html; charset=BIG5">
第一個DWR程式
"user" type="text" />
‘button‘ value=‘哈囉‘ onclick=‘hello();‘ />
"result">
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端的HelloJava物件,當結果傳回後,會呼叫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
"1.0" encoding="UTF-8"?>
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
"new" javascript="Book" scope="application">
"class" value="onlyfun.caterpillar.Book"/>
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
"-//W3C//DTD HTML 4.01 Transitional//EN">
"Content-Type" content="text/html; charset=BIG5">
個人著/譯作
"ajax" onmouseover="getBookData(this);"
onmouseout="clearData();"> href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=AXP011800"> 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">
"spring" onmouseover="getBookData(this);"
onmouseout="clearData();"> href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL021000"> style="border: 0px solid ; width: 80px; height: 110px; float: left;"
alt="Spring 技術手冊" title="Spring 技術手冊"
src="images/SpringTech_S.jpg" hspace="10" vspace="2">
"java" onmouseover="getBookData(this);"
onmouseout="clearData();"> href="http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&bn=ACL020931"> style="border: 0px solid ; width: 80px; height: 110px; float: left;"
alt="Java 學習筆記" title="Java 學習筆記"
src="images/JavaGossip_Cover_Small.jpg" hspace="10"
vspace="2">
"info">
重點在於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中文版 上的介紹畫面…
DWR 入門與應用(一) - 林信良(良葛格)的专栏
Dwr教程(一)之用户名验证 - lxlzhn的专栏 - CSDN博客
DWR学习(一) - ceun的专栏 - CSDNBlog
Dwr教程(一)之用户名验证
OpenMP并行程序设计(一) - 周伟明的专栏 - CSDNBlog
揭开J2EE集群的神秘面纱(一) - ESoftWind的专栏 - CSDNBlog
c#泛型和反射的设计应用(一) - yutao051的专栏 - CSDN博客
Oracle RMAN的备份与恢复命令详解(一) - Safuel的专栏 - CSDN博客
跟我学XSL(一)(转) - hyde82的专栏
和我一起写矩阵类(一) - WAKU的专栏
10天背诵英文10000单词(一) - Kesa_Kong的专栏 - CSDNBlog
数据集成之主数据管理(一)基础概念篇 - woohooli的专栏 - CSDN博客
10天背诵英文10000单词(一) - Kesa_Kong的专栏 - CSDNBlog0
函数调用约定与函数名称修饰规则(一) - orbit的专栏
一个jbpm工作流管理示例(一) - 小小冰的专栏
漫谈.NET开发中的字符串编码 - bitfan(数字世界一凡人)的专栏 - CSDN博客
《沪港小生专栏》上海故事(一):上海大厦
[经济专栏]一封迟到的感谢信
一名医生的良心话令人恐惧(zt) - 转贴专栏 - 民间中医网 - 中医学习,经典学习,中...
股票初级教程(转载) - franckjun的专栏
股票初级教程(转载) - franckjun的专栏
股票初级教程(转载) - franckjun的专栏
股票初级教程(转载) - franckjun的专栏
DWR 简化 Ajax 的 portlet 间通信