Introduction aux appels Ajax

Publié: 2021-11-01

Bienvenue dans notre introduction à Ajax ! Dans cet article, nous allons parcourir les bases mêmes d'Ajax et comment il est utilisé dans un exemple réel. Nous allons également voir un exemple d'appel Ajax-PHP. Bien que nous ayons fait de notre mieux pour simplifier ce didacticiel, une connaissance pratique de Javascript, PHP et WordPress est très importante pour bien comprendre ce qui suit. Dans cet esprit, commençons!

Qu'est-ce qu'Ajax ?

Ajax signifie JavaScript asynchrone et XML.

Ajax n'est pas un langage de programmation, mais un éventail de techniques qui combinent les technologies Web existantes afin de créer de meilleures applications Web.

Améliorer les sites Web avec Ajax

Ajax a une vaste gamme d'utilisations. Parmi celles-ci, l'une des principales fonctions sont les appels Ajax. Les appels Ajax permettent à un site Web de mettre à jour une partie de son contenu lors d'une action de l'utilisateur sans avoir à recharger la page. Ainsi, contrairement à une requête HTTP normale, nous n'avons pas besoin d'attendre la réponse du serveur pour continuer à interagir avec le site Web.

Traditionnellement, les requêtes HTTP sont adressées à un serveur Web et, après leur traitement, le serveur renvoie la sortie mise à jour dans un nouveau chargement de page. Dans une requête Ajax, cette séquence d'actions se déroule en coulisses, de manière asynchrone, afin que l'utilisateur ne soit pas interrompu. Cela améliore l'interactivité et la réactivité et rend le site plus dynamique.

Comment fonctionne un appel Ajax ?

Un appel Ajax commence par l'exécution par l'utilisateur final d'une action sur le front-end d'un site Web (par exemple, en cliquant sur un bouton). Lorsque cette action est effectuée, un événement Javascript est déclenché et son écouteur appelle une fonction.

À l'intérieur de la fonction, l'appel Ajax est déclenché et, à l'aide de XML, les informations sont conditionnées et la demande est envoyée à un script serveur.

N OTE : De nos jours, dans presque toutes les occasions, JSON est préféré à XML car il est plus rapide, plus facile à lire et à programmer, etc.

À l'intérieur du script, la demande est traitée à l'aide d'un langage de script côté serveur comme PHP, Java, Ruby, Python, etc.

La réponse est renvoyée au client et une fonction de rappel met à jour la partie de contenu correspondante avec les données reçues.

Voyons comment cela fonctionne dans un exemple

Un exemple simple d'appel Ajax

Créons une application de recherche qui vous permet de voir les résultats de la recherche en temps réel lors de la recherche dans une liste de titres d'articles.

Nous utiliserons PHP comme langage de script côté serveur et vous guiderons à travers cela, du point de vue des utilisateurs finaux.

Étape 1 : Le formulaire HTML

Tout d'abord, nous avons besoin d'une zone de texte que l'utilisateur remplira de texte et où afficher le résultat. Créons donc un formulaire HTML simple et un élément qui affichera les résultats.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> </body> </html>

Étape 2 : Fonction Javascript

Lorsqu'un utilisateur saisit du texte, nous voulons voir les résultats en temps réel, s'ils sont disponibles. Nous utiliserons l'événement Javascript onkeyup qui déclenche une fonction lorsque l'utilisateur relâche une touche du clavier.

La fonction devra obtenir le texte courant en tant que paramètre afin de continuer le processus.

 <html> <body> <p><b>Search in articles:</b></p> <form> <input type="text" onkeyup="foundArticles(this.value)"> </form> <p>Articles available: <span></span></p> <script type="text/javascript"> function foundArticles(str) { } </script> </body> </html>

Remplissons la fonction.

Étape 3 : La demande

Dans la fonction, nous devons d'abord créer un objet XMLHttpRequest afin d'interagir avec le serveur, puis appeler une autre fonction qui fera quelque chose avec la valeur passée dans notre fonction foundArticles() .

