RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


AJAX: A Fresh Look at Web Development : Page 3

AJAX enables a dynamic, asynchronous Web experience without the need for page refreshes. Find out how this combination of technologies that you already know and love can reinvent your Web development.

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;

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 or GET
  • 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:

  • 0 = uninitialized
  • 1 = loading
  • 2 = loaded
  • 3 = interactive
  • 4 = complete (This demo focuses on this state.)
  • 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.

    Close Icon
    Thanks for your registration, follow us on our social networks to keep up-to-date