AJAX - HTTP FORM POST in PHP using AJAX

Home > AJAX, PHP > HTTP FORM POST in PHP using AJAX

HTTP FORM POST in PHP using AJAX

February 28th, 2008 Hitesh Agrawal Leave a comment Go to comments

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

HTML Page

<html>
<head>
<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");
    xmlhttp.open("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");
     }
   }
}
</script>
<body>
<form name="myForm">
<table>
 <tr>
  <td>Enter Name</td>
  <td><input type="text" name="txtname" id="txtname" /></td>
 </tr>
 <tr>
  <td colspan="2"><input type="button" value="Submit" onclick="ajaxFunction();" /></td>
 </tr> 
</table>
<div id="message" name="message"></div> 
</form>
</body>
</head>
</html>

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