Understanding AJAX

• Download source - 2 Kb

Introduction

Just imagine a very massive webpage providing lot of functionalities with lot of Data, all coming from the server. Now the user wants to get some info from the server that may affect only the small portion of this page but when he submits his request, the whole page renders again unnecessarily, taking lot of time and populating each and every thing again.
This has been a very irritating problem in the past but now, AJAX (Asynchronous JavaScript And XML) has come up as a Solution of the whole page rendering. With the blessings of AJAX, we can update/refresh only the necessary part of our webpage instead of rendering the whole page itself.

Our GOAL in this Example

Our aim is to get familiar with AJAX. So here we are going to cook a very simple example by focusing on the usage of AJAX rather than making the business logic and presentation complex by involving Database connectivity or other complex logics. (Sure we all already know Databases, even if we don't know we will learn that some other time).

We'll generate random numbers on the Server (generateRandomNos.asp) and then we will call this server side code on our simple HTML page (showRandomNos.html) by means of AJAX. We'll notice that only the part of out HTML page (showRandomNos.html) will be updated instead of getting the whole page refreshed.

Using the code

Our first page is just a HTML page that displays randomly generated numbers when user clicks on the button "Generate Random numbers" BUT the science used here is AJAX. Only a small division is updated instead of rendering the whole page to accomplish the user's request.

   onclick='JavaScript:generateRandomNumbers("generateRandomNos.asp")'

On the button's Onclick event, we call a JavaScript function and pass the URL of the .asp page (that will generate the Random numbers at the server) like above;

   function generateRandomNumbers(targetURL) 
   {
        var xmlHttpReq = false;
        // FOR IE

        if (window.ActiveXObject) {
            xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // FOR OTHER BROWSERS

        else if (window.XMLHttpRequest) {
            xmlHttpReq = new XMLHttpRequest();
        }

        xmlHttpReq.open('POST', targetURL, true);
        xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xmlHttpReq.onreadystatechange = 
            function() { // START OF Callback function

                if (xmlHttpReq.readyState == 4) {
                    document.getElementById("result").innerHTML = xmlHttpReq.responseText;
                    document.getElementById("generationStatus").innerHTML= "Done !!";
                }
                else
                {
                    document.getElementById("generationStatus").innerHTML= "Generating Random numbers...";
                }
            } // END OF Callback function

        xmlHttpReq.send();
     }

For processing the server side code, we need to send a request to the server. As AJAX is a browser specific technology so we've to make a browser specific object such as in case of I.E; we will create it like below;

        new ActiveXObject("Microsoft.XMLHTTP");

Now we will call the server side code using the XMLHttpRequest object.

        xmlHttpReq.open('POST', targetURL, true);

Different states of our xmlHttpRequest object will let us know that how far we have reached. Its readyState 4 tells the browser that our request has successfully been completed and control has been returned to the browser. readyStates can be of four different types such as below;

        0 = uninitialized
        1 = loading
        2 = loaded
        3 = under process
        4 = complete

        if (xmlHttpReq.readyState == 4) {
            document.getElementById("result").innerHTML = xmlHttpReq.responseText;
            document.getElementById("generationStatus").innerHTML= "Done !!";
        }
        else
        {
            document.getElementById("generationStatus").innerHTML= "Generating Random numbers...";
        }

We can also get the server's response in the form of TEXT or XML such as below;

        
        // FOR TEXT Response

            xmlHttpReq.responseText;
        // FOR XML Response

            xmlHttpReq.responseXML;
            

In the End, Lets have a look on our Server side code below; It just generates random numbers using rnd method

        for i = 1 to 9999
            Randomize()
            response.Write(rnd)
        next

We've successfully cooked our first AJAX example and to taste it, just place both the files on your web server and then run the web page showRandomNos.html... Enjoy :-)

You must Sign In to use this message board.

FAQ  Noise Tolerance Very HighHighMediumLowVery Low  Search Messages    Layout Expand All MessagesThread ViewNo Javascript (slow)No Javascript Preview    Per page 102550

Msgs 1 to 2 of 2 (Total in Forum: 2) (Refresh) FirstPrevNext

Tags cykophysh39 22:21 10 Oct '06   your article is kind of confusing as <code> is popping up everywhere. The content of your article is quite intresting though "a fool will not learn from a wise man, but a wise man will learn from a fool" "It is hard to fail, but it is worse never to have tried to succeed." - Theodore Roosevelt "Success is going from failure to failure without losing your enthusiasm." - Winston Churchill My Website || My Blog Sign In·View Thread·PermaLink 5.00/5 (1 vote) Re: Tags Nawaz Ijaz 22:31 10 Oct '06   Fixed...!! However if you still see this TAG <CODE> some where, just ignore it... actually this was used for color formatting but on few places, its appearing as it is; instead of applying color formatting. I’ve reported this thing to editors as well..Thanx for appreciating the contents... -- modified at 5:36 Thursday 12th October, 2006 Nawaz Ijaz Lahore, Pakistan. Sign In·View Thread·PermaLink

Last Visit: Monday, December 1, 2008 4:49 PM     Last Update:Monday, December 1, 2008 4:49 PM