Requêtes AJAX avec PHP

Requête AJAX

Dans cet exemple AJAX, nous allons démontrer comment une page web communique avec un serveur web en ligne lorsque l'utilisateur saisit des données dans un formulaire web.

Entrez le nom dans le champ de texte suivant :

Suggestions :

Dans cet exemple, il y a trois pages :

  • Un simple formulaire HTML
  • Un segment JavaScript
  • Une page PHP

Formulaire HTML

Voici un formulaire HTML. Il contient un simple formulaire HTML et un lien vers le JavaScript :

<html>
<head>
<script src="clienthint.js"></script> 
</head>
<body>
<form> 
Prénom :
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form>
<p>Suggestions : <span id="txtHint"></span></p>
</body>
</html>

Explication de l'exemple - Formulaire HTML

Comme vous le voyez, la page HTML supérieure contient un simple formulaire HTML avec un champ d'entrée nommé "txt1".

Voici comment fonctionne ce formulaire :

  1. Un événement est déclenché lorsque l'utilisateur appuie et relâche une touche dans le champ d'entrée
  2. Lorsque cet événement est déclenché, la fonction nommée showHint() est exécutée
  3. Sous le formulaire, il y a un <span> nommé "txtHint" qui sert de placeholder pour les données renvoyées par la fonction showHint().

JavaScript

Le code JavaScript est stocké dans le fichier "clienthint.js", qui est lié au document HTML :

var xmlHttp
function showHint(str)
{
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML=""
  return
  }
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
  {
  alert ("Le navigateur ne prend pas en charge les requêtes HTTP")
  return
  } 
var url="gethint.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged 
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
} 
function stateChanged() 
{ 
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 { 
 document.getElementById("txtHint").innerHTML=xmlHttp.responseText 
 } 
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 // Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}

Explication de l'exemple :

Fonction showHint()

À chaque fois qu'un caractère est saisi dans le champ d'entrée, la fonction est exécutée une fois.

Si le champ de texte contient du contenu (str.length > 0), la fonction agit ainsi :

  1. Définir l'URL (nom de fichier) à envoyer au serveur
  2. Ajouter les paramètres (q) contenant le contenu du champ d'entrée à cette URL
  3. Ajouter un nombre aléatoire pour éviter que le serveur utilise un fichier de cache
  4. Appeler la fonction GetXmlHttpObject pour créer un objet XMLHTTP et informer l'objet d'exécuter la fonction nommée stateChanged lors de l'activation d'un événement
  5. Ouvrir cet objet XMLHTTP à l'aide de l'URL fournie
  6. Envoyer une requête HTTP au serveur

Si le champ d'entrée est vide, la fonction efface simplement le contenu du champ txtHint.

Fonction stateChanged()

La fonction est exécutée à chaque changement d'état de l'objet XMLHTTP.

Lorsque l'état devient 4 (ou "complete"), remplir le contenu du champ txtHint avec le texte de réponse.

Fonction GetXmlHttpObject()

Les applications AJAX ne peuvent fonctionner que dans des navigateurs web complètement compatibles avec XML.

Le code appelle la fonction GetXmlHttpObject().

La fonction a pour but de résoudre le problème de création de différents objets XMLHTTP pour différents navigateurs.

Cela a été expliqué dans la section précédente.

Page PHP

La page serveur appelée par le code JavaScript est une page serveur simple nommée "gethint.php".

"Le code dans gethint.php vérifie l'array de noms et renvoie les noms correspondants au client :

<?php
//remplir l'array avec des noms
$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";
//obtenir le paramètre q à partir de l'URL
$q=$_GET["q"];
//rechercher toutes les suggestions de l'array si la longueur de 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];
      }
    }
  }
}
//Définir la sortie à "no suggestion" si aucune aide n'a été trouvée
//ou aux valeurs correctes
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//Sortir la réponse
echo $response;
?>

Si il existe un texte envoyé par JavaScript (strlen($q) > 0), alors :

  1. Trouver les noms correspondant aux caractères transmis par JavaScript
  2. Si plusieurs noms sont trouvés, inclure tous les noms dans la chaîne de réponse
  3. Si aucun nom correspondant n'est trouvé, configurer la réponse à "no suggestion"
  4. Si l'on trouve un ou plusieurs noms, configurer la réponse à ces noms
  5. Envoyer la réponse à l'indicateur de place "txtHint"