AJAX is used to create more interactive applications.
The following example demonstrates how the web page communicates with the web server when the user types characters in the input box:
When the user types characters in the input box 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 executed by IE7+, Firefox, Chrome, Opera, Safari browsers xmlhttp=new XMLHttpRequest(); } else { //IE6, IE5 Code executed by the browser 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>In the input box Enter a name:</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 box is empty (str.length==0), this function will clear the content of the txtHint placeholder and exit the function.
If the input box is not empty, showHint() will perform the following steps:
Create XMLHttpRequest object
Create a function that executes when the server response is ready
Send a request to a file on the server
Please note the parameter (q) added to the end of the URL (containing the contents of the input box)
The server page called above through JavaScript is a PHP file named "gethint.php".
The source code in "gethint.php" checks the names array and returns the corresponding names to the browser:
<?php// Fill the 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 q from the request URL address Parameter $q=$_GET["q"];//Check whether there is a matching value, if q>0if (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]; } } }}// If there is no matching value, set the output to "no suggestion" if ($ hint == ""){ $response="no suggestion";}else{ $response=$hint;}//Output return value echo $response;?>Explanation: If JavaScript sends any text (i.e. strlen($q) > 0), this happens:
Find names matching characters sent by JavaScript
If no match is found, set the response string to "no suggestion"
If one or more matching names are found, set the response string with all names
Send the response to the "txtHint" placeholder
If your asynchronous request needs to cross domain, you can check out: PHP Ajax cross-domain problem solution.