久久99伊人,91精品啪在线观看国产手机,eeuss影院在线播放

DWR 入門與應用（三）

�C�物 — Fri, 04 Apr 2008 03:37:00 GMT

來寫個AJAX版的聊天室吧�Q�先看看直接使用AJAX要如何做刎ͼ�首先需要一個簡單的聊天室Servlet…

package onlyfun.caterpillar;

             

            import java.io.IOException;

            import java.io.PrintWriter;

            import java.util.LinkedList;

            import java.util.List;

             

            import javax.servlet.ServletException;

            import javax.servlet.http.HttpServletRequest;

            import javax.servlet.http.HttpServletResponse;

             

            public class ChatRoomServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {

            private static LinkedList messages = new LinkedList();

            

            public ChatRoomServlet() {

            super(); 

            }

            

            private List addMessage(String text) {

            if (text != null && text.trim().length() > 0) {

            messages.addFirst(new Message(text));

            while (messages.size() > 10) {

            messages.removeLast();

            }

            }

             

            return messages;

            }

             

            private List getMessages() {

            return messages;

            }

            

            protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

            List list = null;

            

            if("send".equals(request.getParameter("task"))) {

            list = addMessage(request.getParameter("msg"));

            }

            else if("query".equals(request.getParameter("task"))){

            list = getMessages();

            }

             

            PrintWriter out = response.getWriter();

            response.setContentType("text/xml");

            response.setHeader("Cache-Control", "no-cache");

             

            out.println("");

            for(int i = 0; i < list.size(); i++) {

            String msg = list.get(i).getText();

            out.println("" + msg + "");

            }

            out.println("");

            }             

            }

Message物�g如下…

package onlyfun.caterpillar;

             

            public class Message {

            private long id = System.currentTimeMillis();

            private String text;

            

            public Message(String newtext) {

            text = newtext;

            if (text.length() > 256) {

            text = text.substring(0, 256);

            }

            text = text.replace('<', '[');

            text = text.replace('&', '_');

            }

             

            public long getId() {

            return id;

            }

             

            public String getText() {

            return text;

            }

            }

Servlet接受�a�息新增與查詢，判斷的方式是檢查請求參數task是send或query�?

Servlet會以XML傛_��目前List當中的訊息，客戶端可以查詢或插入新訊息時�Q�取得目前List中的�a�息�Q�接著在web.xml中設定一�?#8230;

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

            

            

            

            

            ChatRoomServlet

            ChatRoomServlet

            

            onlyfun.caterpillar.ChatRoomServlet

            

             

            

            ChatRoomServlet

            /ChatRoomServlet

            

            

            

            30

在網頁中�Q��用者可以在輸入�a�息後按下按鈕送出資訊�Q�並在XML回應取得時，��訊息以一列一列的表格方式��示��Z��Q�另外還�a�定了週期性的輪詢�Q�即使不輸入新訊息，也可以週期性的取得新的聊天�a�息…

"-//W3C//DTD HTML 4.01 Transitional//EN">

"Content-Type" content="text/html; charset=BIG5">
Chat Room

Your Message:
"text"/>
"button" value="Send"
onclick="sendMessage()"/>

Messages:

"left">
"dynamicUpdateArea">

��單抓個畫�?#8230;

直接用AJAX�Q�後端用JSP/Servlet�Q��?zh��n)�要對請求參數做些判斷�Q�看看是新增�a�息或查詢，並要自行輸出XML�Q�有的沒�?#8230;

�Ҏ(gu��)��DWR的話�Q�就很簡單了�Q�寫個簡單的Java物�g…

package onlyfun.caterpillar;

             

            import java.util.LinkedList;

            import java.util.List;

             

            public class Chat {

            private static LinkedList messages = new LinkedList();

             

            public List addMessage(String text) {

            if (text != null && text.trim().length() > 0) {

            messages.addFirst(new Message(text));

            while (messages.size() > 10) {

            messages.removeLast();

            }

            }

            

            return messages;

            }

             

            public List getMessages() {

            return messages;

            }

            }

接著…在dwr.xml中開放一�?#8230;

"1.0" encoding="UTF-8"?>

            "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

            

            

            

             

            "new" javascript="Chat">

            "class" value="onlyfun.caterpillar.Chat"/>

            

            

            "bean" match="onlyfun.caterpillar.Message"/>

使用者取得訊息時�Q�是直接傛_��List物�g�Q�而List中裝的是Message物�g�Q�Message物�g是自�a�物�Ӟ��conterver�a�定�?bean�Q�表�C�DWR會自動將Message的getter名稱轉換為傳回客戶端的JavaScript物�g中的屬性，例如Message中有 getText()�Q�則在客戶端可以用message.text這樣的方式來存取�?

接著是簡單的客戶端網�?#8230;

"-//W3C//DTD HTML 4.01 Transitional//EN">

"Content-Type" content="text/html; charset=BIG5">
Insert title here

Your Message:
"text"/>
"button" value="Send"
onclick="sendMessage()"/>

Messages:

"chatlog">

