Dans cette leçon vidéo, le formateur montre comment exploiter l’objet XMLHttpRequest pour réaliser des requêtes AJAX asynchrones. Il commence par créer l’instance xhr, en incluant un fallback ActiveXObject pour les anciens navigateurs IE. Il explique le mécanisme de l’événement onreadystatechange, détaille les cinq valeurs de readyState (0‑4) ainsi que l’interprétation du code HTTP status (200, 404, 3xx, 5xx). Il montre comment configurer la requête avec xhr.open (méthode, URL, flag asynchrone) et l’envoyer avec xhr.send, puis comment injecter la réponse texte dans le DOM via innerHTML. Le formateur ajoute un indicateur de chargement (texte ou GIF) pendant la phase de transition (readyState < 4) et discute brièvement de la gestion d’erreurs. Enfin, il factorise la création de l’objet dans une fonction utilitaire getXhr afin de réutiliser le code lorsqu’on a plusieurs appels AJAX sur la même page. La vidéo se conclut sur le rappel des trois blocs classiques d’un appel AJAX (création, interrogation, spécification) et annonce la prochaine leçon sur le traitement de réponses XML/JSON.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon d'AJAX. Aujourd'hui, nous allons explorer l'objet XMLHttpRequest. Ensuite, nous allons passer des requêtes au serveur web et récupérer la réponse de celui-ci que l'on va intégrer dans une page web dynamiquement sans rafraîchir celle-ci. Pour cela, j'ai prévu un bouton. Une fois que j'aurai cliqué dessus, AJAX sera exécuté et le message qui proviendra du serveur sera affiché juste en dessous. Je dispose donc de la page qui contiendra le code AJAX et un fichier nommé contenu.txt qui contiendra le message qui proviendra du serveur. C'est ce message que j'afficherai en dessous du bouton. Alors sur le bouton, je vais intégrer l'événement qui va appeler la fonction qui exécutera AJAX. J'ai appelé cette fonction ajaxIn. Que je vais déclarer ensuite dans le head. La première opération à faire, c'est la création de l'instance AJAX via l'objet XMLHttpRequest comme ceci. Désormais, je dispose de l'objet XMLHttpRequest identifié par xhr. Nous allons maintenant afficher xhr pour voir à quoi ça ressemble. Exécutons. Bon, ça m'affiche Object XMLHttpRequest, c'est-à-dire que la création de l'objet s'est bien passée. Cependant, si vous vous rappelez bien, lors de la dernière séance, j'ai dit que l'objet XMLHttpRequest est identifié par ce nom sur pratiquement tous les navigateurs récents, mais sur les anciennes versions d'Internet Explorer, il est reconnu par le nom de ActiveXObject. Donc je vais laisser libre choix au navigateur de créer l'objet xhr soit à partir de XMLHttpRequest ou bien à partir de ActiveXObject. Je vais donc faire ceci via la gestion des exceptions. C'est-à-dire que je vais commencer par créer l'instance AJAX via l'objet XMLHttpRequest, ce qui est beaucoup plus probable, mais au cas où je suis sur un navigateur Internet Explorer version 6 ou bien version 5, dans ce cas une exception sera lancée que je vais récupérer juste après. Maintenant je vais essayer de créer l'objet xhr à partir du contrôle ActiveX. Comme ceci, mais je vais passer un argument en guise de chaîne de caractères qui a la valeur suivante: microsoft.xmlhttp. Et si jamais l'objet n'est pas créé, dans ce cas c'est que AJAX n'est pas supporté par le navigateur. Alors je mettrai catch et j'afficherai un message d'erreur. On va encore essayer d'afficher xhr. Et ça marche toujours. Alors, le premier bloc consiste à créer l'objet xhr soit à partir de l'objet XMLHttpRequest ou bien à partir du ControlActiveXObject. Le deuxième bloc consiste maintenant à interroger le serveur et à récupérer sa réponse. Je vais donc mettre le code suivant. Xhr, c'est l'instance que je viens de créer. Onreadystatechange est un attribut de l'objet XMLHttpRequest et si vous remarquez bien, ça ressemble à un événement. En fait, il s'agit bien d'un événement qui va se déclencher, mais on va voir comment. Juste après, je lui associe une fonction anonyme comme on l'a vu en JavaScript. Ensuite, on mettra la condition suivante: If xhr.readyState égal à 4, il faut bien faire attention à la casse avec un S majuscule. ReadyState est aussi un attribut de l'objet XMLHttpRequest. Cet attribut peut avoir 5 valeurs entières comprises entre 0 et 4. 0 signifie que l'objet XMLHttpRequest a bien été créé mais aucune requête n'a été envoyée. La valeur 1 veut dire que la ressource a été trouvée sur le serveur. 2 signifie que des en-têtes ont été reçues. 3 signifie que la réponse est en train de transiter vers le client et 4 signifie que la réponse est présente sur le client. Désormais il peut être traité en JavaScript. Donc à chaque fois que l'idState change de valeur, onIdStateChanged est exécuté. Donc l'événement onIdStateChanged dépend systématiquement de l'attribut l'idState qui change de valeur selon l'état de connexion entre le client et le serveur. On peut ajouter une autre condition. Status est aussi un attribut de l'objet XMLHttpRequest qui reçoit le code HTTP. Dans ce cas, la valeur de 100 signifie que c'est OK, c'est-à-dire il n'y a pas d'erreur. Sinon, on peut avoir des codes du genre 404 ou bien la famille 300, voire même la famille 500, etc. Dans ce cas, si la réponse parvient au client, ce qui signifie que le leadStatus est égal à 4, ici il n'y a pas d'erreur, alors je vais tout simplement afficher la réponse que le serveur a envoyée dans la div que j'ai prévue pour ceci. Je mettrai donc Alors j'utilise la propriété innerHTML à laquelle je vais associer la réponse du serveur. Figurez-vous bien que j'ai utilisé responseText parce que dans ce cas je vais récupérer la réponse du serveur qui est tout simplement un texte brut. Bien sûr après on verra comment récupérer des réponses XML, JSON, etc. Donc là c'est le deuxième bloc. Le dernier bloc consiste à spécifier la ressource sur le serveur et à lui envoyer des paramètres éventuels. On mettra donc xhr.open qui est une méthode de l'objet XMLHttpRequest et qui accepte 3 arguments. Le premier argument c'est la méthode HTTP à utiliser soit GET, POST, PUT, etc. Généralement on utilise GET si on n'a pas de paramètres à envoyer sinon on utilise POST. Le deuxième argument, c'est le nom de la ressource sur le serveur qui est dans ce cas contenu.txt. Il faut mettre le chemin relatif vers cette ressource. Le dernier argument maintenant est facultatif et qui vaut par défaut true signifie qu'il s'agit d'une requête asynchrone. Alors j'ai dit que le nom même du AJAX est Synchronise JavaScript and XML signifie que celui-ci envoie des requêtes asynchrones, mais en fait c'est pas toujours le cas. Ça dépend de vous. Si vous voulez envoyer des requêtes synchrones, vous êtes libre de le faire. Il suffit de mettre ici false. Mais l'essence même d'Ajax, c'est de se servir des requêtes asynchrones. Alors autant garder la valeur true. Ensuite xhr.send. Donc ici pour send, bien sûr, on peut la mettre si on utilise la méthode POST. C'est-à-dire qu'il y a des paramètres ou bien des arguments à passer au serveur. Dans ce cas, je n'ai pas d'arguments à envoyer. Alors je peux laisser les parenthèses soient vides comme ça. Ou bien je mets la valeur null pour dire que j'ai rien à envoyer. Alors c'est tout. Essayons d'exécuter pour voir ce que ça va donner. Quand je clique, il y a bien le message prévu qui est affiché dans la div. Et faites bien attention que la page n'a pas été rechargée entièrement. Il y a juste cette zone qui a été mise à jour. On peut améliorer ce code un petit peu. En fait, l'attribut ledState avant d'atteindre la valeur 4, elle est passée par 0, 1, 2 puis 3. Si l'échange s'effectue à travers un réseau réel, ça veut dire internet, donc on va pas intercepter la réponse instantanément. Il y aura une latence qui est due à internet. Dans ce cas, il faut prévoir un message d'attente comme ceci. Else, c'est-à-dire si cette condition n'est pas vraie, dans ce cas, dans la div identifiée par contenu, je vais afficher un message, par exemple en cours. Comme ça, c'est-à-dire que c'est en cours de chargement. Il y a juste une chose qu'il faut pas négliger, c'est que si cette condition n'est pas vraie, c'est que soit la réponse n'est pas encore parvenue au client, soit il y a une erreur, c'est-à-dire que le code HTTP envoyé par le serveur ne vaut pas 200. Donc il serait mieux de prévoir ce cas avec une condition à part. Mais bon, pour simplifier, on va garder le code comme ceci. Exécutons. On a toujours le message qui est affiché, c'est-à-dire que le message d'attente, j'arrive pas à le voir et c'est normal parce que ça se passe tellement vite puisque j'ai le serveur sur la même machine. Pour voir si le message s'affiche, je vais juste modifier le code un petit peu. Je mettrai ici la valeur 5 parce que je sais que le readyState n'atteindra jamais la valeur 5. Le maximum qu'il peut atteindre, c'est 4. Alors dans ce cas, j'aurai toujours le message en cours. Voilà, c'est-à-dire que le message est bien là, mais ça se passe tellement vite que j'ai pas le temps de le voir. Généralement, sur les sites web, ils n'affichent pas des messages explicites d'attente, mais à la place ils mettent des GIF animés. J'ai déjà prévu une GIF pour ça, c'est cette image. Je vais essayer de l'intégrer à la place. Je mettrai là la balise img. Src/images/loading.gif. Bon, j'exécute. Voilà, j'arrive pas à voir l'image parce que ça se passe tellement vite. Bon, je vais faire la même chose, je vais modifier ça ou bien ça. Je mettrai par exemple 404. Et voilà, j'ai maintenant la GIF animée qui est exécutée. Voilà, donc vous avez vu que c'est tellement simple de se servir d'AJAX. En guise de rappel, pour exécuter AJAX, le code est généralement constitué de 3 blocs: un bloc de création de l'objet, un bloc d'interrogation du serveur et de traitement de la réponse, et un dernier bloc qui permet de spécifier la ressource et la méthode d'accès. Éventuellement le passage des arguments s'il y en a. Une dernière modification à faire, c'est que des fois on a besoin de plusieurs instances AJAX au sein de la même page. Alors on aura presque le même code qui va se répéter partout. Donc ce qu'on va faire, c'est factoriser cette partie, c'est-à-dire la partie qui est consacrée à la création de l'objet. On mettra donc là une autre fonction qui s'appelle getXhr. Dedans, je mettrai ce code. Et il va me retourner xhr que je vais récupérer ici. C'est-à-dire l'objet xhr courant égal getXhr comme ceci. Donc au lieu de répéter ce code plusieurs fois, je l'ai factorisé dans une fonction que j'appelle au moment voulu. Exécutons et ça marche toujours de la même manière. Pour cette fois, on va se contenter d'une réponse texte simple qui provient du serveur, et la prochaine fois, on va voir comment manipuler des réponses plus complexes, et on verra aussi comment récupérer des réponses structurées à l'aide du XML ou bien JSON. Merci pour votre attention et à la vidéo prochaine.
