Ajax Components

Direct Web Remoting

We've seen how JavaScript libraries can greatly reduce the amount of Java-Script code you need to write to implement Ajax functionality in your applications. For example, earlier in this chapter, we replaced approximately 30 lines of handcrafted JavaScript with a single call to the Prototype library:

   function showDateAndTime() {       new Ajax.Updater("dateDIV", // DIV to update          "dateAndTime.ajax",      // URL          { method: "get" });      // HTTP method       }    }

In the preceding code fragment, we execute an Ajax GET request with the URL dateAndTime.ajax. When the request is complete, Prototype updates the inner HTML of the dateDIV with the response text. Can things possibly get easier than that?

In fact, they can. Remember that although the JavaScript in the preceding code fragment is simple enough, you still have to implement server-side logic to handle the Ajax request. That means you have to implement a servlet, phase listener, or some other special, Ajax-savvy object that knows how to handle your Ajax requests. That Ajax-savvy object is a middleman of sorts that typically calls JavaBean methods of one kind or another.

It would be nice if we could dispense with the middleman and just invoke JavaBean methods directly from JavaScript. For example, what if we could transform the preceding JavaScript into a simple function invocation, like this:

   $("dateDIV").innerHTML = ZipCodes.getCityAndStateForZip(zip);

Now we have really simplified our Ajax call, down to a single function invocation. All of this is possible with the open-source Direct Web Remoting (DWR), which aims to make remote method calls as simple as possible.

DWR is a simple, yet powerful, framework that has a good deal of mind share in the Java community. The homepage for DWR is shown in Figure 11-5.

Figure 11-5. The DWR homepage

To illustrate the usefulness of DWR, we rewrite the application discussed in "Form Completion" on page 534 to use DWR. The DWR version of the application is shown in Figure 11-6.

Figure 11-6. Using DWR

The application shown in Figure 11-6 uses a DWR call to a server-side bean method:

  <script type='text/javascript'            src='/books/2/24/1/html/2//form-completion-dwr/dwr/interface/ZipCodes.js'></script>   ...   function zipChanged(zip) {      if(zip.length != 5) {         clearCityAndStateFields();      }      else {         // A DWR call. See /WEB-INF/dwr.xml         ZipCodes.getCityAndStateForZip(zip, processZipCodeSelection);      }   }

In the preceding code, we invoke the getCityAndStateForZip method on a Java-Script object named ZipCodes. That JavaScript object is available to us by virtue of the formulaic script element in the preceding code.

We associate the ZipCodes JavaScript object with a JavaBean on the server in an XML configuration file, like this:

  <!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="ZipCodes">              <param name="class" value="com.corejsf.ZipCodeDirectory"/>           </create>       </allow>   </dwr>

The preceding incantation allows access to all methods of the ZipCodeDirectory class through a JavaScript object named ZipCodes.

It is a bit anticlimactic, but here is the ZipCodeDirectory class:

  public class ZipCodeDirectory {       public String getCityAndStateForZip(String zip) {           return "97402".equals(zip) ? "Eugene,Oregon" : "NO DATA,NO DATA";       }   }