當List物�g傛_��時，它成為gotMessages(messages)中的messages物�g�Q�而messages物�g中包�?Message物�g轉換後對應的JavaScript物�g�Q�由於我們已�E�設定了Converter�Q�所以可以用messages[data].text�?取得傛_��的訊�?#8230;

��單抓個畫�?#8230;

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

�C�物 2008-04-04 11:37 发表评论

DWR 入門與應用（二）

�C�物 — Fri, 04 Apr 2008 03:35:00 GMT

假設�(zh��n)�要從資料��n中查詢出一些字�Ԍ��然後填寫到表單的下拉選單中�?

例如一個示意的Java�E�式如下�Q?

package onlyfun.caterpillar;

             

            public class Option {

            public String[] getOptions() {

            // 實際上這些字串是從資料庫中查到的啦…

            return new String[] {"良葛�?, "毛美�?, "�c�_���?}; 

            }

            }

傛_��的字串陣列，�(zh��n)�要填寫��C��拉選單中�Q�當�Ӟ��首先我們要在dwr.xml中開發這個物�?#8230;

"1.0" encoding="UTF-8"?>

            "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

            

            

            

            "new" javascript="OPT">

            "class" value="onlyfun.caterpillar.Option"/>

這是我們的�E�頁…

"-//W3C//DTD HTML 4.01 Transitional//EN">

            

            

            "Content-Type" content="text/html; charset=BIG5">

            

            

            

            

             

            

             

            

            達R��:

傛_��的字串陣列會填入opts這個select中，我們的option.js如下…

window.onload = function() {

            OPT.getOptions(populate);  

            };

             

            function populate(list){

            DWRUtil.removeAllOptions("opts");

            DWRUtil.addOptions("opts", list);

            }

夠簡單了…不需要解釋了…

看一下結�?#8230;

好啦�Q�我知道有�h在說了，這個程式有夠無�?#8230;

改一下！��是個不錯的��例了，例如連動方塊�Q�唔�Q�在Ajax in action中叫啥？Dynamic double combo�Q?#8230;

假設一個會��d��資料庫中查詢資料的Java�E�式�C�意如下�Q?

package onlyfun.caterpillar;

             

            import java.util.Map;

            import java.util.TreeMap;

             

            public class Bike {

              private Map bikes;

              

              public Bike() {

                bikes = new TreeMap();

                bikes.put("2000", new String[] {"2000 T1", "2000 T2", "2000 T3"});

                bikes.put("2001", new String[] {"2001 A1", "2001 A2"});

                bikes.put("2002", new String[] {"2002 BW1", "2002 BW2", "2002 BW"});

                bikes.put("2003", new String[] {"2003 S320"});

                bikes.put("2004", new String[] {"2004 TA1", "2004 TA2", "2004 TA3"});

              }

              

              public String[] getYears() {

                String[] keys = new String[bikes.size()];

                int i = 0;

                for(String key : bikes.keySet()) {

                  keys[i++] = key;

                }

                return keys; 

              }

              

              public String[] getBikes(String year) {

                return bikes.get(year);

              }

            }

getYears()跟getBkies()分別表示產品的年份跟型號�Q�這邊用Map模擬�Q�實際上資料是來自資料��n的查詢�?

一樣的�Q�在dwr.xml中設定：

"1.0" encoding="UTF-8"?>

            "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">

            

            

            

            "new" javascript="Bike" scope="application">

            "class" value="onlyfun.caterpillar.Bike"/>

我們會有個腳�t�車�q�䆾與型號查詢頁面：

"-//W3C//DTD HTML 4.01 Transitional//EN">

            

            

            "Content-Type" content="text/html; charset=BIG5">

            Insert title here

            

            

            

            

            

            "refreshYearList();">

              �q�䆾�Q?lt;select id="years" onchange="refreshBikeList();">



              型號�Q?lt;select id="bikes">

注意�Q�在選完�W�一個年份後�Q�會觸發o(j��)nchange事�g�Q�接著第二個下拉選單會自動填上��應�q�䆾的型號，而不是按鈕按下，再去取得�W�二個下拉選單，然後refresh...blah...blah...

bike.js如下…

function refreshYearList() {

            Bike.getYears(populateYearList);

            }

             

            function populateYearList(list){

            DWRUtil.removeAllOptions("years");

            DWRUtil.addOptions("years", list);

            refreshBikeList();

            }

             

            function refreshBikeList() {

            var year = $("years").value;

            Bike.getBikes(year, populateBikeList);

            }

             

            function populateBikeList(list){

            DWRUtil.removeAllOptions("bikes");

            DWRUtil.addOptions("bikes", list);

            }

一樣很��單…

看個無聊的畫面…XD

�C�物 2008-04-04 11:35 发表评论

DWR 入門與應用（一�Q?

�C�物 — Fri, 04 Apr 2008 03:34:00 GMT

請先�?http://getahead.ltd.uk/dwr/ 下載 dwr.jar�Q�放到WEB-INF/lib�?#8230;

負��K處理客戶端請求，並呼叫Java物�g的是DWRServlet�Q�DWR其實也有些Model 2的味道，只是View的這一層比較弱�Q�因為放到客戶端的JavaScript應用�E�式�?#8230;

在web.xml中加入DWRServlet…

"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吧！

package onlyfun.caterpillar;

             

            public class Hello {

            public String hello(String name) {

            return "哈囉�Q? + name + "�Q��?zh��n)�的第一個DWR�Q?;

            }

            }

