Requête javascript ajax XHR2

La requête javascript ajax XHR2. En surfant sur le web, vous voyez que tout clic sur un lien rafraîchit complètement la fenêtre du navigateur. Il en est ainsi lorsque vous naviguez de page en page ce qui est a posteriori un comportement normal.

Parfois, un clic sur un bouton ou lien renvoie vers la même page que celle du clic. A quelques différences près. Par exemple une liste déroulante dont le contenu change ou encore l’affichage d’une information supplémentaire. Remarquez que ce n’est pas très sexy.

Je vous montre comment modifier une page web en ajoutant, modifiant ou supprimant certains de ses éléments. Tout ça sans la rafraîchir complètement avec l’objet javascript XMLHttpRequest dans sa version 2.

AJAX XHR2 c’est quoi ?

AJAX est l’acronyme de Asynchronous Javascript and XML.
AJAX modifie une page web sans la rafraichir entièrement, cela rend ainsi l’expérience utilisateur plus agréable.
AJAX appelle des scripts côté serveur développés par exemple en php, java ou encore C#. Ces scripts renvoient des structures de données au format XML ou au format JSON. Le format JSON devient de plus en plus la norme.

Synchrone, asynchrone quelle différence ?

Un appel synchrone est dit bloquant. Lorsque le script javascript attend la réponse de l’url spécifiée dans l’appel ajax. L’instruction qui suit l’appel ajax n’est exécutée qu’à réception de la réponse.

Un appel asynchrone n’est pas bloquant. Le script javascript continue son exécution après l’appel ajax. L’instruction qui suit l’appel ajax est exécutée sans attendre la réponse. La réponse sera traitée ultérieurement par une fonction callback définie par le développeur.

Mon navigateur supporte t-il AJAX XHR2 ?

Un simple test suffit pour vérifier le support ou non de XHR par votre navigateur.

if ( window.XMLHttpRequest ) {
  // le navigateur supporte xhr
  let xhr = new XMLHttpRequest();
} else {
  // le navigateur ne supporte pas xhr
  alert("Votre navigateur ne supporte pas l'objet XMLHttpRequest");
}

Comment faire un appel avec AJAX XHR2?

Tous les appels AJAX passent par le biais de l’objet javascript XMLHttpRequest dont il suffit de créer une instance.

let xhr = new XMLHttpRequest();

Après avoir instancié cet objet, indiquez l’url à appeler, la méthode d’appel de l’url (GET ou POST), ainsi que le mode d’appel asynchrone (true) ou synchrone (false). Le mode d’appel est optionnel avec une valeur par défaut fixée à true (asynchrone).

En javascript.

// xhr.open(methode, url, asynchrone|synchrone);
xhr.open("GET", "./script.php", true);

L’appel à proprement parlé se fait par le biais de la méthode send comme ceci.

xhr.send(null);

Le passage de paramètres avec GET

L’exemple ci-dessus est le cas nominal d’utilisation : appel GET sans passage de paramètres. Si vous souhaitez faire un appel à une url avec des paramètres, ajoutez les à l’url sous la forme.

http://serveurDuScript/nomDuScript?parametre1=valeur1¶metre2=valeur2&....¶metreN=valeurN

Par exemple avec 3 paramètres nommés ua, u et p, on spécifierait l’url comme ceci.

http://serveur/download/ws/userAgentCapacityWS.php?ua=blabla&u=blabla&p=blabla

Avec l’objet XMLHttpRequest.

xhr.open("GET", "http://serveur/download/ws/userAgentCapacityWS.php?ua=blabla&u=blabla&p=blabla", true);

Spécificité de la méthode POST

Si vous souhaitez utiliser la méthode POST. Spécifiez le type MIME avant l’appel de la méthode open comme ceci, sans quoi vous ne recevrez aucune réponse du serveur.

xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

Puis invoquez la méthode open et spécifiez POST en premier paramètre.

xhr.open("POST", url, true);

Le passage de paramètres est lui aussi différent de la méthode GET : il se fait par le biais de la méthode send comme ceci.

xhr.send("parametre1=valeur1&parametre2=valeur2&....&parametreN=valeurN");

Réception de la réponse ajax en mode asynchrone

L’objet XMLHttpRequest déclenche différents événements lors de l’appel ajax, libre à vous de les utiliser ou pas.

Cependant pour traiter une réponse, l’un d’eux est incontournable : l’évènement onload.
Cet événement pointe sur une fonction anonyme ou toute autre fonction nommée.

xhr.onload = function() {
  // traitement à réaliser
  // à réception de la réponse
}

Traitement de la réponse ajax en mode asynchrone

Lorsque l’appel ajax se déroule correctement, l’objet met à disposition du développeur la réponse par le biais de la propriété responseText.

Cette propriété constitue en général un flux XML ou un flux JSON qu’il ne vous reste plus qu’à traiter.

xhr.onload = function() {
  // traitement à réaliser
  // à réception de la réponse
  xhr.responseText;
}

La propriété responseText correspond au cas nominal de réception d’un flux text.

Cependant une particularité pour JSON . Le flux reçu est une chaîne de caractères qu’il faut transformer en objet JSON à l’aide de la méthode parse de l’objet JSON.

xhr.onload = function() {
  // traitement à réaliser
  // à réception de la réponse
  let objet = JSON.parse(xhr.responseText);
}

Il existe une autre manière de traiter un flux JSON que j’aborde dans le paragraphe suivant.

Les types de réponses possibles

L’objet XMLHttpRequest met à disposition la méthode responseType afin de spécifier le type de réponse attendu.

Lorsque le type de réponse n’est pas spécifié, sa valeur par défaut est text.

Plusieurs types de réponses sont possibles :
– text : réception d’une chaîne de caractères;
– json : réception d’un objet JSON;
– arraybuffer : réception d’un tableau de données;
– blob : réception d’un objet binaire comme par exemple un fichier;
– document.

Le flux de la réponse est alors accessible par le biais de la méthode response.

xhr.onload = function() {
  // traitement à réaliser
  // à réception de la réponse
  xhr.response;
}

Les autres évènements disponibles

L’objet XMLHttpRequest déclenche d’autres événements lors de l’appel ajax, libre à vous de les utiliser ou pas.

– onloadstart : déclenche au démarrage de l’appel ajax;
– onprogress : déclenche environ toutes les 50 ms pendant l’appel ajax;
– onabort : déclenche lorsque l’appel ajax est stoppé ou annulé;
– onerror : déclenche lorsque l’appel ajax a généré une erreur (boucle infinie, résolution DNS, ….) ;
– onload : déclenche lorsque l’appel ajax s’est déroulé correctement;
– ontimeout : déclenche lorsque le serveur ne renvoie pas de réponse complète au bout de la durée timeout spécifiée;
– onloadend : évènement déclenché après tous les autres et dans tous les cas que la requête ajax ait réussi ou pas.

Vous avez vu la requête javascript ajax XHR2. Il reste un autre domaine à aborder qui est le cross-domain objet d’un prochain article.

Requête javascript ajax XHR2