Replacing JavaTM Platform, Enterprise Edition (Java EE) Web application functions with Ajax

In most Web applications, the content of what is displayed in the browser is generated on the server and sent to the browser through the use of a JavaServer Page (JSP) or other server-side rendering. With Asynchronous JavaScriptTM And XML (Ajax) you can flip that model by having the content generated on the client, and the result sent back to the server. The JavaScript on the browser functions more as an application development language rather than a tool to enhance your Web site with code snippets. A number of advantages exist for creating a client-side developed presentation.

  • Responsiveness of the client browser. Because the content that is displayed is generated in the browser using the Document Object Model (DOM) of the browser, the application can seem more responsive than the request followed by a response architecture. The quality of the responsiveness is often compared to an application that is on the local workstation.
  • Reduction of bandwidth and processing time on the server. Because the presentation is rendered on the client workstation rather than on the server, the amount of CPU utilization can be decreased. The JavaScript application pages that are retrieved by the client when it initially loads the application can be pushed to efficient cache servers. The JavaTM Platform, Enterprise Edition (Java EE) application server is used to service only the data portion of the request from the client.
  • Creating a browser-based application involves changing the architecture by moving the presentation layer to the client and replacing it with a proxy that the client communicates with. The proxy handles HTTP requests and responses from the client and forwards them to other services on the server.

    The Dojo Toolkit provides a set of libraries that you can use to replace a server-side generated user interface (UI), such as a JSP file with a UI that is dynamically generated on the client. Other options include creating your own widgets that aggregated other Dojo controls. As an example, the Plants by WebSphere® application creates an InventoryGrid control to display inventory. The price and image information is retrieved from the server, yet the presentation is rendered within the browser. This code is located in the InventoryGrid.js file.

    How do you communicate from the server back to the browser asynchronously after the browser creates the JavaScript UI? The Dojo Toolkit supports a number of IO Transports. This example uses the dojo.rawXhrPost function. The dojo.rawXhrPost function registers a callback function and creates asynchronous calls back to the server. When the server returns a response, your callback is invoked, which you can use to retrieve the response. Listing 1 is taken from the inventoryGrid.js file in the Plants by WebSphere application. This listing represents a typical setup of how to complete an asynchronous post call using Dojo.

    The URL argument represents the URL of the server location. This URL must originate from the same domain as the current JavaScript file. This security measure, on the part of the browser, avoids cross-site scripting vulnerablities. The postData variable contains the XML request that is sent to the server. The deferred.addCallback contains the callback function that Dojo uses to call when you receive a response from the server. In this case, the function calls the _loadItemsFromXML() function with the xmlData that is returned by the server.


    Listing 1. Using the dojo.rawXhrPost

     
     _getInventory : function( dept ) {
    	// XHR call to get the inventory (dept is the department category for the items)
    	   var self = this;
    	   
    	   var deferred = dojo.rawXhrPost( {
    	       url: this.url,
    	       timeout: 5000,	       
    		   handleAs : "xml",
    		   headers: { "Content-Type":"text/xml" },
    	       postData: "<catalog><dept>"+dept+"</dept></catalog>" 	       
    		   } );
    		  		   
    	   deferred.addCallback(function(response){
              console.debug("Also got a successful server response: " + response);
            
              // Call our internal function to parse the response 		
    		  self._loadItemsFromXML(response);
           
              //If you think there might be other callback handlers registered with this deferred, then
              //you return the response object from this function.  Otherwise the error callbacks
              //will be called.
              return response;
           });