AJAX Fundamentals

Ajax is a technology that allows us to dynamically send and receive data from the server without having to reload the page or browser. Ajax works very well with XML and JSON, infact ‘X’ in AJAX stands for XML.

• What is AJAX?
• AJAX stands for Asynchronous Javascript and XML.
• In web development Asynchronous means getting information without having to reload the page.
• AJAX is not a programming language but a way to use existing standards.
• AJAX was made popular in 2005. It was first used in Google Suggest where when you try to search anything in the Google search engine, various suggestions are given in a drop down list for that particular word or phrase. AJAX is also used in Google maps.
• It can interact with servers and files without needing to refresh the browser.

It works well with XML and JSON. Ajax was initially made to work with

• XML, but as JSON became popular due to its easy, fast and lightweight property, it is used with it also.
• How AJAX Works?


fig 1

• Here, when an event occurs in a browser, an XMLHttpRequest object is created and sent to the server through internet.
• The server, on receiving the request, processes it, creates a response and sends it back to the browser.
• The browser then receives the response, processes the data using javascript and updates the page content.
• In this only the part of the page data to be modified is sent to the server, not the whole page, hence the changes are reflected without page refresh.
• AJAX Internet Standards
• AJAX is based on current internet standards. It uses a combination of the following technologies:
• XMLHttpRequest object: Lets us interact with server data asynchronously (without page refresh).
• Javascript/DOM: Lets us interact with the information.
• CSS: Lets us to style the returned data.
• XML/JSON: XML or JSON is often used as the format for transferring data. We can use plain text as well.

Let us learn more about XMLHttpRequest object.

• XMLHttpRequest Object:
• The XMLHttpRequest is a javascript object used to send and receive information to and from the browser asynchronously.
• The XMLHttpRequest object is instantiated differently in older versions of IE.
• The instantiation of XMLHttpRequest object for different browsers is shown below:

if(window.XMLHttpRequest)
{
	//code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
}
else
{
	//code for IE6, IE5
	xmlhttp=new ActiveXObject(“Microsoft XMLHTTP”);
}

• In the above code, the XMLHttpRequest object for all the higher versions of IE greater than version 6 and for all other browsers is defined as xmlhttp=new XMLHttpRequest();
• In the same way for the lower versions of IE equal to 6 and less than that, the XMLHttpRequest object is defined as xmlhttp=new ActiveXObject(“Microsoft XMLHTTP”);
• We have to include this code in AJAXScript.
• Onreadystatechange Event
• onreadystatechange is an event which occurs whenever the server readyState changes and holds the status of the XMLHttpRequest object.
• The important properties of the XMLHttpRequest object are readyState and status.
• The readyState property has five stages in its process numbered 0 to 4 as shown below:
• 0 : request not initialized
• 1 : server connection established
• 2 : request received
• 3 : processing request
• 4 : request finished and response is ready.
• As the stages from 0 to 3 are in process, a rotating image appears indicating that work is in progress.
• Status property have two values:
• 200 : “OK”
• 404 : Page not found
• We should make sure that we check for value 4 in readyState and value 200 in Status property, so that our request is processed successfully.
• Checking the Status and readyState
• Syntax for checking the status and readyState is given below:

xmlhttp.onreadystatechange=function()
{
	if(xmlhttp.readyState==4 && xmlhttp.status==200)
	{
		//do something
}
}

• In the above code, the request in xmlhttp is checked during the onreadystatechange event in the function.
  The readystate and status of the request is matched to 4 and 200 respectively in the statement if(xmlhttp.readyState==4 && xmlhttp.status==200).
• If the condition returns true then the statements in if block will be executed.
• Whole Syntax:
• The whole code of a page with the XMLHttpRequest object is shown below:

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
	var xmlhttp;
if(window.XMLHttpRequest)
{
	//code for IE7+, Firefox, Chrome, Opera, Safari
	xmlhttp=new XMLHttpRequest();
}
else
{
	//code for IE6, IE5
	xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadychange=function()
{
	if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
	Document.getElementById(“myDiv”).innerHTML= xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();
} 
</script>
</head>
<body>
<div id=”myDiv”><h2>Let AJAX change this text</h2></div>
<button type=”button” onclick=”loadXMLDoc()”>Change Content</button>
</body>
</html>

• Here we have a code for a webpage requesting to change the content in the div block.
• In the body section of the above code, a text Let AJAX change this text is defined in the h2 heading tag in the div block having id myDiv.
• Next a button with caption Change Contentis added which calls the function loadXMLDoc()when clicked.
• In the loadXMLDoc() function we have declared a variable xmlhttp.
• Then we have created the XMLHttpRequest object according to the supporting versions of the browsers.
• When the request is processed, the readyState and the status properties are checked to make sure that the request is processed successfully.
• And if the readyState and status properties satisfy the condition, the content of the div block having id myDiv is changed using innerHTML statement.
• The response is send through xmlhttp.open(“GET”,”ajax_info.txt”,true); statement. The response is send through GET method and the text to be changed is written in the ajax_info.txt file.
• Then the response is send through the statement xmlhttp.send().

Thus we studied the basics of AJAX Fundamentals and will try it in next session.