Introduction to AJAX

Today, we'll be touching on AJAX and covering what it is. Well, the first thing I want to tell you, is that

"AJAX is not a new programming language, but a new way of using existing programming languages."

 I'm quoting this, because you might have seen it on other websites or books too. So, let's get started.

AJAX

Theory

First, let's understand what AJAX is. Well, imagine this. You're the lead programmer at facebook, and you just built the comments feature. Each time someone commented on a post, you had to refresh the page to show the comment. Why is this bad? Let's say the person commented on a post that they saw somewhere, such that they had to scroll for a lot of time to get there. If you refreshed the whole page, they had to sit and scroll the page all the way down. Even worse, the other people reading that page wouldn't see the comment unless they refreshed the page for some reason. 

So, what can be done? This is where AJAX comes in. With AJAX, you can simple send a request to your server via JavaScript and get a response and use the DOM functionality to update your page without refreshing it. In a nutshell, you can use AJAX to updates parts of a web page without completely refreshing it.

Practical usage

We use the XMLHttpRequest object for AJAX. To start, we'll first create an XMLHttpRequest Object.

var ajax = new XMLHttpRequest();

PS. This wont work for IE6 and below. For such browsers you should use the following code.

var ajax = new ActiveXObject("Microsoft.XMLHTTP");

Okay, now that we've set up our variable for AJAX, let's learn to send a request to the server. Before we sent the request, we open a connection using the open function that takes in 3 arguments: method type, URL, asynchronous. Method type tells the server what type of a HTTP Request this is (GET / POST). URL tells the server which URL we're fetching.

After opening a connection to the server, we can send our request using the send function. The whole procedure looks as follows:

ajax.open("GET","http://www.stronia.com/some_ajax_page.php",true);
ajax.send();

Now, let's catch a response. To do so, we'll build a function that'll be called when there's a response. AJAX has a property called readyState that tells us if the response is ready or not. The value of readyState ranges from 0-4 where 0 means not yet ready and 4 means ready. AJAX also has a property called status that tells us if the request was successful. Status 200 means that the request was successful.

So, in our response function we have to test if the readyState is 4 and the status is 200. After we build the function, we have to tell JavaScript to call it once the response is received. To do so, we use the onreadystatechange property of AJAX.

One last property to know about is called responseText which is basically the server's response to our request. Here's how we receive the response:

ajax.onreadystatechange = function(){
    if (ajax.readyState == 4 && ajax.status == 200){
        document.getElementById('id').innerHTML=ajax.responseText;
    }
}

Here's the whole code:

var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(){
    if (ajax.readyState == 4 && ajax.status == 200){
        alert(ajax.responseText);
    }
}
ajax.open("GET","http://www.stronia.com/some_ajax_page.php",true);
ajax.send();

NOTE: Make sure that you set the onreadystatechange function before sending the request or your response might not get caught.

Using jQuery for AJAX

jQuery's slogan is "write less, do more." As you saw, for a simple AJAX application we had to write 8 lines of code. jQuery further reduces the burden from 8 lines of code to a single line of code.

In jQuery, you use a function called load on an element to load it with response from a server. Like this:

$("#div1").load("http://www.stronia.com/some_ajax_page.php");

The above code loads the response from the mentioned URL into an element with the id of  "div1".