Short video - Objet XMLHttpRequest en AJAX

17 Jan 2023 · 2 min

Watch on YouTube

2:17

In this short French-language tutorial, the presenter walks through using the XMLHttpRequest object to perform an AJAX request that fetches content from a server-side text file (contenu.txt) and injects it into a web page without a full page reload. The demo starts with a button that, when clicked, triggers a function named ajaxIn. Inside ajaxIn, the code creates an XMLHttpRequest instance (xhr) and displays it in the console to confirm successful creation. To ensure compatibility with older Internet Explorer versions, the presenter adds a try‑catch block that falls back to creating the object via ActiveXObject if the standard XMLHttpRequest constructor throws an exception. The tutorial then proceeds to configure the request, send it, and place the server response beneath the button, illustrating a complete, dynamic content update using AJAX.

Chapters

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.