XMLHttpRequest AJAX JavaScript

Calanque de Sormiou près de Marseille avec les mots XMLHTTPRequest javascript AJAX illustrant l'article sur Murviel Info Béziers

XMLHttpRequest() est un objet JavaScript qui peut être utilisé pour effectuer des requêtes HTTP Hypertext Transfer Protocol en JavaScript afin d’échanger des données entre le client et le serveur. Il est pris en charge par tous les navigateurs modernes et anciens. Il permet donc de faire des requêtes AJAX Asynchronous JavaScript and XML et de ne pas recharger le navigateur pour faire des requêtes au serveur. La librairie jQuery offre la même chose avec la méthode $.ajax().

On définit un clic sur un bouton dont l’id est par exemple my-button pour faire la requête AJAX.

La méthode open() de XMLHttpRequest instancie une nouvelle requête.

L’objet FormData permet de construire facilement un ensemble de paires clé/valeur représentant des champs de données et des valeurs, qui sont ensuite envoyées au serveur. Il utilise le même format qu’un formulaire, le type d’encodage est mis par défaut à multipart/form-data. Si les données sont issues d’un formulaire, on construit une collection HTMLElement avec le formulaire et l’on instancie l’objet FormaData en passant le formulaire en argument. Par exemple, si l’on a un formulaire avec le nom name my_form :

On accède au formulaire avec l’une des deux méthodes suivantes :

On ajoute un écouteur à la soumission du formulaire et l’on construit une instance de l’objet formData, on empèche la soumission par défaut du formulaire qui rechargerait la page. On envoie alors les données sur le serveur et l’on attend la réponse. On peut ajouter une div qui contiendra un loader que l’on aura styliser pour faire patienter l’utilisateur.

La méthode  XMLHttpRequest send() envoie la requête au serveur.  Si la requête est asynchrone par défaut, la méthode envoie un retour dès que la requête est partie. En cas de requête synchrone, elle ne renvoie rien tant que la réponse n’est pas retournée.

Les données sont envoyées au serveur, les traitements s’effectue dans le fichier /url/to/ajax.php.

L’inspecteur de code DevTools affiche :

Les données sont transmises au serveur. On attend le retour pour faire les traitements, en particulier l’affichage. On change un peu le fichier /url/to/ajax.php pour renvoyer vraiment quelque chose.

On continue de remplir le fichier javascript pour traiter les données au retour du serveur :

Le serveur renvoie les données javascript object notation JSON. Attention dans les fonctions fléchées, l’objet this fait référence à une instance parente. Les fonctions fléchées ne créent pas de nouveau contexte, elles utilisent la valeur this de leur contexte. Aussi, si le mot-clé this est utilisé dans le corps de la fonction, le moteur recherchera la référence à cette valeur dans une portée parente. Une fonction fléchée permet d’avoir une syntaxe plus courte que function et ne possède pas ses propres valeurs pour thisargumentssuper, ou new.target. Les fonctions fléchées sont souvent anonymes et ne sont pas destinées à être utilisées pour déclarer des méthodes. On utilise donc notre instance xhr.

Résultat de la console du log xhr sur Murviel Info Béziers
Logs dans la console

La réponse à traiter se trouve donc dans response et responseText.

response est interprété dans un ArrayBufferBlobDocument, JSON, ou une chaîne DOMString, cela dépend de la valeur de XMLHttpRequest.responseTyperesponseTextest le texte brut raw text, et on peut le gérer comme on veut. A l’usage, ils sont assez similaires.

  1. On peut utiliser response lorsque l’on reçoit un objet JSON du serveur, il faut le traduire en objet JavaScript. La méthode JSON.parse() analyse une chaîne de caractères JSON et construit la valeur JavaScript ou l’objet décrit par cette chaîne.
  2. On peut utiliser responseText lorsque le responseType n’est pas dans un format que l’on veut utiliser.

Il ne reste plus qu’à afficher ce que l’on veut. On aura au préalable créer une div avec l’id response-test pour accueillir le résultat.

Retour dans la page avec XMLHttpRequest sur Murviel Info Béziers

Et hop, on peut faire des appels asynchrones au serveur avec l’objet XMLHttpRequest en javascript sans se servir de jQuery. C’est quand un petit peu plus compliqué que la methode $.ajax().

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables.