AJAX est utilisé pour créer des applications plus dynamiques.
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 saisir les lettres (A - Z) dans la zone de saisie ci-dessous :
Essayez de saisir la lettre a dans la zone de saisie :
Informations rapides :
Lorsque l'utilisateur tape des caractères dans la zone de saisie ci-dessus, la fonction "showHint()" sera exécutée. Cette fonction est déclenchée par l'événement "onkeyup" :
fonction showHint ( str ) { var xmlhttp ; ( str . longueur == 0 ) { document getElementById ( " txtHint " ) innerHTML = " " ; si ( fenêtre . XMLHttpRequest ) { // Code d'exécution du navigateur IE7+, Firefox, Chrome, Opera, Safari xmlhttp = nouveau XMLHttpRequête ( ) ; autre { // Code d'exécution du navigateur IE6, IE5 xmlhttp = nouveau ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = fonction ( ) { si ( xmlhttp . readyState == 4 && xmlhttp . status == 200 ) { document getElementById ( " txtHint " ) innerHTML = xmlhttp . } xmlhttp . open ( " GET " , " /try/ajax/gethint.php?q= " + str , true ) ;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, showHint() effectue les tâches suivantes :
Créer un objet XMLHttpRequest
Exécuter la fonction lorsque la réponse du serveur est prête
Envoyer la requête vers un fichier sur le serveur
Notez que nous avons ajouté un paramètre q (avec le contenu de la zone de saisie) à l'URL
La page du serveur appelée par 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 « gethint.asp » vérifie un tableau de noms et renvoie les noms correspondants au navigateur :
<%response.expires=-1dim a(30)'Remplissez le tableau avec nomsa(1)="Anna"a(2)="Bretagne"a(3)="Cendrillon"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)="Ophélie" a(15)="Pétunia"a( 16)="Amanda"a(17)="Raquel"a(18)="Cindy"a(19)="Doris"a(20)="Eve"a(21)="Evita"a(22) ="Sunniva"a(23)="Tov e"a(24)="Unni"a(25)="Violet"a(26)="Liza"a(27)="Elizabeth"a(28)="Ellen"a(29)="Wenche" a(30)="Vicky"'obtenir le paramètre q de URLq=ucase(request.querystring("q"))'recherche tous les indices du tableau si la longueur de q>0 si len(q)>0 puis soupçon="" pour i=1 à 30 si q=ucase (mid(a(i),1,len(q))) then if soupçon="" alors conseil=a(i) sinon conseil=conseil & " , " & a(i) fin si fin si suivantfin si'Sortie "aucune suggestion" si aucun indice n'a été trouvé ou afficher les valeurs correctes si allusion="" alors réponse.write("aucune suggestion")else réponse.write(hint)end if%>Le code ci-dessous est écrit en PHP et a le même effet que le code ASP ci-dessus.
<?php// Remplir le tableau avec noms$a[]="Anna";$a[]="Bretagne";$a[]="Cendrillon";$a[]="Diane";$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[]="À ve";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a []="Wenche";$a[]="Vicky";//obtenir le paramètre q de l'URL$q=$_GET["q"];//recherche tous les indices du tableau si la longueur de q>0if (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 sur "no" suggestion" si aucun indice n'a été trouvé// ou aux valeurs correctesif ($hint == ""){ $response="no suggestion";}else{ $response=$hint;}//afficher la réponseecho $réponse ;?>