AJAX est utilisé pour créer des applications plus dynamiques.

Exemple AJAX ASP/PHP

L'exemple suivant vous montrera comment la page Web communique avec le serveur Web lorsque l'utilisateur saisit des caractères dans la zone de saisie : Veuillez taper les lettres (A - Z) dans la zone de saisie ci-dessous : 

<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>

Exemple d'analyse - fonction showHint()

Lorsque l'utilisateur tape dans la zone de saisie au-dessus du caractère , la fonction "showHint()" sera exécutée. Cette fonction est déclenchée par l'événement "onkeyup" : 

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();
}

Analyse du code source :

Si la zone de saisie est vide (str.length ==0 ), la fonction efface le contenu de l'espace réservé txtHint et quitte la fonction.

Si la zone de saisie n'est pas vide, la fonction showHint() effectue les tâches suivantes :

  • Crée un objet XMLHttpRequest

  • Quand le serveur Exécute la fonction lorsque la réponse est prête

  • Envoye la requête au fichier sur le serveur

  • Notez que nous avons ajouté un paramètre q à l'URL (avec Contenu de la zone de saisie)

Page Serveur AJAX - ASP et PHP

La page serveur appelée par le JavaScript ci-dessus est un fichier ASP nommé "gethint. asp".

Ci-dessous, nous créons deux versions du fichier serveur, l'une écrite en ASP et l'autre en PHP.

Le code source dans le fichier ASP

"gethint.asp" vérifie un tableau de noms et renvoie le nom correspondant au navigateur : 

<%
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
%>

Fichier PHP

Le code suivant est écrit en PHP et a la même fonction que le code ASP ci-dessus. 

<?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;
?>