Introduction to AJAX

AJAX stands for Asynchronous JavaScript And XML and is a technique used by web developers to make their web sites fast and dynamic. The advantage of using AJAX is that you can update a part of your webpage without reloading the whole page. That is you can send and receive data to and from a server without refreshing  the page. This enables you to minimize data transfer and hence improve performance. Now in this post, lets see how to start using AJAX on your web application.
There are three main steps involved in creating an AJAX function.

• Create an XMLHttpRequest.
• Make the request to the required URL.
• Receive and handle the received data.

So, now lets see how to create an AJAX call with a simple example. Suppose you want to list the details of a person when the name of the person is selected. For this, we have to create an HTML page which contains the JavaScript code and  HTML contents and a PHP page which generates the user information from a database.

So first, lets see the HTML page. It should contain a way to select a person. For this, lets use a drop down menu.

<select name="persons" onChange="fetchdetails(this.value)">
<option value="">Select One</option>
    <option value="John">John</option>
    <option value="Mike">Mike</option>
    <option value="Peter">Peter</option>
</select>
<div id="details"> </div>

The above code will create three items in a drop down list named persons. Note the onChange event given in the <select> tag. Whenever the user changes the value in the drop down list, the function fetchdetails is called with the current selected value as the argument. A div with id details is also created so that the received data from AJAX can be displayed in it.
Now lets see how to write the fetchdetails function.

function fetchdetails(str)
{
var xmlhttp;
if (str=="")
  {
  document.getElementById("details").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("details").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getinfo.php?name="+str,true);
xmlhttp.send();
}

The above function receives the value selected in the drop down list. If the received value is blank, it will make the div with id details blank. If it is not blank, an XMLHttpRequest object is created. The onreadystatechange function will be executed when the AJAX response is ready. It puts the received data in the div element that we created earlier. The open function creates the actual request. It sends the request to a php page getinfo.php with a parameter name. So if the user selects Peter, the requested URL will be:

getinfo.php?name=Peter

Now the last part is to create the getinfo.php page. It should receive the name and then find the details and print it.

<?php
$name = $_GET['name'];
//code to fetch data from database
echo $data;
?>

The structure of the required php file is given above. The data that is produced by the php page will be received by AJAX and displayed on the webpage.