Ajax php example
AJAX is a complex technology that means different things to different people. Computer users
appreciate that their favorite websites are now friendlier and feel more responsive. Web
developers learn new skills that empower them to create sleek web applications with little effort.
Indeed, everything sounds good about AJAX! Here is an example of how to use ajax to create your first application.
First create a file called index.html, and add the following
code to it:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>AJAX with PHP: Quickstart</title>
<script type=”text/javascript” src=”quickstart.js”></script>
</head>
<body onload=’process()’>
Server wants to know your name:
<input type=”text” id=”myName” />
<div id=”divMessage” />
</body>
</html>
Create a new file called quickstart.js, and add the following code:
// stores the reference to the XMLHttpRequest object
var xmlHttp = createXmlHttpRequestObject();
// retrieves the XMLHttpRequest object
function createXmlHttpRequestObject()
{
// will store the reference to the XMLHttpRequest object
var xmlHttp;
// if running Internet Explorer
if(window.ActiveXObject)
{
try
{
xmlHttp = new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch (e)
{
xmlHttp = false;
}
}
// if running Mozilla or other browsers
else
{
try
{
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
xmlHttp = false;
}
}
// return the created object or display an error message
if (!xmlHttp)
alert(”Error creating the XMLHttpRequest object.”);
else
return xmlHttp;
}
// make asynchronous HTTP request using the XMLHttpRequest object
function process()
{
// proceed only if the xmlHttp object isn’t busy
if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0)
{
// retrieve the name typed by the user on the form
name = encodeURIComponent(document.getElementById(”myName”).value);
// execute the quickstart.php page from the server
xmlHttp.open(”GET”, “check.php?name=” + name, true);
// define the method to handle server responses
xmlHttp.onreadystatechange = handleServerResponse;
// make the server request
xmlHttp.send(null);
}
else
// if the connection is busy, try again after one second
setTimeout(’process()’, 1000);
}
// executed automatically when a message is received from the server
function handleServerResponse()
{
// move forward only if the transaction has completed
if (xmlHttp.readyState == 4)
{
// status of 200 indicates the transaction completed successfully
if (xmlHttp.status == 200)
{
// extract the XML retrieved from the server
xmlResponse = xmlHttp.responseXML;
// obtain the document element (the root element) of the XML structure
xmlDocumentElement = xmlResponse.documentElement;
// get the text message, which is in the first child of
// the the document element
helloMessage = xmlDocumentElement.firstChild.data;
// update the client display using the data received from the server
document.getElementById(”divMessage”).innerHTML =
‘<i>’ + helloMessage + ‘</i>’;
// restart sequence
setTimeout(’process()’, 1000);
}
// a HTTP status different than 200 signals an error
else
{
alert(”There was a problem accessing the server: ” +
xmlHttp.statusText);
}
}
}
Create a file called check.php and add the following code to it:
<?php
//
Generates XML output
header(’Content-Type: text/xml’);
// generate XML header
echo ‘<?xml version=”1.0″ encoding=”UTF-8″ standalone=”yes”?>’;
// create the <response> element
echo ‘<response>’;
// retrieve the user name
$name = $_GET['name'];
// generate output depending on the user name received from client
$userNames = array(’CRISTIAN’, ‘BOGDAN’, ‘FILIP’, ‘MIHAI’, ‘YODA’);
if (in_array(strtoupper($name), $userNames))
echo ‘Hello, master ‘ . htmlentities($name) . ‘!’;
else if (trim($name) == ”)
echo ‘Stranger, please tell me your name!’;
else
echo htmlentities($name) . ‘, I don\’t know you!’;
// close the <response> element
echo ‘</response>’;
?>
