Exemple PHP AJAX

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

Exemple PHP AJAX

Dans l'exemple suivant, voyons comment le site web communique avec le serveur web lorsque l'utilisateur saisit des caractères dans le champ d'entrée :

Exemple

S'il vous plaît saisir les lettres A-Z dans le champ d'entrée suivant :

Nom :

Recommandations de recherche :

Explication de l'exemple

Dans l'exemple ci-dessus, lorsque l'utilisateur saisit des caractères dans le champ d'entrée, la fonction nommée "showHint()" est exécutée.

Cette fonction est déclenchée par l'événement onkeyup.

Voici le code HTML :

Exemple

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    }
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>
<p><b>Entrez le nom dans le champ ci-dessous :</b></p>
<form> 
Prénom ou nom : <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Conseil : <span id="txtHint"></span></p>
</body>
</html>

Essayez-le vous-même

Explication du code :

Vérifiez d'abord si le champ d'entrée est vide (str.length == 0），si c'est le cas, videz le contenu du placeholder txtHint et sortez de la fonction.

Cependant, si le champ d'entrée n'est pas vide, procédez comme suit :

  • Créez un objet XMLHttpRequest
  • Créez une fonction qui s'exécute lorsque le serveur est prêt à répondre
  • Envoyez une requête au fichier PHP (gethint.php) sur le serveur
  • Veuillez ajouter le paramètre 'q' à gethint.php
  • La variable 'str' conserve le contenu du champ d'entrée

Fichier PHP - "gethint.php"

Ce fichier PHP vérifie l'array des noms et renvoie le nom correspondant au navigateur :

<?php
// Nom d'array
 $a[] = "Ava";
 $a[] = "Brielle";
 $a[] = "Caroline";
 $a[] = "Diana";
 $a[] = "Elise";
 $a[] = "Fiona";
 $a[] = "Grace";
 $a[] = "Hannah";
 $a[] = "Ileana";
 $a[] = "Jane";
 $a[] = "Kathryn";
 $a[] = "Laura";
 $a[] = "Millie";
 $a[] = "Nancy";
 $a[] = "Opal";
 $a[] = "Petty";
 $a[] = "Queenie";
 $a[] = "Rose";
 $a[] = "Shirley";
 $a[] = "Tiffany";
 $a[] = "Ursula";
 $a[] = "Victoria";
 $a[] = "Wendy";
 $a[] = "Xenia";
 $a[] = "Yvette";
 $a[] = "Zoe";
 $a[] = "Angell";
 $a[] = "Adele";
 $a[] = "Beatty";
 $a[] = "Carlton";
 $a[] = "Elisabeth";
 $a[] = "Violet";
// Obtient le paramètre q de l'URL
$q = $_REQUEST["q"];
$hint = "";
// Vérifiez tous les hints dans l'array, $q est-il le même que ""
if ($q !== "") {
    $q = strtolower($q);
    $len=strlen($q);
    foreach($a as $name) {
        if (stristr($q, substr($name, 0, $len))) {
            if ($hint === "") {
                $hint = $name;
            }
                $hint .= ", $name";
            }
         }
    }
}
// Affiche "no suggestion" si hint n'est pas trouvé ou affiche la valeur correcte
  echo $hint === "" ? "no suggestion" : $hint;
?>
c.html" -->