PHP - AJAX et PHP

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

Exemple AJAX PHP

L'exemple suivant montre comment une page web peut communiquer avec un serveur web pendant qu'un utilisateur tape des caractères dans un champ de saisie :

Exemple

Commencez à taper un nom dans le champ de saisie ci-dessous :

Suggestions :

Exemple expliqué

Dans l'exemple ci-dessus, lorsque l'utilisateur tape un caractère dans le champ de saisie, une fonction appelée showHint() est exécutée.

La 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; } else { 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>Commencez à taper un nom dans le champ de saisie ci-dessous :</b></p> <form action=""> <label for="fname">Prénom :</label> <input type="text" id="fname" name="fname" onkeyup="showHint(this.value)"> </form> <p>Suggestions : <span id="txtHint"></span></p> </body> </html>
Exécuter l'exemple »

Explication du code :

Tout d'abord, vérifiez si le champ de saisie est vide (str.length == 0). Si c'est le cas, effacez le contenu de l'espace réservé txtHint et quittez la fonction.

Cependant, si le champ de saisie n'est pas vide, procédez comme suit :

  • Créez un objet XMLHttpRequest
  • Créez la fonction à exécuter lorsque la réponse du serveur est prête
  • Envoyez la requête à un fichier PHP (gethint.php) sur le serveur
  • Remarquez que le paramètre q est ajouté à l'URL (gethint.php?q=" + str)
  • Et la variable str contient le contenu du champ de saisie

Le fichier PHP - "gethint.php"

Le fichier PHP vérifie un tableau de noms et renvoie le(s) nom(s) correspondant(s) au navigateur :