Development - Using Ajax

Ajax, which stands for Asynchronous JavaScript and XML, is a method that enables web sites and web applications to communicate asynchronously with the server.

Well, it does sound a mouthful. Doesn’t it?

To explain what Ajax is first let’s talk about how a web site works. The method web sites work is called client-server architecture. In this the client is your web browser and the server is your web server. The client asks for a web page from the server and the server sends the requested page to the client. In early days, when you ask for a web page, the client request for that whole page from the server. This means that you will have to wait staring at a blank screen until the page loads which is a boring thing to do and a complete waste of time and bandwidth. This is where Ajax came in. Ajax enabled web pages to load in parts and send requests behind the scene enabling a web page to request only the required data from the server to update its appearance and information. Nowadays web sites use Ajax frequently to deliver a seamless user experience.

There are several ways that you can implement Ajax to a web site. In this project I have used the “XMLHttpRequest” object.

This is how the request object was created using JavaScript. The implementation of XMLHttpRequest object differs depending on the browser. That is why an “if” statement block is used.

/*

* create the request object

*/

function ajaxObj()

{

    var ajaxCall = false;

    if(window.XMLHttpRequest) //check whether the browser is Firefox

    {

        ajaxCall = new XMLHttpRequest();

        ajaxCall.overrideMimeType("text/xml");

    }

    else if(window.ActiveXObject) //check whether the browser is IE

    {

        ajaxCall = new ActiveXObject("Microsoft.XMLHTTP");

    }

    return ajaxCall;

}

After creating the Ajax object you can send asynchronous requests to the server using it. Here is the code for that. This function takes the following parameters.

dataSource – The page that you wish to call asynchronously

ajaxCall – Ajax object created using the above ajaxObj() function.

/*

* communicating with the server asynchronously

*/

function getData(dataSource, ajaxCall)

{

     // The GET method is used here. Also can use the POST method with little

     // modification to the code

     if(ajaxCall)

    {

       ajaxCall.open("GET", dataSource);

       ajaxCall.send(null);

    }

}

Finally this is how you tie all these up to get the job done. The following code is used to load HTML content asynchronously from the server to dynamically change the appearance of the user interface.

This function takes the following parameter.

formName – Name of the HTML content file that is to be loaded

/*

* load forms dynamically

*/

function loadForm(formName)

{

    var ajaxCall = ajaxObj();

    getData("./ui/forms/" + formName, ajaxCall);

    ajaxCall.onreadystatechange = function()

       {

           //show a message while loading

           if(ajaxCall.readyState == 3)

           {

                var target;

                target = document.getElementById("divMain");

                target.innerHTML = "Loading…"        

}

           if(ajaxCall.readyState == 4 && ajaxCall.status == 200)

           {

                target = document.getElementById("divMain");

                //get form data

                var formContent = ajaxCall.responseText;

                //display form

                target.innerHTML = formContent;

           }

       }

}