JIM HUNTER Computer Software & Web Application Development

A lightweight, simplified AJAX wrapper:

The new AJAX technology - Asynchronous JavaScript and XML - is a huge step forward for client-side scripting in the latest Web browsers. It takes only a little research to realize how powerful, yet simple, this new technology really is. AJAX enables the client to make HTTP requests directly back to the server, from whence the page originated, using a JavaScript object. Using the data received, along with a little DHTML, different areas within the Web page can change state independently without affecting the rest of the page.

The more I got in to it, the more I liked the concept that a JavaScript object could send a separate HTTP request without the need to refresh the entire page. This is extremely useful and can have many practical applications. Originally, it seems, the idea was to supply the browser with data in the form of XML. Microsoft's Internet Explorer used an ActiveX component, and Mozilla-powered browsers used the built-in XMLHttpRequest object. Since IE 7, however, Microsoft's browser has come on board and uses the XMLHttpRequest object as well. In any case, the browser object can retrieve any type of text that the server sends as a response.

To facilitate development, I created a lightweight cross-browser JavaScript wrapper, which I call xrequest . To execute an AJAX request with xrequest is very simple.

xrequest.load(request_url);
targetArea.innerHTML = xrequest.client.responseText;

A single function call does all the work. The server's response to the requested URL is then stored in the xrequest.client object, which is really just a handle to the Web browser's XMLHttpRequest object.

The above example is a simple HTTP GET request. To execute an HTTP POST, a second argument must be supplied to the load() function.

var postParams = "param1=" + param1_value + "&param2=" + param2_value;
xrequest.load(uri, postParams);

The postParams argument must be a string of key/value pairs, in the form of "key_name=value," delimited by the "&" character. The presence of this second argument instructs xrequest to send an HTTP POST request, with the supplied parameters as part of the POST body.

In the case of an asynchronous request, a custom handler function must be provided. It serves as a callback function used by the XMLHttpRequest object. It will be assigned to the XMLHttpRequest.onreadystatechange event handler, which means that it will be called whenever the XMLHttpRequest.readyState changes. A typical custom handler function would be similar to this:

function asynchronousHandler(){
   try{
       if( xrequest.statusIsOk() ){
           targetArea.innerHTML = xrequest.client.responseText; 
       }
   }catch(e){
       alert(e.message);
   }
}

An asynchronous GET request would look like this:

xrequest.load(request_url, null, asynchronousHandler);

The targetArea referred to in the examples above would be a variable that references a dynamic HTML element such as a <div>. The statusIsOk() function is a helper function that takes care of determining when the request has returned successfully and the content is available.

For an AJAX example, I redesigned a Web application that I had created previously, called Message Editor . This new incarnation of Message Editor is similar to the old version in that the browser communicates with a Servlet for access to data. The Servlet invokes other server-side components to parse data stored in XML format, as well as a Java properties file, and transforms the data into HTML via XSLT. But the added functionality within the browser allowing it to make compartmentalized HTTP requests eliminates the need to write a JSP for the view and greatly simplifies the server-side code. There's no need to shuttle a Data Transfer Object from the Servlet to the JSP. Furthermore the whole request/response paradigm is greatly simplified because each request/response no longer needs to be responsible for maintaining the state of the entire Web page. Only a portion of the page, or whatever data is requested, is of concern within the request and response. Only a portion of the page is reloaded.

In addition, the new browser functionality can allow for a richer, more dynamic user interface, closer in look and feel to a desktop style application. Having more functionality on the front end, allows greater freedom in user design. Likewise, the new functionality enabled by XMLHttpRequest gives Web developers a powerful new tool.

Have a look at the Ajax-powered Message Editor .

copyright © 2003 - 2017 James P Hunter