日本黄页免费视频播放网站,久久精品亚洲99一区二区,h5 watsons com cn

Java 開(kāi)發(fā)人員與網(wǎng)頁(yè)設(shè)計(jì)人員的橋樑 DWR…呃！我懶得寫(xiě)簡(jiǎn)介了…直接來(lái)看看可以做什麼吧！…

請(qǐng)先到

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

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

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

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

不過(guò)！用DWR就可以很簡(jiǎn)單完成這個(gè)功能…

先寫(xiě)個(gè)Java類別吧！會(huì)抓properties檔案中的文字訊息，例如…

              
                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，不過(guò)先把book_zh_TW.properties準(zhǔn)備好…

              java=Java 學(xué)習(xí)筆記的介紹 … BlaBla...
              

              spring=Spring 技術(shù)手冊(cè)的介紹…BlaBla...
              

              ajax=Ajax in action 中文版的介紹…

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

一樣的…要開(kāi)放這個(gè)Book物件，在dwr.xml中…

              <?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)用程式階段都活著。

然後，客戶端寫(xiě)個(gè)網(wǎng)頁(yè)…

              <!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ù)手冊(cè)" title="Spring 技術(shù)手冊(cè)"
              

               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，抓回來(lái)的書(shū)籍介紹會(huì)放到當(dāng)中…

book.js如下，簡(jiǎn)單的很…

              function getBookData(ele) {
              

                Book.getDescription(ele.id, setBookData);
              

              }
              

              ?
              

              function setBookData(description) {
              

                DWRUtil.setValue('info', description);
              

              }
              

              ?
              

              function clearData() {
              

                DWRUtil.setValue('info', '');
              

              }

程式很簡(jiǎn)單，我懶得解釋了…XD

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

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

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

在web.xml中加入DWRServlet…

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

接下來(lái)寫(xiě)個(gè)簡(jiǎn)單的Hello吧！

            
              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：

            <?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的無(wú)參數(shù)建構(gòu)子來(lái)生成物件，javascript設(shè)定為Hello，表示客戶端JavaScript程式可以使用Hello來(lái)呼叫對(duì)應(yīng)的onlyfun.caterpillar.Hello物件。

來(lái)寫(xiě)個(gè)客戶端的網(wǎng)頁(yè)，當(dāng)中有一個(gè)輸入欄位…

            <!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程式，可以讓您少寫(xiě)很多JavaScript。

hello.js是我們自訂的函式，按下按鈕後，會(huì)呼叫當(dāng)中的hello()函式：

            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ā)出非同步請(qǐng)求，而回應(yīng)不用Refresh頁(yè)面啦！?

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

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

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

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

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義