Thursday, 5 September 2013

Example will demonstrate how a web page can communicate with a web server using Ajax

The following example will demonstrate how a web page can communicate with a web server while a user type characters in an input field:
When a user types a character in the input field above, the function "showHint()" is executed. The function is triggered by the "onkeyup" event:
function showHint(str)
if (str.length==0)
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

  if (xmlhttp.readyState==4 && xmlhttp.status==200)
<b>Start typing a name in the input field below:</b>
First name: <input onkeyup="showHint(this.value)" type="text" />
Suggestions: <span id="txtHint"></span>
The page on the server called by the JavaScript above is a PHP file called "gethint.php" The source code in "gethint.php" checks an array of names, and returns the corresponding name(s) to the browser:
// Fill up array with names
//get the q parameter from URL
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
  for($i=0; $i<count($a); $i++)
    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
      if ($hint=="")
        $hint=$hint." , ".$a[$i];
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
  $response="no suggestion";
//output the response
echo $response;