客戶端要呼叫這個Java物�g�Q�傳�i�它參數�Q�而後傛_��一個字�Ԍ��客戶端再��示這個字�Ԍ��奇�Q�其實是要告�a�DWRServlet這�g事，這需要一個dwr.xml�Q?

"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�a�定為new�Q�表�C�Z��用Hello的無參數建構子來生成物�g�Q�javascript�a�定為Hello�Q�表�C�客戶端JavaScript�E�式可以使用Hello來呼叫對應的onlyfun.caterpillar.Hello物�g�?

來寫個客戶端的網頁，當中有一個��入欄�?#8230;

"-//W3C//DTD HTML 4.01 Transitional//EN">

            

            

            "Content-Type" content="text/html; charset=BIG5">

            �W�一個DWR�E�式

            

            

            

            

            

            

             

            "user" type="text" />

            'button' value='哈囉' onclick='hello();' /> 

             

            "result">

dwr/interface/Hello.js是由DWRServlet�Ҏ(gu��)��dwr.xml中的�a�定生成的，engine.js負��K客戶端伺服端溝通，util.js是一些好用的JavaScript�E�式�Q�可以讓�(zh��n)�少寫很多JavaScript�?

hello.js是我們自�a�的函式�Q�按下按鈕後�Q�會呼叫當中的hello()函式�Q?

function hello() {

            var user = $('user').value;

            Hello.hello(user, callback);

            }

             

            function callback(msg) {

            DWRUtil.setValue('result', msg);

            }

${'user'}取得輸入�Ƅ位的DOM物�g�Q�value取得當中的欄位��|��而後呼叫Hello.hello()�Q�並��value當作參數傳�?#8230; �i�果是呼叫Server端的Hello Java物�g�Q�當�i�果傛_��後，會呼叫JavaScript的callback函式�Q�DWRUtil的setValue()�Ҏ(gu��)��會將傛_��的msg�a�定�i�指�?id的DOM�Q�結果就�?#8230;啥！AJAX的功能在�?#8230;��這個而言��是發出非同步請求，而回應不用Refresh頁面啦！

好啦�Q�這個無聊的Hello DWR可以做啥�Q?#8230;XD

已經可以讓�?zh��n)�做個簡單的文字提示功能�?#8230;像這�?#8230;
http://caterpillar.onlyfun.net/Gossip/index.html

把滑鼠指到書的照片上�Q�會��示提示文字�Q�這些提示文字本��n不是存在�E�頁上的�Q�而是在Server端，當滑鼠指到書上時�Q�會用Request object��L��Q�然後顯�C�在框框�?#8230;

當然�Q�我的網站只支援PHP�Q�所以那不是DWR完成的功能，而且我是直接用Request object跟DOM��L��慢刻�?#8230;��初學者來說已�E�有些麻煩了…XD

不過�Q�用DWR��可以很��單完成這個功�?#8230;

先寫個Java��別吧！會抓properties檔案中的文字�a�息�Q�例�?#8230;

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);

            }

            }

從程式中��q��道，它會��L��book_zh_TW.properties的資料，這不是重點啦�Q�只是Java的一個功能，我們要看的是DWR�Q�不過先把book_zh_TW.properties準備�?#8230;

java=Java 學習�{�記的介�?… BlaBla...

            spring=Spring 技術手冊的介紹…BlaBla...

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

唔！裏頭是中文字�Q�自��q��native2ascii轉換�?#8230;這也不是重點…我們是要看DWR怎麼做到文字提示功能…

一樣的…要開��N��個Book物�g�Q�在dwr.xml�?#8230;

"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�a�定為application�Q�表�C�這個Book物�g在整個應用程式階�D�都�z�著�?

然後�Q�客戶端寫個網�?#8230;

"-//W3C//DTD HTML 4.01 Transitional//EN">

            

            

            "Content-Type" content="text/html; charset=BIG5">

            

            

            

            

            個�h著／譯作

            

            

             

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

重點在於o(j��)nmouseover跟onmouseout�Q�滑鼠移入與�U�d��時會呼叫的函式，還有最下面的info�Q�抓回來的書�c�介�Ҏ(gu��)��攑ֈ�當中…

book.js如下�Q�簡單的�?#8230;

function getBookData(ele) {

            Book.getDescription(ele.id, setBookData);

            }

             

            function setBookData(description) {

            DWRUtil.setValue('info', description);

            }

             

            function clearData() {

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

            }

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

看一下畫面好�?#8230;這是滑鼠�U�d�� Ajax in action中文�?/font> 上的介紹畫面…

�C�物 2008-04-04 11:34 发表评论