DWR 入门与应用.docx

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

book.js如下，簡單的很…

1

2

3

4

5

6

7

8

9

10

11

functiongetBookData（ele）{

Book.getDescription（ele.id,setBookData）;

}

functionsetBookData（description）{

DWRUtil.setValue（'info',description）;

}

functionclearData（）{

DWRUtil.setValue（'info',''）;

}

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

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

假設您要從資料庫中查詢出一些字串，然後填寫到表單的下拉選單中。

例如一個示意的Java程式如下：

1

2

3

4

5

6

7

8

packageonlyfun.caterpillar;

publicclassOption{

publicString[]getOptions（）{

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

returnnewString[]{"良葛格","毛美眉","米小狗"};

}

}

傳回的字串陣列，您要填寫到下拉選單中，當然，首先我們要在dwr.xml中開發這個物件…

1

2

3

4

5

6

7

8

9

10

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

>

DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting1.0//EN""http:

//www.getahead.ltd.uk/dwr/dwr10.dtd">

這是我們的網頁…

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">

選項:

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

1

2

3

4

5

6

7

8

window.onload=function（）{

OPT.getOptions（populate）;

};

functionpopulate（list）{

DWRUtil.removeAllOptions（"opts"）;

DWRUtil.addOptions（"opts",list）;

}

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

看一下結果… 

好啦！

我知道有人在說了，這個程式有夠無聊…

改一下！

就是個不錯的範例了，例如連動方塊，唔！

在Ajaxinaction中叫啥？

Dynamicdoublecombo？

…

假設一個會去從資料庫中查詢資料的Java程式示意如下：

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

packageonlyfun.caterpillar;

importjava.util.Map;

importjava.util.TreeMap;

publicclassBike{

  privateMapbikes;

  publicBike（）{

    bikes=newTreeMap（）;

    bikes.put（"2000",newString[]{"2000T1","2000T2","2000T3"}）;

    bikes.put（"2001",newString[]{"2001A1","2001A2"}）;

    bikes.put（"2002",newString[]{"2002BW1","2002BW2","2002BW"}）;

    bikes.put（"2003",newString[]{"2003S320"}）;

    bikes.put（"2004",newString[]{"2004TA1","2004TA2","2004TA3"}）;

  }

  publicString[]getYears（）{

    String[]keys=newString[bikes.size（）];

    inti=0;

    for（Stringkey:

bikes.keySet（））{

      keys[i++]=key;

    }

    returnkeys;

  }

  publicString[]getBikes（Stringyear）{

    returnbikes.get（year）;

  }

}

getYears（）跟getBkies（）分別表示產品的年份跟型號，這邊用Map模擬，實際上資料是來自資料庫的查詢。

一樣的，在dwr.xml中設定：

1

2

3

4

5

6

7

8

9

10

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

>

DOCTYPEdwrPUBLIC"-//GetAheadLimited//DTDDirectWebRemoting1.0//EN""http:

//www.getahead.ltd.uk/dwr/dwr10.dtd">

我們會有個腳踏車年份與型號查詢頁面：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">