PHP - AJAX with PHP
AJAX is used to create more interactive applications.
AJAX PHP Example
The following example will demonstrate how a web page can communicate with a web server while a user types characters in an input field:
Example
Try typing a name in the input field below, such as: Anna:
Return value:
Example Explanation - HTML Page
When a user types a character in the input field above, the "showHint()" function is executed. This function is triggered by the "onkeyup" event:
<html>
<head>
<script>
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// Code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// Code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<p><b>Type a name in the input field:</b></p>
<form>
Name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Return value: <span id="txtHint"></span></p>
</body>
</html>
Source Code Explanation:
If the input field is empty (str.length==0), the function clears the content of the txtHint placeholder and exits the function.
If the input field is not empty, the showHint() function performs the following steps:
- Creates an XMLHttpRequest object
- Creates a function that is executed when the server response is ready
- Sends a request to a file on the server
- Notes that the parameter (q) is added to the URL (holds the content of the input field)
PHP File
The server page called by the JavaScript above is a PHP file named "gethint.php".
The source code in "gethint.php" checks an array of names and returns the corresponding name to the browser:
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";
// Get the q parameter from URL
$q=$_GET["q"];
// Look up all hints from array if $q is different from ""
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Output "no suggestion" if no hint was found or output correct values
echo $hint === "" ? "no suggestion" : $hint;
?>
$hint = $a[$i];
}
else
{
$hint = $hint . " , " . $a[$i];
}
}
}
}
// If no matching values are found, set the output to "no suggestion"
if ($hint == "")
{
$response = "no suggestion";
}
else
{
$response = $hint;
}
// Output the return value
echo $response;
?>
Explanation: If JavaScript sends any text (i.e., strlen($q) > 0), the following occurs:
Search for names that match the characters sent by JavaScript
If no matches are found, set the response string to "no suggestion"
If one or more matching names are found, set the response string with all the names
Send the response to the "txtHint" placeholder
PHP Ajax Cross-Domain Issue Solution
If your asynchronous request needs to cross domains, you can refer to: PHP Ajax Cross-Domain Issue Solution. ```