Basically what is AJAX?

6 Dec

BACKGROUND

Few days back I had to face a question, Could AJAX reduce page loading time?
Since then I have been thinking to write something on it. The term “AJAX” is not
new in web application. Google has been using it since 2005.

INTRODUCTION

We all know AJAX process one kind of HTTP request for us. Always we are using
HTTP request in web browser. When a request appears to web server in the
response it returns some content. Generally it is a bundle of html codes. After
getting this bundle, the web browser load the new content and we loss previously
loaded page. On this context AJAX can play an excellent rule.

WHAT IS AJAX

AJAX = Asynchronous JavaScript and XML.

The mechanism of AJAX is very simple. JavaScript send a xmlHTTP request to
server and preserve the returned content in a variable. So it is not affecting
currently loaded page.

CONFIGURE AJAX

CPain, JQuery, Prototype are famous libraries for AJAX and pretty easy to
use. And writing an AJAX function is also not a big deal. First need an xmlHTTP
reference to process.// Firefox, Opera 8.0+, Safari

xmlHttp=new XMLHttpRequest();

// Internet Explorer

xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);

xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

When xmlHttp object is ready then we can send request to server. There are tow
basic function “open” and “send” to process request. First one set the
properties and second one send the request.

xmlHttp.open (“GET”,” abc.php”, true);

xmlHttp.send();

xmlHttp.onreadystatechange is a special instruction to set a “function” or
“function name” to catch the response. After sending request successfully the
return content store in a variable called “xmlHttp.responseText”. We can trace
the success rate of the request from some status flags (Loading-1, Loaded-2,
Interactive-3, and Complete-4). These status flags stored in “xmlHttp.readyState”.

xmlHttp.onreadystatechange=function()

{

         if(xmlHttp.readyState==4)

        {

            Alert(xmlHttp.responseText );

        }

}

So AJAX is nothing but browsing a specific URL from a JavaScript document
keeping the existing page loaded as it is. This is so far what AJAX is.

AJAX & PAGE LOADING TIME:

First of all AJAX is not a tool to reduce the system press. It can do nothing
except fetching content from server. But if we can use AJAX in such a way that
first time we will load small amount of data and the rest data will fetch if
user request for it. In that case AJAX can reduce the page loading time
drastically.Let’s say we are showing 10 pictures in a page. If one image needs
‘X’ amount of time, then total time is

T = 10X

Now if we decide to load one image first time and rest 9 images will load if
user clicks on first loaded image. Then first loading time of the page is

T = 1X

So it will reduce the system press by 9 times. This is actually how AJAX can
reduce the page loading time.

REFERENCE:

http://www.w3schools.com/ajax/default.asp
http://www.prototypejs.org/api/ajax
http://cpaint.sourceforge.net/
http://docs.jquery.com/Ajax

EXAMPLE

See the following example to see how AJAX works.

<html>

    <head>

    <script type=”text/javascript”>

        function ajax ()
       {
              var xmlHttp;

             try
            {
                    // Firefox, Opera 8.0+, Safari
                   xmlHttp=new XMLHttpRequest();
             }
            catch (e)
            {
                // Internet Explorer
               try
              {     
                       xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
               }
               catch (e)
                {
                      try
                      {
                          xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
                       }
                        catch (e)
                      {                       
                             alert(“Your browser does not support AJAX!”);
                             return false;
                      }
                }
              }
              return xmlHttp;

    }

     function ajaxFunction()
     {

              var xmlHttp;
               xmlHttp = ajax();
               xmlHttp.onreadystatechange=function()
              {
                      if(xmlHttp.readyState==4)
                    {

                       document.myForm.time.value=xmlHttp.responseText;
                   }
             }

           xmlHttp.open(“GET”,”time.php”,true);
           xmlHttp.send(null);
}
</script>
</head>
</body>

    <form name=”myForm”>
                <input type=”button” onclick=”ajaxFunction();” value=”Click Me” />
                Time: <input type=”text” name=”time” />
    </form>
</body>
</html>

<?php

    //time.php
    // Save in same Directory
     echo date(‘H a’);

?>

Well, I tried to make this example easy to all. Hopefully everybody will enjoy it.

Advertisements

5 Responses to “Basically what is AJAX?”

  1. Jewel December 6, 2007 at 6:49 pm #

    good post rubel bhai. it’s a really helpfull for those who are trying to learn AJAX in a simple way. your analysis is also good. 🙂

  2. Rubel December 6, 2007 at 8:12 pm #

    Actually i propose everybody to use the basic AJAX when they are starting. Infect this is very simple, So better not to use any lib first time.

    Thnx Jewel for visiting me. 🙂

  3. junal December 6, 2007 at 9:20 pm #

    Hey man! I like the simplicity of this post ! really easy to read and understandable for all readers(i guess). i like your comment “AJAX is nothing but browsing a specific URL from a JavaScript document keeping the existing page loaded as it is.” this comment gives a simple way to know how AJAX works.

    i also support what u said at last comment that first a dev should know the basic. then of course Framework. Framework such as Prototype.js makes AJAX using more fun and easier.

    Keep blogging, keep rocking …:)

  4. Rubel December 6, 2007 at 9:41 pm #

    Thanks Junal for your understanding.

    See what actually AJAX do. Just collect data from a specific URL. If anybody don’t mind I can consider it like FOpen() function. After opening a file or URL contain stored in a variable. Then you can use the data as per your need.

    🙂

  5. Milan December 10, 2007 at 4:43 am #

    Simple but fruitfull post for the newbie.
    I liked personally as a cool posting.Thanks rubel vai for such a post for making ajax easy to me.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: