• Home
• About

Basics of AJAX - Part 1

This tutorial will guide you on the basic of AJAX programming and how to write code for running AJAX based application.

There is a 5 step approach for the browser to work with AJAX.

• Initialize the XMLHttpRequest Object
• Opening the connection to the remote server side script
• Define the function handler
• Send the request back to the server
• Receive the data from the server through the handler





Step1 - Initialize the XMLHttpRequest Object:
Every browser has a different way to initialize the XMLHttpObject. For example Microsft Browsers treat them as a ActiveX Object where as other browsers like Firefox, Mozilla, Opera, Netscape etc treat them as a XMLHttp Object.

Defining XMLHttpRequest Object in Internet Explorer:

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

Depending on the browser version it will take appropriate ActiveX Object. Here we are creating a new ActiveXObject and assigning it to xmlHttp variable.
More details on XMLHttp Object is covered on Basics of AJAX - Part 2

Defining XMLHttpRequest Object in Mozilla, Firefox, Opera Browsers:

xmlHttp = new XMLHttpRequest();

Here we are creating a new Object instance of the XMLHttpRequest and assigning it to xmlHttp variable.

Step2 - Opening the connection to the remote server side script
After successfully creating the AJAX object you now try to call the remote script.

Methods inside XMLHttp Object for Connection:
.open(methodname,remote filename,mode of operation)
Responsible for opening the connection to the remote server.
method - It can be GET or POST depending on the amount of data you want to send to the server.
remote filename - Server path of the remote file name.
mode of operation - Accepts a boolean value indication Async/Sync mode of operation. True indicates Asynchrounous Mode whereas False indicated Synchronous Mode.

More details on XMLHttp methods is covered on Basics of AJAX - Part 2

Example - .open():

     xmlHttp.open("GET","demo.php",true);

Here i am calling demo.php using GET method with asynchronous operation.

Step3 - Define the function handler on change of every state
During AJAX operation while connecting to the remote script, the server returns various states value which indicates the current state of operation. So we have to define a function that will take care of the states and after the response is complete fetch all the data and display it.
Example:

     xmlhttp.onreadystatechange = handleServerResponse;

Here i am defining handleServerResponse as the callback function for every change in state.
There are 4 different states that the web server will return in AJAX call.

Step4 - Send off a request to the server:
This step will tell the Ajax Object to send the request back to the Web Server.

    xmlhttp.send(null);         //GET METHOD
    xmlhttp.send(param);     //POST METHOD

In GET Method you pass all the data along with the url in .open() method.
In POST Method you pass all the data along with the variable inside send method.

Step5 - Receive the data from the server through the function handler
You will get all your data back from the server from the function handler function. You will need to check for ready state before capturing the data.

function handleServerResponse()
{
	if(xmlhttp.readystate == 4)
	{
		if(xmlhttp.status == 200)
		{
			//Perform your operation
		}
	}
	else
	{
		//Loading state or show error message
	}
}

The above code tells the JavaScript Engine to process further only when the readystate == 4. Also inside we check for status which gives me the HTTP Status. If both the condition matches then proceed further and perform your operation. If the ready state does not matches then you can display Loading State until it reaches 4.

Now get set to go deep into XmlHttp Object in Basics of AJAX - Part 2

Similar Posts

• HTTP Form POST Request using AJAX and Servlet
• Ajax Programming with JSP and Servlets
• FORM POST in PHP using AJAX
• FAQ on AJAX Technology
• Basic AJAX Demo
• Basics of AJAX - Part 2
• How AJAX Works
• What is AJAX
• Common AJAX Programming Mistakes

Custom Search

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.