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.
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; }); |