DWR makes AJAX so easy

<servlet>
 <servlet-name>dwr-invoker</servlet-name>
 <display-name>DWR Servlet</display-name>
 <description>Direct Web Remoter Servlet</description>
 <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
 <init-param>
 <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>

<dwr>
 <allow>
 <convert converter="bean" match="dwr.sample.Apartment"/>
 <create creator="new" javascript="ApartmentDAO" class="dwr.sample.ApartmentDAO">
 <include method="findApartments"/>
 <include method="countApartments"/>
 </create>
 </allow>
 </dwr>

The above file achieves both goals in our example. First, the <convert> tag tells DWR to convert the type of the dwr.sample.Apartment object to an associative array, because, for security reasons, DWR does not convert ordinary beans by default. Second, the <create> tag lets DWR expose the dwr.sample.ApartmentDAO class for JavaScript calls; the JavaScript files we use in the page are defined by the javascript attribute. We must pay attention to the <include> tag, which specifies which methods of the dwr.sample.ApartmentDAO class are available.

 After the HTML/JSP code <BR>is configured, you can start your Web application. At this time, DWR will be ready to call the required methods from your HTML or Java server-side page (JSP). There is no need to You create JavaScript files. In the search.jsp file, we must add the JavaScript interface provided by DWR, as well as the DWR engine, and add the following three lines to ourcode :

<script src='dwr/interface/ApartmentDAO.js'></script>
 <script src='dwr/engine.js'></script>
 <script src='dwr/util.js'></script>

We noticed that when the user changes the search criteria, this is the first application of javascript :void(0);">AJAX in the sample program; as he sees , the number of available apartments is updated when the criteria changes. I created two JavaScript functions: The ApartmentDAO.countApartments() function is the most interesting part. is the first parameter, the loadTotal() function, which specifies the JavaScript method that DWR will call when receiving a response from the server. loadTotal is then called to display the results in the <div> of the HTML page. JavaScript functions used in interactive scenarios:

function updateTotal() {
 $("resultTable").style.display = 'none';
 var bedrooms = document.getElementById("bedrooms").value;
 var bathrooms = document.getElementById("bathrooms").value;
 var price = document.getElementById("price").value;
 ApartmentDAO.countApartments(loadTotal, bedrooms, bathrooms, price);
 }

 function loadTotal(data) {
 document.getElementById("totalRecords").innerHTML = data;
 }

Obviously, the user wants to see apartment listings that match his search criteria. Then, when the user is satisfied with his search criteria and the totals are valid, he presses the button that displays the results, which calls the updateResults() JavaScript method:
 function updateResults() {

 DWRUtil.removeAllRows("apartmentsbody");
 var bedrooms = document.getElementById("bedrooms").value;
 var bathrooms = document.getElementById("bathrooms").value;
 var price = document.getElementById("price").value;
 ApartmentDAO.findApartments(fillTable, bedrooms, bathrooms, price);
 $("resultTable").style.display = '';
 }

 function fillTable(apartment) {
 DWRUtil.addRows("apartmentsbody", apartment, [ getId, getAddress, getBedrooms, getBathrooms, getPrice ]);
 }
 The updateResults() method clears the table field that stores search returned results, obtains the required parameters from the user interface, and passes these parameters to the ApartmentDAO object created by DWR. Then the database query will be executed and fillTable() will be called, which parses the object returned by DWR (apartments) and displays it into the page (apartmentsbody).

 Security Factors <BR>To keep the example brief, the ApartmentDAO class is kept as simple as possible, but such a class usually has a set of set methods to manipulate data, such as insert(), update() and delete(). DWR exposes all public methods to be called by all HTML pages. For security reasons, it is unwise to expose your data access layer like this. Developers can create a facade that centralizes communication between all JavaScript functions and underlying business components, thus limiting excessive exposure of functionality.

 Conclusion <BR>This article is just a beginning for you to use DWR-powered javascript :void(0);">AJAX in your projects. DWR allows you to focus on how to improve the interaction model of your application. , eliminating the burden of writing and debugging JavaScript code. The most interesting challenge with javascript :void(0);">AJAX is defining where and how to improve usability. DWR is responsible for operating the communication between the Web page and your Java objects, thus helping you to focus entirely on how to make your application's user interface more friendly.
 I would like to thank Mircea Oancea and Marcos Pereira, who read this article and gave very valuable feedback.

 Resources ·javaworld.com:javaworld.com
 ·Matrix-Java developer community: http://www.matrix.org.cn/
 ·onjava.com:onjava.com
 ·Download all source code of the sample program: http://www.javaworld.com/javaworld/jw-06-2005/dwr/jw-0620-dwr.war
 ·DWR: http://www.getahead.ltd.uk/dwr/index.html
 ·HSQL: http://hsqldb.sourceforge.net/
 ·javascript :void(0);">Definition of AJAX: http://en.wikipedia.org/wiki/javascript :void(0);">AJAX
 · "javascript :void(0);">AJAX: A New Path to Web Applications": Jesse James Garrett (Adaptive Path, 2005.2): http://www.adaptivepath.com/publications/essays/archives/000385. php
 · “A very dynamic web interface” Drew McLellan (xml.com, 2005.2): http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
 ·XMLHttpRequest & javascript :void(0);">AJAX working example: http://www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples
 · “Usable XMLHttpRequest Practices” Thomas Baekdal (Baekdal.com, 2005.3): http://www.baekdal.com/articles/Usability/usable-XMLHttpRequest/
 ·"XMLHttpRequest Usage Guidelines" Thomas Baekdal (Baekdal.com, 2005.2): http://www.baekdal.com/articles/Usability/XMLHttpRequest-guidelines/