Ajax的DWR框架

2007－1－20 周三

配置DWR：

                          1、Web.xml中添加如下内容：

 

xml 代码

1.    < servlet >   
2. < servlet-name > dwr-invoker servlet-name >   
3. < display-name > DWR Servlet display-name >   
4. < description > Direct Web Remoter Servlet description >   
5. < servlet-class > uk.ltd.getahead.dwr.DWRServlet servlet-class >   
6. < init-param >   
7. < param-name > debug param-name >   
8. < param-value > true param-value >   
9. init-param >   
10.    servlet >   
11.    < servlet-mapping >   
12. < servlet-name > dwr-invoker servlet-name >   
13. < url-pattern > /dwr/* url-pattern >   
14.    servlet-mapping >   

 

                2、在web下新建dwr.xml配置文件

入门级的DWR例子

 

java 代码

1. public   class  Apartment {   
2.   
3.      private   int  id;   
4.   
5.      private   int  bedrooms;   
6.   
7.      private   int  bathrooms;   
8.   
9.      private   int  price;   
10.   
11.      private  String address;   
12.   
13.      private  String city;   
14.   
15.      private  String province;   
16.   
17.      public   int  getId() {   
18.          return  id;   
19.     }   
20.   
21.      public   void  setId( int  id) {   
22.          this .id = id;   
23.     }   
24.   
25.      public  String getAddress() {   
26.          return  address;   
27.     }   
28.   
29.      public   void  setAddress(String address) {   
30.          this .address = address;   
31.     }   
32.   
33.      public   int  getBathrooms() {   
34.          return  bathrooms;   
35.     }   
36.   
37.      public   void  setBathrooms( int  bathrooms) {   
38.          this .bathrooms = bathrooms;   
39.     }   
40.   
41.      public   int  getBedrooms() {   
42.          return  bedrooms;   
43.     }   
44.   
45.      public   void  setBedrooms( int  bedrooms) {   
46.          this .bedrooms = bedrooms;   
47.     }   
48.   
49.      public  String getCity() {   
50.          return  city;   
51.     }   
52.   
53.      public   void  setCity(String city) {   
54.          this .city = city;   
55.     }   
56.   
57.      public   int  getPrice() {   
58.          return  price;   
59.     }   
60.   
61.      public   void  setPrice( int  price) {   
62.          this .price = price;   
63.     }   
64.   
65.      public  String getProvince() {   
66.          return  province;   
67.     }   
68.   
69.      public   void  setProvince(String province) {   
70.          this .province = province;   
71.     }   
72. }  

 

java 代码

1. package  ajax.dwr.simpledwr;   
2.   
3. import  java.util.ArrayList;   
4. import  java.util.List;   
5.   
6. public   class  ApartmentDAO {   
7.   
8.      public  List findApartments( int  bedrooms,  int  bathrooms,  int  price) {   
9.         List list = findList(bedrooms, bathrooms, price);   
10.          return  list;   
11.     }   
12.   
13.   
14.      public   int  countApartments( int  bedrooms,  int  bathrooms,  int  price) {   
15.          return  findList(bedrooms, bathrooms, price).size();   
16.     }   
17.   
18.      private  List findList( int  bedrooms,  int  bathrooms,  int  price) {   
19.         List list = initData();   
20.          for  ( int  i =  0 ; i < list.size(); i++) {   
21.             Apartment apartment = (Apartment) list.get(i);   
22.              if  (apartment.getBedrooms() < bedrooms   
23.                     && apartment.getBathrooms() < bathrooms   
24.                     && apartment.getPrice() >= price) {   
25.                 list.remove(i);   
26.             }   
27.         }   
28.          return  list;   
29.     }   
30.   
31.   
32.      private  List initData() {   
33.         List list =  new  ArrayList();   
34.         Apartment apartment =  new  Apartment();   
35.   
36.         apartment.setId( 16001 );   
37.         apartment.setBedrooms( 1 );   
38.         apartment.setBathrooms( 1 );   
39.         apartment.setPrice( 850 );   
40.         apartment.setAddress( "123 King St. East" );   
41.         apartment.setCity( "Toronto" );   
42.         apartment.setProvince( "ON" );   
43.         list.add(apartment);   
44.   
45.         apartment.setId( 16002 );   
46.         apartment.setBedrooms( 2 );   
47.         apartment.setBathrooms( 1 );   
48.         apartment.setPrice( 1000 );   
49.         apartment.setAddress( "1023 Yonge Ave" );   
50.         apartment.setCity( "Toronto" );   
51.         apartment.setProvince( "ON" );   
52.         list.add(apartment);   
53.   
54.         apartment.setId( 16003 );   
55.         apartment.setBedrooms( 2 );   
56.         apartment.setBathrooms( 2 );   
57.         apartment.setPrice( 1050 );   
58.         apartment.setAddress( "27 Winchester St" );   
59.         apartment.setCity( "Toronto" );   
60.         apartment.setProvince( "ON" );   
61.         list.add(apartment);   
62.   
63.         apartment.setId( 16004 );   
64.         apartment.setBedrooms( 2 );   
65.         apartment.setBathrooms( 2 );   
66.         apartment.setPrice( 1350 );   
67.         apartment.setAddress( "774 Yonge Ave" );   
68.         apartment.setCity( "Toronto" );   
69.         apartment.setProvince( "ON" );   
70.         list.add(apartment);   
71.   
72.         apartment.setId( 16005 );   
73.         apartment.setBedrooms( 4 );   
74.         apartment.setBathrooms( 3 );   
75.         apartment.setPrice( 1550 );   
76.         apartment.setAddress( "1054 Rouge Valley Dr." );   
77.         apartment.setCity( "Toronto" );   
78.         apartment.setProvince( "ON" );   
79.         list.add(apartment);   
80.   
81.         apartment.setId( 16006 );   
82.         apartment.setBedrooms( 5 );   
83.         apartment.setBathrooms( 1 );   
84.         apartment.setPrice( 1850 );   
85.         apartment.setAddress( "207 Queens Quay West" );   
86.         apartment.setCity( "Toronto" );   
87.         apartment.setProvince( "ON" );   
88.         list.add(apartment);   
89.   
90.         apartment.setId( 16007 );   
91.         apartment.setBedrooms( 3 );   
92.         apartment.setBathrooms( 1 );   
93.         apartment.setPrice( 1850 );   
94.         apartment.setAddress( "10 Yorkville Ave." );   
95.         apartment.setCity( "Toronto" );   
96.         apartment.setProvince( "ON" );   
97.         list.add(apartment);   
98.   
99.         apartment.setId( 16008 );   
100.         apartment.setBedrooms( 4 );   
101.         apartment.setBathrooms( 2 );   
102.         apartment.setPrice( 1400 );   
103.         apartment.setAddress( "3 Watline Dr" );   
104.         apartment.setCity( "Toronto" );   
105.         apartment.setProvince( "ON" );   
106.         list.add(apartment);   
107.   
108.         apartment.setId( 16009 );   
109.         apartment.setBedrooms( 2 );   
110.         apartment.setBathrooms( 1 );   
111.         apartment.setPrice( 1180 );   
112.         apartment.setAddress( "98 St. Joseph St." );   
113.         apartment.setCity( "Toronto" );   
114.         apartment.setProvince( "ON" );   
115.         list.add(apartment);   
116.   
117.         apartment.setId( 16010 );   
118.         apartment.setBedrooms( 2 );   
119.         apartment.setBathrooms( 2 );   
120.         apartment.setPrice( 1050 );   
121.         apartment.setAddress( "93 Lombard St." );   
122.         apartment.setCity( "Toronto" );   
123.         apartment.setProvince( "ON" );   
124.         list.add(apartment);   
125.   
126.         apartment.setId( 16011 );   
127.         apartment.setBedrooms( 3 );   
128.         apartment.setBathrooms( 3 );   
129.         apartment.setPrice( 1150 );   
130.         apartment.setAddress( "7201 St. Clair Ave. West" );   
131.         apartment.setCity( "Toronto" );   
132.         apartment.setProvince( "ON" );   
133.         list.add(apartment);   
134.   
135.         apartment.setId( 16012 );   
136.         apartment.setBedrooms( 2 );   
137.         apartment.setBathrooms( 1 );   
138.         apartment.setPrice( 950 );   
139.         apartment.setAddress( "12 Eglington Ave. E." );   
140.         apartment.setCity( "Toronto" );   
141.         apartment.setProvince( "ON" );   
142.         list.add(apartment);   
143.   
144.         apartment.setId( 16013 );   
145.         apartment.setBedrooms( 2 );   
146.         apartment.setBathrooms( 2 );   
147.         apartment.setPrice( 1100 );   
148.         apartment.setAddress( "352 Dufferin St" );   
149.         apartment.setCity( "Toronto" );   
150.         apartment.setProvince( "ON" );   
151.         list.add(apartment);   
152.   
153.         apartment.setId( 16014 );   
154.         apartment.setBedrooms( 2 );   
155.         apartment.setBathrooms( 2 );   
156.         apartment.setPrice( 1350 );   
157.         apartment.setAddress( "2224 Wellington St. W" );   
158.         apartment.setCity( "Toronto" );   
159.         apartment.setProvince( "ON" );   
160.         list.add(apartment);   
161.   
162.         apartment.setId( 16015 );   
163.         apartment.setBedrooms( 4 );   
164.         apartment.setBathrooms( 3 );   
165.         apartment.setPrice( 1550 );   
166.         apartment.setAddress( "1454 College St." );   
167.         apartment.setCity( "Toronto" );   
168.         apartment.setProvince( "ON" );   
169.         list.add(apartment);   
170.   
171.         apartment.setId( 16016 );   
172.         apartment.setBedrooms( 5 );   
173.         apartment.setBathrooms( 1 );   
174.         apartment.setPrice( 1850 );   
175.         apartment.setAddress( "256 Peter St." );   
176.         apartment.setCity( "Toronto" );   
177.         apartment.setProvince( "ON" );   
178.         list.add(apartment);   
179.   
180.         apartment.setId( 16017 );   
181.         apartment.setBedrooms( 3 );   
182.         apartment.setBathrooms( 1 );   
183.         apartment.setPrice( 1850 );   
184.         apartment.setAddress( "6 The Esplanade" );   
185.         apartment.setCity( "Toronto" );   
186.         apartment.setProvince( "ON" );   
187.         list.add(apartment);   
188.   
189.         apartment.setId( 16018 );   
190.         apartment.setBedrooms( 4 );   
191.         apartment.setBathrooms( 2 );   
192.         apartment.setPrice( 1400 );   
193.         apartment.setAddress( "9 Mercer St." );   
194.         apartment.setCity( "Toronto" );   
195.         apartment.setProvince( "ON" );   
196.         list.add(apartment);   
197.   
198.          return  list;   
199.     }   
200.   
201. }   
202.   

 

     dwr.xml文件的配置

xml 代码

1. < dwr >   
2.      < allow >   
3.          < convert   converter = "bean"   match = "ajax.dwr.simpledwr.Apartment" /> //定义bean   
4.          < create   creator = "new"   javascript = "ApartmentDAO"   class = "ajax.dwr.simpledwr.ApartmentDAO" >   
5.          < include   method = "findApartments" />   
6.          < include   method = "countApartments" />   
7.          create >   
8.      allow >   
9. dwr >   

js 代码

1. "text/css"  media= "screen" >   
2.        @ import  url( style.css );   
3.         
4.      
5.   <script src=' dwr="" <="" span="">interface /ApartmentDAO.js'></script>   
6.   <script src=' dwr="" engine.js'=""></script>   
7.   <script src=' dwr="" util.js'=""></script>   
8.   <script>   
9.    //统计总数   
10.    function  updateTotal() {   
11.     $( "resultTable" ).style.display = 'none';   
12.      var  bedrooms = document.getElementById( "bedrooms" ).value;   
13.      var  bathrooms = document.getElementById( "bathrooms" ).value;   
14.      var  price = document.getElementById( "price" ).value;   
15.     ApartmentDAO.countApartments(loadTotal, bedrooms, bathrooms, price);   
16.      //DWR使用得巧妙之处 ,调用ApartmentDAO的countApartments方法在传入bedrooms, bathrooms, price三个参数的同时   
17.      //将其返回的结果 赋值给loadTotal（data）方法   
18.   }   
19.   
20.    function  updateResults() {   
21.     DWRUtil.removeAllRows( "apartmentsbody" ); //删除apartmentsbody的所有子child   
22.      var  bedrooms = document.getElementById( "bedrooms" ).value;   
23.      var  bathrooms = document.getElementById( "bathrooms" ).value;   
24.      var  price = document.getElementById( "price" ).value;   
25.     ApartmentDAO.findApartments(fillTable, bedrooms, bathrooms, price);   
26.     $( "resultTable" ).style.display =  '' ;   
27.   }   
28.      
29.    var  getId =  function (unit) {  return  unit.id };   
30.    var  getAddress =  function (unit) {  return  unit.address };   
31.    var  getBedrooms =  function (unit) {  return  unit.bedrooms };   
32.    var  getBathrooms =  function (unit) {  return  unit.bathrooms };   
33.    var  getPrice =  function (unit) {  return  unit.price };   
34.        
35.    function  loadTotal(data) {   
36.     document.getElementById( "totalRecords" ).innerHTML = data;   
37.   }   
38.      
39.    function  fillTable(apartment) {   
40.     DWRUtil.addRows( "apartmentsbody" , apartment, [ getId, getAddress, getBedrooms, getBathrooms, getPrice ]);   
41.   }   
42.      
43. </script>