Initialement prévu pour travailler avec XML (d'où son nom), mais désormais majoritairement
utilisée avec du JSON
XHR
Principe de XHR
On crée une requête sous la forme d'un objet XHR
Requête HTTP a différents états (en cours, chargement, terminée, etc)
Objet XHR déclenche des évènements lors des changements d'état de la requête
On ajoute donc des capteurs d'évènements associés à des callbacks pour l'objet XHR
On envoie la requête
Les fonctions callbacks seront appelées en fonction des changements d'état de l'objet XHR
N.B. : la réponse n'est pas forcément du XML... et le protocole pas forcément
du HTTP.
Attention : il faut ajouter les listener avant de lancer la requête !
Évènements XHR
load : la requête est terminée (avec succès) et toute la réponse a été
reçue (on peut donc traiter la réponse)
error : la requête a échoué (par ex. erreur 404)
timeout : le temps maxi d'attente de la réponse est dépassé
abort : lorsque la requête est annulée
progress : évènement déclenché à intervalles réguliers pour avoir des infos sur
l'avancement du téléchargement de la réponse
loadend : la requête est terminée (quelle que soit l'issue, succès ou échec)
loadstart : le chargement des données commence
readystatechange : à chaque changement d'état de la requête (historique,
désormais inutile en général)
Ajax
Modèle classique du web comparé au modèle Ajax.
Source : Jesse James Garett
L'utilisation de XMLHttpRequest (XHR) permet un nouveau modèle des interactions client-serveur
Terme Ajax apparu début 2005 : Asynchronous Javascript and XML
Principe : au lieu d'être synchrone, la communication client-serveur est
asynchrone
Initialement pensé pour fonctionner avec XML, Ajax est devenu un terme générique qui
désigne l'ensemble des technologies nécessaires aux applications web asynchrones
Spécifier le type de réponse attendu requete.responseType = "type_de_réponse"
Envoyer la requête requete.send();
Traitement de la réponse
function traitementReponse(event) {
let req = event.currentTarget;
console.log(req.response);
}
Type de réponse
Préciser le type de la réponse attendu avant d'envoyer la requête requete.responseType = "type_de_réponse"
responseType détermine le format des données qui sera contenu
dans la propriété response
Valeur par défaut vide (format texte brut dans ce cas)
Types possibles :
text format texte brut (valeur "" aussi)
json format JSON qui sera parsé pour donner un objet Javascript
document format HTML ou XML qui sera parsé pour donner un arbre DOM (éventuellement partiel)
blob réponse donnera un objet Blob
arraybuffer réponse donnera un objet de type ArrayBuffer contenant les données binaires
Contenu de la réponse
Dans tous les cas, la réponse sera contenue dans la propriété response au format
défini par responseType (sauf erreur)
Attention le terme asynchrone implique qu'on ne peut pas savoir
quand la réponse arrivera (connexion lente, serveur saturé, etc), voir démos
Attention si le format est document alors la réponse est un objet de
type Document, on ne peut pas le mettre dans le DOM de la page.
On obtient l'élément racine avec requete.response.documentElement (valable pour du XML ou du HTML)
ou pour un document HTML son élément body avec requete.response.body
Note : pour des raisons de compatibilité antérieure il existe aussi des propriétés responseText
et responseXML qui sont obsolètes, ne pas les utiliser
Autres propriétés de XMLHttpRequest
status : le code HTTP renvoyé par la requête
statusText : la chaîne correspondant au code HTTP
overrideMimeType(String mimetype) : force le type MIME de la réponse
setRequestHeader(String header, String value) : en-tête HTTP à envoyer
// créer un objet formData à partir du formulaire
const data = new FormData(monFormulaire);
const request = new XMLHttpRequest();
request.open("POST", "/formHandler");
// il suffit d'envoyer l'objet formData créé à partir du formulaire
request.send(data);
XHR combiné à l'API File
permet d'envoyer des fichiers sur un serveur
Rien n'empêche également
d'utiliser les autres méthodes de HTTP, comme PUT et DELETE