Dans le processus décrit ci-dessus, l'interaction avec le serveur est accomplie à l'aide d'un gestionnaire d'événements Javascript XMLHttpRequest.onready statechange, qui est appelé lorsque la propriété readyState est modifiée. Clarifions davantage ces étapes :.

  • La propriété readyState renvoie l'état d'un XMLHttpRequest dans lequel se trouve un client.
  • Chaque fois que readyState change, l'événement readystatechange est déclenché.
  • La propriété onreadystatechange contient le gestionnaire d'événements à appeler lorsque l'événement readystatechange est déclenché.

Étape 4 : que faire de la demande

Maintenant, nous devons faire quelque chose lorsque l'opération est terminée, et après avoir consulté les états disponibles, nous le définissons sur l'état 4.

Ainsi, lorsque l'opération est terminée, le texte à l'intérieur de l'élément HTML avec l'id txtHint doit être remplacé par la réponse du serveur. C'est à ce moment que nous devons utiliser la propriété responseText , qui renvoie le texte reçu du serveur après l'envoi de la requête.

Ajoutons maintenant le code à l'intérieur de la fonction foundArticles() qui correspond à ce que nous venons de décrire ci-dessus.

 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } }

REMARQUE : Nous devons souligner ici que le rendu HTML comme celui-ci, sans y échapper, est une mauvaise pratique en matière de sécurité et nous ne le faisons que pour les besoins de ce didacticiel afin que le code reste aussi simple que possible. Juste pour être sûr, n'utilisez aucun des codes fournis dans cet article pour une utilisation dans le monde réel !

Ensuite, nous devons envoyer la requête au serveur et utiliser les données renvoyées.

Étape 5 : Les données

Dans cet exemple, les données seront stockées dans un fichier PHP. Nous créons un fichier data.php dans le même dossier et incluons le code suivant :

 <?php // We fill in the posts array with the data to look up to $posts = array( "C Language course", "C++ course", "About Bootstrap", "Learn to write HTML", "All about SS", "CSS3 course", "JAVA course", "JavaScript tutorials", "Learn PHP", "MySQL examples", "Learn Python", "AngularJS", "Photoshop Tutorials", "C#", "ASP.NET", "SAP", "ORACLE", "Wordpress CMS for beginners", "Build your own Android app", "All about SEO", "Illustrator", "Flash", "Action Script" ); // We get the requested value from the URL and store it in a variable $req = $_REQUEST["req"]; $autocomplete = ""; // Iterate $posts if $req is not empty if ($req !== "") { $req = strtolower($req); foreach($posts as $name) { $lowname = strtolower($name); if ( strpos( $lowname , $req ) !== false ) { $autocomplete = $name; } } } // Output echo $autocomplete === "" ? "no suggestion" : $autocomplete;

Ne soyez pas confus à propos de $req = $_REQUEST["req"]; ligne. C'est ainsi que le script récupère la requête dans le fichier custom.js que nous verrons bientôt.

Étape 6 : Méthodes de demande

Nous allons utiliser la méthode open() de notre objet XMLHttpRequest pour initialiser la requête, et la méthode send() pour échanger des données avec le serveur.

Les paramètres que nous utilisons pour la méthode open() sont :

  • La méthode. C'est-à-dire la méthode de requête HTTP ("GET", "POST", "PUT", "DELETE" etc).
  • L'URL à laquelle envoyer la demande.
 function foundArticles(str) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if ( this.readyState == 4 ) { document.getElementById("txtHint").innerHTML = this.responseText; } } xmlhttp.open("GET", "data.php?req=" + str, true); xmlhttp.send(); }

Comme vous pouvez le voir, la méthode open() initialise une requête GET à l'URL "data.php?req=" + str.

L'URL sera alors utilisée par le $req = $_REQUEST["req"] ; variable dans le fichier data.php pour récupérer la valeur.

Regardons un visuel de l'exemple de requête :

À ce stade, le formulaire devrait fonctionner correctement. Si vous entrez, disons le mot "cours", le résultat devrait être :

« Cours de langue C »,
"Cours C++",
"Cours CSS3",
"Cours JAVA".

Conclusion

C'était un exemple d'un exemple très simple de requête Ajax qui est une technique très populaire à utiliser lors de la création de sites Web. Bien que ce soit simple, nous espérons que nous vous avons rapproché de la compréhension du routage dans de telles requêtes et cela pourrait vous aider à commencer à coder les vôtres. Dans un prochain article, nous revisiterons Ajax, dans un environnement WordPress, alors restez connectés !