AJAX Tutorial

AJAX seems to be the big thing about web programming now adays.

The purpose of this tutorial is to quickly remind myself what AJAX is incase I forget.

AJAX stands for Asynchronous JavaScript and XML

AJAX seems to be the big thing about web programming now adays.

The purpose of this tutorial is to quickly remind myself what AJAX is incase I forget.

AJAX stands for Asynchronous JavaScript and XML

As the term suggests, we make calls asynchronously (with the rest of the page) to retrieve new information to display on the same page we are on.

This will enhance the user experience for web browsing, as we all like to do things in one place.

For example, clicking a button on the top right hand corner to open a table in the middle displaying the stuff we want to see. Then dragging those stuff in the table to a garbage bin on the bottom of the page to throw those away.

In other words, we want to make our web page comes to life. Making web browsing like a desktop experience. (I will try to add some pictures to this tutorial in the future to enhance the reader experience)

Now that we know what we want, how can we achieve it? By using a combination of javascript and protocol THAT returns XMLs in the response.

Now that I think about it, I think AJAX should really be AJAHAX lol, (Asynchronous Javascript And Http And XML) hey, after all, what good is AJAX without going to the server to get new information? And what is the most common protocols on the web? http.

Anyway.... before I get carried away, let me explain the basics of an AJAX call.

Lets use the button click example that displays a table in the middle of the page.

Step 1: Inorder for anything to refresh itself, we need identifiers. In HTML term, programers usually use <div> tags to do the job. usually a div tag with unique id. so let say <div id="tableLocation"></div>

we now have the code:

---------------------------------
<html>
<body>

<div id="tableLocation"></div>

</body>
</html>
---------------------------------

Step 2: We usually put an event listener (a javascript that fires on click) for that button. We will add a button and a javascript call for it)

------------------------------------
<html>
<body>

<div id="buttonLocation">
       <button onClick="displayTable()">display table</button>
    </div>

<div id="tableLocation"></div>

</body>
</html>
---------------------------------

Step 2: Now, we need that javascript function displayTable() to actually disaply the table right? There are 2 ways we can do that, we can have everything hardcoded in the function like:

--------------------------------
function displayTable(){
document.getElementById("tableLocation").innerHTML = "<table> super table </table>";
}
--------------------------------

    Simple enough? That is completes our AJAX call!
    You know, we DID asynchronously used javascript to return an XML didnt we?
    But what good does that do? basically nothing.
    Then why is AJAX so popular? Well, lets now enhance our example abit.

    Step 3: Lets instead make a call to a server and let the server return us the table information.

--------------------------------
function displayTable() {
      var xmlHttp = AjaxSetup(); //check AJAX Foundation Code Base to see how the xmlHttp Object is setup.
      xmlHttp.onreadystatechange=function(){ //This is the function gets called when the protocol is done.
        if(xmlHttp.readyState==4){
           document.getElementById("tableLocation").innerHTML=xmlHttp.responseText;
        }
      }
      xmlHttp.open("GET","http://www.request-table-url.com",true); // the open method on the xmlHttp object actually makes a request to the url.
      xmlHttp.send(null); //extra information to be sent through the request.
}
---------------------------------

    There now our function will make a request to the server asking for the table.
the line:

---------------------------------
    document.getElementById("tableLocation").innerHTML=xmlHttp.responseText;
---------------------------------

will put whatever response from the xmlHttp object in the tableLocation. (In this case, an XML that draws a table)

There done!
Here is the full code:

---------------------------------
<html>
<body>

<div id="buttonLocation">
<button onClick="displayTable()">display table</button>
</div>

<div id="tableLocation"></div>

<script type="text/javascript">
function displayTable() {
      var xmlHttp = AjaxSetup(); //check AJAX Foundation Code Base to see how the xmlHttp Object is setup.
      xmlHttp.onreadystatechange=function(){ //This is the function gets called when the protocol is done.
        if(xmlHttp.readyState==4){
           document.getElementById("tableLocation").innerHTML=xmlHttp.responseText;
        }
      }
      xmlHttp.open("GET","http://www.request-table-url.com",true); // the open method on the xmlHttp object actually makes a request to the url.
      xmlHttp.send(null); //extra information to be sent through the request.
}
</script>
</body>
</html>
---------------------------------

This completes the most basic ajax call to refresh a section of the page without refreshing the whole page.

As we can see, with this invention, the possibility to web programming becomes endless.

Now for a drag and drop items and deleting like we do on the desktop, we simply use javascript APIs like scriptaculous to enable the dragging and dropping of items on the page.
Then add an ajaxCall function for the onDrop event to update the item in our database in the server side.

Check out the AJAX Foundation Code Base for further details on the ajaxCall() function

For the XMLHttp object api please visit: www.w3.org/TR/XMLHttpRequest/

W3Schools.com also gives wonderful tutorials for all kinds of web technologies including AJAX.

Gary Han - A Nerd Who Tries To Be Cool And Failed Thus Far