AJAX is used to create more dynamic applications.

AJAX ASP/PHP Example

The following example will show you how the web page communicates with the web server when the user types characters in the input box: Please type letters (A - Z) in the input box below: 

<html><!DOCTYPE html>
<html>
<head>
<script>
function showHint(str)
{
var xmlhttp;
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","/try/ajax/gethint.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h3>Start typing a name in the input field below:</h3>
<form action=""> 
First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p> 
</body>
</html>

Example analysis - showHint() function

When the user types in the input box above character, the function "showHint()" will be executed. This function is triggered by the "onkeyup" event: 

function showHint(str)
{
var xmlhttp;
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.html?q="+str,true);
xmlhttp.send();
}

Source code analysis:

If the input box is empty (str.length==0 ), the function clears the contents of the txtHint placeholder and exits the function.

If the input box is not empty, the showHint() function performs the following tasks:

  • Create an XMLHttpRequest object

  • When the server Execute the function when the response is ready

  • Send the request to a file on the server

  • Please note that we added a parameter q (with Contents of the input box)

AJAX Server Page - ASP and PHP

The server page called by the above JavaScript is an ASP file named "gethint. asp".

Below, we create two versions of the server file, one written in ASP and the other written in PHP.

ASP file

The source code in "gethint.asp" checks an array of names and returns the corresponding name to the browser: 

<%
response.expires=-1
dim a(30)
'Fill up array with names
a(1)="Anna"
a(2)="Brittany"
a(3)="Cinderella"
a(4)="Diana"
a(5)="Eva"
a(6)="Fiona"
a(7)="Gunda"
a(8)="Hege"
a(9)="Inga"
a(10)="Johanna"
a(11)="Kitty"
a(12)="Linda"
a(13)="Nina"
a(14)="Ophelia"
a(15)="Petunia"
a(16)="Amanda"
a(17)="Raquel"
a(18)="Cindy"
a(19)="Doris"
a(20)="Eve"
a(21)="Evita"
a(22)="Sunniva"
a(23)="Tove"
a(24)="Unni"
a(25)="Violet"
a(26)="Liza"
a(27)="Elizabeth"
a(28)="Ellen"
a(29)="Wenche"
a(30)="Vicky"
'get the q parameter from URL
q=ucase(request.querystring("q"))
'lookup all hints from array if length of q>0
if len(q)>0 then

   
  hint=""

   
  for i=1 to 30

       
    if q=ucase(mid(a(i),1,len(q))) then

           
      if hint="" then

               
        hint=a(i)

           
      else

               
        hint=hint & " , " & a(i)

           
      end if

       
    end if

   
  next
end if
'Output "no suggestion" if no hint were found
'or output the correct values
if hint="" then

   
  response.write("no suggestion")
else

   
  response.write(hint)
end if
%>

PHP file

The following code is written in PHP and has the same function as the above ASP code. 

<?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"];
//lookup all hints from array if length of q>0
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];

             
      }

         
    }

     
  }
 
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
 
{
 
$response="no suggestion";
 
}
else
 
{
 
$response=$hint;
 
}
//output the response
echo $response;
?>