What is Ajax

AJAX = Asynchronous JavaScript and XML

AJAX is not a new programming language, but a new technique for creating better, faster, and more interactive web applications.
With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can trade data with a web server, without reloading the page.
AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.
The AJAX technique makes Internet applications smaller, faster and more user-friendly.

AJAX is based on the following web standards:

• JavaScript
• XML
• HTML
• CSS

  AJAX applications are browser- and platform-independent.

AJAX uses the XMLHttpRequest object

With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object.
By using the XMLHttpRequest object, a web developer can update a page with data from the server after the page has loaded!
AJAX was made popular in 2005 by Google (with Google Suggest).

All new browsers support a new built-in JavaScript XMLHttpRequest object  (IE5 and IE6 uses an ActiveXObject).

function loadXMLDoc(url)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
//Open the request object
xmlhttp.send(null);
//Send your request to your server
document.getElementById('test').innerHTML=xmlhttp.responseText;
//Update your page with the response from the server
}

The XMLHttpRequest object has 2 important methods:

• The open() method
• The send() method

The open() method takes three arguments. The first argument defines which method to use (GET or POST). The second argument specifies the name of the server resource (URL). The third argument specifies if the request should be handled asynchronously.
The send() method sends the request off to the server. If we assume that requested a file called "getlist.php", the code would be: 


url="getlist.php"
xmlhttp.open("GET",url,true);
xmlhttp.send(null);


The XMLHttpRequest object has 3 important properties:

• The responseText property
• The readyState property
• The onreadystatechange property

The XMLHttpRequest object stores any data retrieved from a server as a result of a server request in its responseText property.

State	Description
0	The request is not initialized
1	The request has been set up
2	The request has been sent
3	The request is in process
4	The request is complete

xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
  {document.getElementById('list').innerHTML=xmlhttp.responseText}
}
xmlhttp.open("GET",url,true);
xmlhttp.send(null);

The core idea behind AJAX is to make the communication with the server asynchronous, so that data is transferred and processed in the background. As a result the user can continue working on the other parts of the page without interruption. In an AJAX-enabled application only the relevant page elements are updated and only when necessary.

In contrast, the traditional synchronous (postback-based) communication requires a full page reload each time data is transferred to/from the server. This leads to the following negative effects:

• Poor Interactivity - the user interaction with the application is interrupted by a postback every time a server call is needed.
• Ineffectiveness - the full page is rendered and transferred to the client on each postback.  This process is time consuming and traffic intensive. 
• Low Usability - the requirement for full page postback whenever the user interface is changed imposes hefty limitations on the degree of sophistication a web user interface can achieve. Before AJAX, rich and smooth interfaces with on-demand updates could only be implemented using Flash technology.

The disadvantages of AJAX are:

• Search engines would not be able to index an AJAX application.
• The server information can not be accessed within AJAX.
• AJAX is not well integrated with any browser.
• ActiveX requests are enabled only in IE 5 and IE6
• Data of all requests is URL-encoded which increases the size of the request