Faire une requête javascript ajax XHR2

 

En surfant sur le web, vous avez du voir 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.

Mais parfois, un clic sur un bouton ou lien renvoie vers la même page que celle du clic à quelques différences près comme 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 vais vous montrer comment modifier une page web en ajoutant, modifiant ou supprimant certains de ses éléments. Tout ça sans la rafraîchir complètement en utilisant l’objet javascript XMLHttpRequest dans sa version 2.


 

AJAX c’est quoi ?

AJAX est l’acronyme de Asynchronous Javascript and XML.
AJAX permet de modifier une page web sans la rafraichir entièrement rendant ainsi l’expérience utilisateur plus agréable.
AJAX permet des appels à 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 devenant de plus en plus la norme.

 

Synchrone, asynchrone quelle différence ?

Un appel synchrone est dit bloquant : le script javascript attend la réponse de l’url spécifiée dans l’appel ajax. L’instruction qui suit l’appel ajax ne sera 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 XHR2 ?

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

if ( window.XMLHttpRequest ) {
  // le navigateur supporte xhr
  var 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 ?

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

var xhr = new XMLHttpRequest();

Après avoir instancié cet objet, il faut lui indiquer 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, il suffit de les ajouter à l’url sous la forme :

http://serveurDuScript/nomDuScript?parametre1=valeur1&parametre2=valeur2&....&parametreN=valeurN

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

http://www.developper-jeux-video.com/download/ws/userAgentCapacityWS.php?ua=blabla&u=blabla&p=blabla

Avec l’objet XMLHttpRequest :

xhr.open("GET", "http://www.developper-jeux-video.com/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 : il est nécessaire de spécifier 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 d’invoquer la méthode open en spécifiant 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 peut pointer 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 s’est correctement déroulé, 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 va vous falloir transformé en objet JSON à l’aide dela méthode parse de l’objet JSON :

xhr.onload = function() {
  // traitement à réaliser
  // à réception de la réponse
  var 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éclenché au démarrage de l’appel ajax;
onprogress : déclenché environ toutes les 50 ms pendant l’appel ajax;
onabort : déclenché lorsque l’appel ajax est stoppé ou annulé;
onerror : déclenché lorsque l’appel ajax a généré une erreur (boucle infinie, résolution DNS, ….) ;
onload : déclenché lorsque l’appel ajax s’est déroulé correctement;
ontimeout : déclenché lorsque le serveur n’a pas renvoyée 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.

 
Il reste un autre domaine à aborder qui est le cross-domaine objet d’un prochain article.

 
Si vous souhaitez en voir une application concrète, je vous invite à lire l’article Différencier un PC, d’un smartphone et/ou d’une tablette

 

Si vous constatez des coquilles, ou avez des remarques à faire ou des améliorations à proposer ou encore souhaitez manifester votre satisfaction de ce tuto, n’hésitez pas les commentaires sont faits pour ça.

 

Posté dans html5Taggé ajax, ajax crossdomain, Asynchronous Javascript and XML, javascript, xhr2, XMLHttpRequest  |  2 commentaires

2 réponses à "Faire une requête javascript ajax XHR2"

Répondre