亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

DWR 入門與應(yīng)用(一)

系統(tǒng) 2351 0
Java 開發(fā)人員與網(wǎng)頁設(shè)計(jì)人員的橋樑 DWR…呃!我懶得寫簡介了…直接來看看可以做什麼吧!…

請先到

DWR 入門與應(yīng)用(一)

好啦!這個(gè)無聊的Hello DWR可以做啥!…XD

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

把滑鼠指到書的照片上,會(huì)顯示提示文字,這些提示文字本身不是存在網(wǎng)頁上的,而是在Server端,當(dāng)滑鼠指到書上時(shí),會(huì)用Request object去抓,然後顯示在框框中…

當(dāng)然!我的網(wǎng)站只支援PHP,所以那不是DWR完成的功能,而且我是直接用Request object跟DOM去慢慢刻的…對初學(xué)者來說已經(jīng)有些麻煩了…XD

不過!用DWR就可以很簡單完成這個(gè)功能…

先寫個(gè)Java類別吧!會(huì)抓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);
}
}


從程式中就知道,它會(huì)去抓book_zh_TW.properties的資料,這不是重點(diǎn)啦!只是Java的一個(gè)功能,我們要看的是DWR,不過先把book_zh_TW.properties準(zhǔn)備好…
              1
              
2
3
              java=Java 學(xué)習(xí)筆記的介紹 … BlaBla...
              
spring=Spring 技術(shù)手冊的介紹…BlaBla...
ajax=Ajax in action 中文版的介紹…


唔!裏頭是中文字,自己用native2ascii轉(zhuǎn)換吧…這也不是重點(diǎn)…我們是要看DWR怎麼做到文字提示功能…

一樣的…要開放這個(gè)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設(shè)定為application,表示這個(gè)Book物件在整個(gè)應(yīng)用程式階段都活著。

然後,客戶端寫個(gè)網(wǎng)頁…
              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>個(gè)人著/譯作</title>
</head>
<body>
?
<div id="ajax" onmouseover="getBookData(this);"
onmouseout="clearData();"><a
><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" onmouseover="getBookData(this);"
onmouseout="clearData();"><a
><small><img
style="border: 0px solid ; width: 80px; height: 110px; float: left;"
alt="Spring 技術(shù)手冊" title="Spring 技術(shù)手冊"
src="images/SpringTech_S.jpg" hspace="10" vspace="2"></small></a></div>
?
<div id="java" onmouseover="getBookData(this);"
onmouseout="clearData();"><a
><small><img
style="border: 0px solid ; width: 80px; height: 110px; float: left;"
alt="Java 學(xué)習(xí)筆記" title="Java 學(xué)習(xí)筆記"
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>


重點(diǎn)在於onmouseover跟onmouseout,滑鼠移入與移出時(shí)會(huì)呼叫的函式,還有最下面的info,抓回來的書籍介紹會(huì)放到當(dāng)中…

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 入門與應(yīng)用(一)
? http://getahead.ltd.uk/dwr/ 下載 dwr.jar,放到WEB-INF/lib下…

負(fù)責(zé)處理客戶端請求,並呼叫Java物件的是DWRServlet,DWR其實(shí)也有些Model 2的味道,只是View的這一層比較弱,因?yàn)榉诺娇蛻舳说腏avaScript應(yīng)用程式中…

在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>


接下來寫個(gè)簡單的Hello吧!
            1
            
2
3
4
5
6
7
            
              package
            
             onlyfun.caterpillar;
            
?
public class Hello {
public String hello(String name) {
return "哈囉!" + name + "!您的第一個(gè)DWR!";
}
}


客戶端要呼叫這個(gè)Java物件,傳給它參數(shù),而後傳回一個(gè)字串,客戶端再顯示這個(gè)字串,神奇?其實(shí)是要告訴DWRServlet這件事,這需要一個(gè)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設(shè)定為new,表示使用Hello的無參數(shù)建構(gòu)子來生成物件,javascript設(shè)定為Hello,表示客戶端JavaScript程式可以使用Hello來呼叫對應(yīng)的onlyfun.caterpillar.Hello物件。

來寫個(gè)客戶端的網(wǎng)頁,當(dāng)中有一個(gè)輸入欄位…
            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>第一個(gè)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='哈囉' onclick='hello();' />
?
<div id="result"></div>
?
</body>
</html>


dwr/interface/Hello.js是由DWRServlet根據(jù)dwr.xml中的設(shè)定生成的,engine.js負(fù)責(zé)客戶端伺服端溝通,util.js是一些好用的JavaScript程式,可以讓您少寫很多JavaScript。

hello.js是我們自訂的函式,按下按鈕後,會(huì)呼叫當(dāng)中的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取得當(dāng)中的欄位值,而後呼叫Hello.hello(),並將value當(dāng)作參數(shù)傳送… 結(jié)果是呼叫Server端的Hello Java物件,當(dāng)結(jié)果傳回後,會(huì)呼叫JavaScript的callback函式,DWRUtil的setValue()方法會(huì)將傳回的msg設(shè)定給指定 id的DOM,結(jié)果就是…啥!AJAX的功能在哪…就這個(gè)而言就是發(fā)出非同步請求,而回應(yīng)不用Refresh頁面啦!?

DWR 入門與應(yīng)用(一)


更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯(lián)系: 360901061

您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點(diǎn)擊下面給點(diǎn)支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點(diǎn)擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動(dòng)力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會(huì)非常 感謝您的哦!!!

發(fā)表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 91最新在线 | 九九视频在线免费观看 | 久久久国产精品免费看 | 国产成人a在一区线观看高清 | 9久久这里只有精品国产 | 婷婷色中文网 | 青青操网址| 国产成人禁片在线观看 | 欧美性色xo影院69 | 国内精品91久久久久 | 久久99亚洲精品久久99 | 久久亚洲福利 | 亚洲天码中文字幕第一页 | 香蕉综合网 | 五月狠狠亚洲小说专区 | 全网毛片| 成人www | 另类综合视频 | 九九艹 | 狠狠的操你 | 在线观看成人小视频 | 欧美乱操 | 亚洲精品成人 | 在线观看精品91老司机 | 亚洲精品中文字幕不卡在线 | 中文字幕精品一区二区日本大胸 | 天天干人人干 | 韩日一区二区三区 | 亚洲人成依人成综合网 | 亚洲黄色在线观看视频 | 久久国产在线视频 | 男女乱淫真视频免费一级毛片 | 久热这里只有精 | 四虎影视色费永久在线观看 | 国产精品国产精品国产专区不卡 | 国产精品国产自线在线观看 | 一区二区福利视频 | 香蕉一区二区三区观 | sihu国产精品永久免费 | 国产精品久久久久久久久久妇女 | 亚洲一区日韩二区欧美三区 |