Notice that the input field “messageBody” is the one that will be populated by the method displayMessageBody
, which takes the message ID as a parameter. An AJAX call will use this parameter to request the message details from the server. (Complete source for this application is available for download. Please see resources)
Step 2: Making an AJAX Call
The key element of this implementation is an AJAX call. In the following code, notice how different browser implementations require different instantiation methods for the XMLHttpRequest object:
function getHTTPRequestObject() { var xmlHttpRequest; /*@cc_on @if (@_jscript_version >= 5) try { xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (exception1) { try { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (exception2) { xmlhttp = false; } } @else xmlhttpRequest = false; @end @*/ if (!xmlHttpRequest && typeof XMLHttpRequest != 'undefined') { try { xmlHttpRequest = new XMLHttpRequest(); } catch (exception) { xmlHttpRequest = false; } } return xmlHttpRequest;}var httpRequester = getHTTPRequestObject(); // Create the xml http object on the page load
This code utilizes Internet Explorer annotations to instantiate an AJAX object. Other browsers executing this script will simply ignore the annotated sections of the getHTTPRequestObject()
function. Keep in mind that your browser must support JavaScript 1.5 and above.
Step 3: Asynchronous Loading of the Content
This step implements the asynchronous invocation of the Web resources. The following code illustrates the exact steps required for the asynchronous loading of the Web resources from the JavaScript function:
var couldProcess = false;function displayMessageBody( messageID ) { idToDisplay = messageID if (!couldProcess && httpRequester) { httpRequester.open("POST", serverSideURL + escape(messageID), true); httpRequester.onreadystatechange = processResponse; couldProcess = true; httpRequester.send(null); } }
The method displayMessageBody
accepts the ID of the message to display. It specifies how the XMLHttpRequest object should access the URL by passing the following three parameters:
- The method
POST
orGET
- The URL, plus any escaped parameters (In this case, you pass only an ID. To specify multi-parameter URLs, use the standard URL query string notations and always escape.)
- A Boolean flag indicating whether the call should be executed in an asynchronous fashion
The method also sets the content-processing method processResponse
as a callback, which is invoked when the content from the URL loads.
Step 4: Processing the Results
The previously mentioned method processResponse
is invoked as a callback. It takes the output from the XMLHttpRequest object, parses it, and assigns it to the page object(s):
function processResponse() { if ( httpRequester.readyState == COMPLETE ) {//this is a locally declared constant, its // value is 4 if ( httpRequester.responseText.indexOf('invalid') == -1 ) { var values = httpRequester.responseText.split(","); // parse the server response document.getElementById('messageBody').value = values[3];//pick the fourth value // and actual message couldProcess = false; } }}
HttpRequester.readyState is an indicator that declares the completion of the URL code. It can take the following values:
Notice that the response is accessed as textual content. XMLHttpRequest can easily retrieve non-XML text, as well as XML content.
If you needed to retrieve XML content, the line would read responseXML and you would access it as XML DOM object. This versatility of text formats is welcome news because XML could be overkill for simple data retrieval scenarios like the one described here.
Step 5: Improving the Robustness of the AJAX Application
Any extensive use of JavaScript inevitably raises concerns about the robustness and reliability of an application that heavily relies on this very relaxed and forgiving scripting language. With AJAX, the issue is even more complicated. AJAX makes remote calls, which introduce an additional dimension of complexity and the opportunity for errors?especially considering that built-in support for server-side error conditions is very limited.
With all this in mind, here are some immediate error-prevention suggestions:
- Make sure that your application can function in a bare bones mode, even without the AJAX.
- Verify response codes from the AJAX calls before the further processing of the results.XMLHttpRequest API supports HTTP codes (200, 400, …). These can be accessed via the status property (along with the statusText property, which holds the message associated with the status of the response):
if ( httpRequester.readyState == 4) {// if the status is 200 (OK) proceedif ( httpRequester.status == 200) {// ... process results ...} else {// ... handle or report error here ...}
AJAX Implementation: An Art of Tradeoffs
Many programmers consider JavaScript a sub-optimal programming solution because of its lacking debugging methods and its error-prone, weak-typed programming model. With this in mind, it is fair to say that AJAX is a solution of trade-offs. You trade the safety of the more robust languages like Java or C# for the presentational attractiveness and the innovative appeal of this JavaScript-based technology.
Hopefully, the popularity of AJAX and the increasing use of JavaScript will prompt browser producers to further innovate the JavaScript objects and incorporate mechanisms that make JavaScript objects a bit more compatible, safer to use, and easier to debug.
In the meantime, I see AJAX as an immediate candidate for the new generation of Internet portals and interactive applications. With AJAX, Internet news portals such as Yahoo, Google News, or MSN will allow users to access all areas of interest?including specific details?from the same portal page.
The promise of rich clients that can be implemented by leveraging existing Web technologies and Internet infrastructure as-is is attractive. Interactive communication applications already have adopted AJAX?Google uses it for its ultra-popular Gmail e-mail client?and I expect this trend to continue.
One advantage that software development teams will enjoy is this technology’s accessibility and flat learning curve. As previously mentioned, it is available on all modern browsers. Also, it does not require advanced programming skills like J2EE or .NET, yet it can produce impressive and effective results that will appeal to end users.
Helpful Tools and Extensions
As AJAX grows in popularity, helpful third-party extensions will continue to emerge?ones that make complex tasks such as debugging, cross-browser development, and XML processing easier. Some of the more prominent extensions that you may find helpful today are:
- Greasemonkey
Greasemonkey is a Firefox extension that enables installation of custom DHTML scripts. Some blog authors (see resources) have produced scripts that help trace and debug AJAX routines utilizing Greasemonkey features. - Sarrisa
Sarrisa is a script library that automates and simplifies the most common XML operations (e.g., XML document loading from URL, instantiations, XPath, XSLT processing) with AJAX, as well as cross-browser implementations and testing. - Direct Web Remoting (DWR)
DWR is an AJAX-based Java remoting library that enables asynchronous remote invocation of Java server code from the JavaScript routines.