AJAX stands for Asynchronous JavaScript and XML. AJAX is a technique for creating fast and dynamic web pages, it is used to updating parts of a web page, without reloading the whole page.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page whereas classic web pages which do not use AJAX, must reload the entire page if the content should change.
Let’s have an example, how to use AJAX with PHP.
Example:
In this example I will show you, how a web page can communicate with a web server while a user type characters in a text field:
When you type a character into text field then the suggestion value will be display in front of ‘Suggestion value’ para.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Using Ajax with PHP</title>
<script type="text/javascript">
function showHint(str) {
if (str.length==0) {
document.getElementById("sugName").innerHTML= "";
return;
}
if (window.XMLHttpRequest) {
xmlHttp=newXMLHttpRequest();
}
xmlHttp.onreadystatechange=function () {
if (xmlHttp.readyState==2) {
document.getElementById("sugName").innerHTML= xmlHttp.responseText;
}
}
xmlHttp.open("GET", "GetNameHint.php?txtVal="+str, true);
xmlHttp.send();
}
</script>
</head>
<body>
<table>
<tr><td><p><b>Enter Employee Name : </b></p></td>
<td><input type ="text" id="txtName" onkeyup="javascript: showHint(this.value);"size ="40"></input></td>
</tr>
<tr>
<td> <b>Suggestion Value: </b></td>
<td> <p> <span id ="sugName"></span></p></td>
</tr>
</table>
</body>
</html>
When you type a character into text field, ‘GetNameHint.php’ script is invoked to communicate with server.
<?php
// Insert names in array 'a'
$name[]="Anna";
$name[] ="Arun";
$name[]="Brittany";
$name[]="Cinderella";
$name[]="Diana";
$name[]="Eva";
$name[]="Fiona";
$name[]="Gunda";
$name[]="Hege";
$name[]="Inga";
$name[]="Johanna";
$name[] ="Jay";
$name[]="Kitty";
$name[]="Linda";
$name[]="Nina";
$name[]="Ophelia";
$name[]="Petunia";
$name[]="Amanda";
$name[]="Raquel";
$name[]="Cindy";
$name[]="Tove";
$name[]="Unni";
$name[]="Violet";
$name[]="Liza";
$name[]="Elizabeth";
$name[]="Ellen";
$name[]="Wenche";
$name[]="Vicky";
// getting textbox value from url
$urlVal = $_GET["txtVal"];
if (strlen($urlVal) > 0)
{
// assign default value of hint
$hint="";
for($i=0; $i<count($name); $i++)
{
// search hint in above array '$name'
if (strtolower($urlVal)==strtolower(substr($name[$i],0,strlen($urlVal))))
{
if ($hint=="")
{
// set hint value at first time hint available
$hint=$name[$i];
}
else
{
// concatenate hint with previous one
$hint=$hint." , ".$name[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
// message display when no hint is available
$response="No suggestion available";
}
else
{
// set response value if hint is already having some value
$response=$hint;
}
//send output response to client browser
echo $response;
?>
Output:
Highlighted value shows the suggestion value for typed character into text field.
Leave Comment