AJAX in Action

This section will give clear understanding on how the AJAX operation is performed. Let us create simple example which will illustrate the operations involved in making AJAX call. Let us take a quick look at the output of this example before we understand the steps of AJAX operation.

Demo:
Click the button to change the content of this block without refreshing or reloading the page.

Steps of AJAX Operation

  1. A client event occurs
  2. An XMLHttpRequest object is created
  3. The XMLHttpRequest object is configured
  4. The XMLHttpRequest object makes an asynchronous request to the Webserver.
  5. Webserver returns the result containing XML document.
  6. The XMLHttpRequest object calls the callback() function and processes the result.
  7. The HTML DOM is updated

Lets take these steps one by one

1. A client event occurs
  • A JavaScript function is called as the result of an event
  • Example:JavaScript function – changeContent is mapped as a event handler to a onclickevent on button
  • <button onclick=”changeContent()”>Change the block content</button”>

Presentation (HTML):

<div id="ajax_demo_div">Click the button to change the content of this block without refreshing or reloading the page.
<button onclick="changeContent()">Change the block content</button>
</div>

2. The XMLHttpRequest object is created
var xmlhttp;
function createObject() {
    if (window.XMLHttpRequest) { // Mozilla, Safari, ...
      xmlhttp= new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
      try {
        xmlhttp= new ActiveXObject("Msxml2.XMLHTTP"); 
      }
      catch (e) {
        try {
          xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {}
      }
 }

3. The XMLHttpRequest object is Configured

In this step we will write a function which will be triggered by the client event and a callback function processRequest() will be registered

function changeContent() {    
createObject();    // Here processRequest() is the callback function.    
xmlhttp.onreadystatechange = processRequest;   
xmlhttp.open("GET", "http://programmerguru.com/demo.html", true);    
xmlhttp.send(null); 
}

4. Making Asynchornous Request to the Webserver

This code snippet makes request to resource – ‘demo.html’ in web server. – This is all being done using XMLHttpRequest objectxmlhttp

function changeContent() {    
createObject();    // Here processRequest() is the callback function.    
xmlhttp.onreadystatechange = processRequest;   
xmlhttp.open("GET", "http://programmerguru.com/demo.html", true);    
xmlhttp.send(null); 
}

5. Webserver returns the result containing XML document

You can implement your server side script in any language. But logic should be as follows

  • Get a request from the client
  • Parse the input from the client
  • Do required processing.
  • Send the output to the client.

If we assume that you are going to write a servlet then here is the piece of code

6. Callback function processRequest() is called

The XMLHttpRequest object was configured to call the processRequest() function when there is a state change to the readyState of the XMLHttpRequest object. Now this function will receive the result from the server and will do required processing. As in the following example it sets the returned content from the Webserver as HTML of div tag with id ‘ajax_demo_div’.

function processRequest() {
if (xmlhttp.readyState == 4) {       
if (xmlhttp.status == 200) {          
document.getElementById("ajax_demo_div").innerHTML = xmlhttp.responseText;     
  }     
} 
}

7. The HTML DOM is updated

This is the final step and in this step the HTML page will be updated. It happens in the following way

    JavaScript technology gets a reference to any element in a page using DOM API

  • The recommended way to gain a reference to an element is to call.
document.getElementById("ajax_demo_div"
  • JavaScript technology may now be used to modify the element’s inner HTML content
document.getElementById("ajax_demo_div").innerHTML = xmlhttp.responseText; 

We are done!!.. If you understood above mentioned seven steps then you are almost done with AJAX. In next chapter we will see XMLHttpRequest object in more detail.


Author: admin

Share This Post On

Pin It on Pinterest

Shares