Ajax + PHP sample code

Function to create ajax object

AJAX stands for Asynchronous JavaScript and XML.

Ajax is a technology used to refresh a page content(or page area ) with out refreshing the whole page.AJAX is based on JavaScript and HTTP requests.We can use multiple ajax requestes on same page.

In the following example we are going to print some values from the server.

This function creates an ajax object. In these architecture we can use the same object for different ajax call. So multiple ajax object creation is not needed.It creates an XMLhttp object and return that object

Ajax object creation

function GetXmlHttpObject()
{
objXMLHttp = false;
try
{
objXMLHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
objXMLHttp = false;
}
}
if (!objXMLHttp && typeof XMLHttpRequest != 'undefined')
objXMLHttp = new XMLHttpRequest();
return objXMLHttp;
}

With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can receive data from the 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.

All new browsers except IE5 and IE6 use the built-in JavaScript XMLHttpRequest object to create an XMLHttpRequest object (IE5 and IE6 uses an ActiveXObject).

Function to call ajax

This function calls the server page.First this function creates an ajax object by calling our function GetXmlHttpObject().

Call Ajax object

function callAjax()
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
// Create a function that will receive data sent from the server
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4){
document.getElementById('resultdiv').innerHTML= xmlHttp.responseText;
}
}
xmlHttp.open("GET", "ajaxsample.php", true);
xmlHttp.send(null);

}

After a request to a server, we need a function to receive the data returned from the server.

The onreadystatechange property stores the function that will process the response from a server. The function is stored in the property to be called automatically.This function checks the ajax states.

Ajax States.

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

So after the 4 th state is completed, the javascript receives the result from the server.

Html file

Place the above javascript functions to the same html file

Web page

<script>
// place the above two functions here......
</script>

<form action="frmCheck" method="get">
<table width="445" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="74">&nbsp;</td>
<td width="365"><div id="resultdiv"></div></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="button" name="btnCheck" id="button" value="Check" onClick="callAjax();"></td>
</tr>
</table>
</form>

This html file contains the form values. While clicking the button it will call the "callAjax" function .

Server page (PHP page)

The ajax request the following page and it returns the value. We can use our own code here.

Server Page - ajaxsample.php

<?php
echo "ajax sample..";
?>

After running this page shows the text 'ajax sample..' on browser.