Thursday, 8 March 2012


This example demonstrates HTTP FORM POST complete HTML form to the server and displaying the response using AJAX.

<title>PHP using AJAX</title>
<script type="text/javascript">
var time_variable;
function getXMLObject()  //XML OBJECT
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   return xmlHttp;  // Mandatory Statement returning the ajax object created
var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object
function ajaxFunction() {
  var getdate = new Date();  //Used to prevent caching during ajax call
  if(xmlhttp) {
   var txtname = document.getElementById("txtname");"POST","testing.php",true); //calling testing.php using POST method
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send("txtname=" + txtname.value); //Posting txtname to PHP File
function handleServerResponse() {
   if (xmlhttp.readyState == 4) {
     if(xmlhttp.status == 200) {
       document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element 
     else {
        alert("Error during AJAX call. Please try again");
<form name="myForm">
  <td>Enter Name</td>
  <td><input type="text" name="txtname" id="txtname" /></td>
  <td colspan="2"><input type="button" value="Submit" onclick="ajaxFunction();" /></td>
<div id="message" name="message"></div>
PHP Code

< ?
$a = $_POST['txtname'];
echo "Good Morning".$a;

Explanation for the AJAX Code

Here i have declared 3 JavaScript function:

getXMLObject() – Responsible for creating the AJAX Object depending on the browser

ajaxFunction() – Responsible for calling PHP page through AJAX call
handleServerResponse() – Responsible for displaying the data retrieved from the server

How the AJAX Code Works:
  • When the page loads i am creating an AJAX Object by calling the getXMLObject() function and returning the object created in the xmlhttp variable
  • When the user clicks on the input Button, ajaxFunction() gets called which checks for whether the Ajax Object is created or not and depending on that calls the remote script. Here a function handler handleServerResponse is also defined for retrieving the value from the server
  • When the readystate of the AJAX call reaches 4 and the http status is 200 we pass the data fetched from the server to the textbox

Explanation for the PHP Code

  • I am calling $_POST for fetching the post content send through Ajax Call
  • Finally i am calling echo to send the response back to the calling page