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
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
