AJAX est utilisé pour créer des applications plus interactives.
L'exemple suivant montre comment la page Web communique avec le serveur Web lorsque l'utilisateur saisit des caractères dans la zone de saisie :
Lorsque l'utilisateur saisit des caractères dans la zone de saisie ci-dessus, la fonction "showHint()" est exécutée. Cette fonction est déclenchée par l'événement "onkeyup" :
<html><head><script>function showHint(str){ if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; / Code exécuté par les navigateurs IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest( } else { //IE6, IE5); Code exécuté par le navigateur 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>Dans la zone de saisie Saisissez un nom :</b></p><form> Nom : <input type="text" onkeyup="showHint(this.value)"></form><p>Valeur renvoyée : <span id="txtHint"></span></p></body></html>Explication du code source :
Si la zone de saisie est vide (str.length==0), cette fonction effacera le contenu de l'espace réservé txtHint et quittera la fonction.
Si la zone de saisie n'est pas vide, showHint() effectue les étapes suivantes :
Créer un objet XMLHttpRequest
Créer une fonction qui s'exécute lorsque la réponse du serveur est prête
Envoyer une requête à un fichier sur le serveur
Veuillez noter le paramètre (q) ajouté à la fin de l'URL (contenant le contenu de la zone de saisie)
La page serveur appelée ci-dessus via JavaScript est un fichier PHP nommé "gethint.php".
Le code source dans "gethint.php" vérifie le tableau des noms et renvoie les noms correspondants au navigateur :
<?php// Remplissez le tableau avec des noms $a[]="Anna";$a[]="Brittany";$a[]="Cendrillon";$a[]="Diana";$a[]="Eva" ; $a[]="Fiona";$a[]="Gunda";$ a[]="Hege";$a[]="Inga";$a[]="Johanna";$a[]="Kitty";$a[]="Linda";$a[]=" Nina";$a[]="Ophélie";$a[]="Pétunia";$ 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 q à partir de l'adresse URL de la requête Paramètre $q=$_GET["q"];//Vérifiez s'il existe une valeur correspondante, si q>0if (strlen($q) > 0){ $hint="" for($i=0; $ je< count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { if ($hint==" ") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } }}// S'il n'y a pas de valeur correspondante, définissez la sortie sur "aucune suggestion " if ($ allusion == ""){ $response="aucune suggestion";}else{ $response=$hint;}//Valeur de retour de sortie echo $response;?>Explication : Si JavaScript envoie du texte (c'est-à-dire strlen($q) > 0), ceci se produit :
Rechercher des noms correspondant aux caractères envoyés par JavaScript
Si aucune correspondance n'est trouvée, définissez la chaîne de réponse sur "aucune suggestion".
Si un ou plusieurs noms correspondants sont trouvés, définissez la chaîne de réponse avec tous les noms
Envoyer la réponse à l'espace réservé "txtHint"
Si votre requête asynchrone doit traverser le domaine, vous pouvez consulter : Solution aux problèmes inter-domaines PHP Ajax.