C-Introduction à l’Ajax en JavaScript

“L’AJAX” ou plutôt “l’Ajax” est aujourd’hui un terme générique utilisé pour désigner toute technique côté client (côté navigateur) permettant d’envoyer et de récupérer des données depuis un serveur et de mettre à jour dynamiquement le DOM sans nécessiter l’actualisation complète de la page.

L’AJAX permet d’envoyer et récupérer des données d’un serveur de manière asynchrone (en arrière-plan) sans interférer avec l’affichage et le comportement de la page existante. Grosso-modo, l’AJAX nous permet de modifier de manière dynamique le contenu d’une page, c’est-à-dire sans qu’il soit nécessaire de recharger l’intégralité de la page.

A sa création, l’AJAX utilisait les technologies suivantes qui lui ont donné son nom :

Le XML pour l’échange de données avec le serveur ;
L’objet XMLHttpRequest pour la communication asynchrone ;
Le JavaScript pour afficher les données de manière dynamique et permettre à l’utilisateur d’interagir avec les nouvelles informations ;
Le HTML et le CSS pour la présentation des données.

Aujourd’hui, le XML a été largement délaissé au profit du JSON (JavaScript Object Notation) qui est une notation qui permet d’échanger des données relativement simplement tandis que l’objet XMLHttpRequest est lentement en train de laisser sa place à la nouvelle API Fetch.

L’objet XMLHttpRequest et l’API Fetch

L’objet XMLHttpRequest a longtemps été, et est toujours dans une certaine mesure, au cœur de l’AJAX. C’est cet objet qui permet le dialogue asynchrone (c’est-à-dire l’échange de données en arrière-plan) avec le serveur.

Pour être tout à fait précis, l’objet XMLHttpRequest est un objet navigateur prédéfini (un objet disponible dans tous les navigateurs par défaut) qui nous permet d’effectuer des requêtes HTTP en utilisant du JavaScript.

Cet objet est cependant aujourd’hui délaissé au profit de l’API et de la méthode fetch() par la plupart des applications modernes car cette dernière est jugée plus puissante et plus intuitive à utiliser.

La méthode fetch () utilise en effet les dernières technologies JavaScript et notamment les promesses. Cependant, il reste encore des choses que XMLHttpRequest peut faire et que fetch () ne peut pas faire.

Comme les deux restent utilisés aujourd’hui, nous les présenterons et étudierons de manière équitable, en commençant avec XMLHttpRequest et en finissant avec l’API Fetch.

Créer des requêtes Ajax en utilisant l’objet XMLHttpRequest en JavaScript

L’objet XMLHttpRequest est un objet prédéfini, disponible dans tous les navigateurs et qui nous permet de faire des requêtes HTTP en JavaScript.

Dans cette partie, nous allons apprendre à envoyer et récupérer des données de manière asynchrone depuis un serveur, à suivre l’avancement de la tâche, etc.

· Créer une première requête Ajax

Pour effectuer une requête asynchrone au serveur en utilisant l’objet XMLHttpRequest, nous allons toujours devoir suivre 4 étapes :

On crée un objet XMLHttpRequest ;
On initialise notre requête, c’est à dire on choisit le mode d’envoi des données, l’URL à demander, etc. ;
On envoie la requête ;
On crée des gestionnaires d’événements pour prendre en charge la réponse du serveur.

Pour créer un objet XMLHttpRequest, nous allons utiliser le constructeur XMLHttpRequest () avec la syntaxe classique new XMLHttpRequest ().

Ensuite, pour initialiser notre requête, nous allons utiliser la méthode open () de XMLHttpRequest. On va pouvoir passer 2, 3, 4 ou 5 arguments à cette méthode :

Le premier argument (obligatoire) correspond au type de méthode de requête HTTP à utiliser. On va pouvoir choisir entre GET, POST, PUT, DELETE, etc. Dans la grande majorité des cas, on choisira GET ou POST.

Le deuxième argument (obligatoire) représente l’URL de destination de la requête, c’est-à-dire l’URL où on souhaite envoyer notre requête.

Le troisième argument (facultatif) est un booléen indiquant si la requête doit être faite de manière asynchrone ou pas. La valeur par défaut est true.

Les quatrième et cinquième arguments (facultatifs) permettent de préciser un nom d’utilisateur et un mot de passe dans un but d’authentification.

Une fois notre requête initialisée ou configurée grâce à open (), on va spécifier le format dans lequel le serveur doit nous renvoyer sa réponse en passant ce format en valeur de la propriété responseType de notre objet XMLHttpRequest. Les valeurs possibles sont les suivantes :

« » (chaine de caractères vide) : valeur par défaut; demande au serveur de renvoyer sa réponse sous forme de chaine de caractères ;
« text » : demande au serveur de renvoyer sa réponse sous forme de chaine de caractères ;
« arraybuffer » : demande au serveur de renvoyer sa réponse sous forme d’objet ArrayBuffer ;
« blob » : demande au serveur de renvoyer sa réponse sous forme d’objet Blob ;
« document » : demande au serveur de renvoyer sa réponse sous forme de document XML ;
« json » : demande au serveur de renvoyer sa réponse sous forme JSON.

Dans la majorité des cas, on demandera au serveur de nous renvoyer des données sous forme JSON (elles seront alors interprétées automatiquement) ou texte.

Une fois qu’on a défini le format de la réponse, nous allons pouvoir envoyer notre requête. Pour cela, nous allons utiliser la méthode send () de XMLHttpRequest.

Cette méthode ouvre la connexion avec le serveur et lui envoie la requête. On peut lui passer le corps de la requête en argument facultatif.

· Prendre en charge la réponse renvoyée par le serveur

Une fois notre requête envoyée, nous allons devoir réceptionner la réponse du serveur. Pour connaitre l’état d’avancement de notre requête, nous avons deux options.

Au sein du gestionnaire d’événement load, on va déjà vouloir tester la valeur du statut code HTTP pour savoir si notre requête a bien abouti ou pas. Pour cela, nous allons observer la valeur de la propriété status de l’objet XMLHttpRequest.

Les statuts code HTTP les plus fréquents sont les suivants :

100 Continue : tout fonctionne jusqu’à présent; le client devrait continuer avec la requête ;
200 OK : Les requête a été un succès ;
301 Moved Permanently : L’identifiant de ressource unique (URI) relatif à la ressource demandée a changé de localisation de façon permanente ;
302 Found : L’identifiant de ressource unique (URI) relatif à la ressource demandée a changé de localisation de façon temporaire ;
304 Not Modified : Indique au client que la réponse n’a pas été modifiée depuis le dernier accès et qu’il peut utilisée la version en cache ;
401 Unauthorized : Indique que le client doit s’identifier s’il veut accéder à la réponse ;
403 Forbidden : Indique que le client n’a pas l’autorisation d’accéder à ce contenu ;
404 Not Found : Le serveur n’a pas pu trouver la ressource demandée ;
500 Internal Server Error : Le serveur a rencontré une situation qu’il ne peut pas gérer.

Ici, on va généralement tester si le statut code de notre réponse est bien égal à 200 en testant donc si la propriété status contient bien cette valeur. Si c’est le cas, on va pouvoir manipuler les données envoyées par le serveur.

Pour accéder à ces données, on va pouvoir utiliser la propriété response de l’objet XMLHttpRequest qui contient la réponse du serveur sous le format précisé par reponseType lors de l’envoi de la requête.

· Utiliser la propriété readyState et le gestionnaire onreadystatechange

Une autre méthode consiste à observer la valeur de la propriété readyState de l’objet XMLHttpRequest pour déterminer l’état d’avancement de la requête.

Pour information, les valeurs possibles de readyState sont les suivantes :

Valeur	Etat	Description
0	UNSENT	Le client a été créé mais open() n’a pas encore été appelée
1	OPENED	open() a été appelée
2	HEADERS_RECEIVED	send() a été appelée et l’en-tête et le statut sont disponibles
3	LOADING	Les données sont en train d’être téléchargées
4	DONE	L’opération est complète

Si on choisit d’utiliser readyState pour suivre l’avancement de notre requête, on va alors utiliser un gestionnaire d’événement onreadystatechange qui va être appelé dès que la valeur de readyState change.

On passe une fonction anonyme à ce gestionnaire pour gérer la réponse. Dans cette fonction anonyme, on teste déjà que la valeur de readyState est bien égale à 4 ou à DONE. Cela signifie qu’on a reçu la réponse du serveur dans son intégralité et qu’on va donc pouvoir l’exploiter.

Ensuite, on teste la valeur du statut code de la réponse HTTP en observant la valeur de la propriété status de l’objet XMLHttpRequest pour savoir si notre requête est un succès ou pas.

· Liste des propriétés et méthodes de l’objet XMLHttpRequest

Pour information, vous pourrez trouver ci-dessous un récapitulatif des propriétés et des méthodes de l’objet XMLHttpRequest ainsi qu’une rapide description.

Les propriétés de l’objet XMLHttpRequest

readyState = retourne un entier entre 0 et 4 qui correspond à l’état de la requête ;
onreadystatechange = gestionnaire d’événements appelé lorsque la valeur de readyState change ;
responseType = chaine de caractères précisant le type de données contenues dans la réponse ;
response = renvoie un objet JavaScript, ArrayBuffer, Blob, Document ou DOMString, selon la valeur de responseType, qui contient le corps de la réponse ;
responseText = retourne un DOMString qui contient la réponse serveur sous forme de texte ou null si la requête a échoué ;
responseURL = retourne une URL sérialisée de la réponse serveur ou la chaine de caractères vide si l’URL est null ;
responseXML = retourne un Document qui contient la réponse serveur ou null si la requête a échoué ;
status = retourne de statut code HTTP de la réponse ;
statusText = retourne un DOMString contenant la réponse complète HTTP (statut code + texte de la réponse) ;
timeout = représente le nombre de millisecondes accordées à un requête avant qu’elle ne soit automatiquement close ;
ontimeout = gestionnaire d’événements appelé lorsque la requête dépasse le temps accordé par timeout ;
upload = objet XMLHttpRequestUpload représentant la progression du téléchargement ;
withCredentials = booléen représentant si les requêtes d’accès et de contrôle cross-sites doivent être faites en utilisant des informations d’identification telles que les cookies ou les en-têtes d’autorisation.

Les méthodes de l’objet XMLHttpRequest

open() = initialise une requête en JavaScript ;
send() = envoie une requête asynchrone par défaut ;
abort() = abandonne la requête si celle-ci a déjà été envoyée ;
setRequestHeader() = définit la valeur de l’en-tête HTTP de la requête ;
getResponseHeader() = retourne la chaine de caractère contenant le texte de l’en-tête de la réponse spécifié ou null si la réponse n’a pas été reçue ;
getAllResponseHeaders() = retourne la réponse de tous les en-têtes ou null si aucune réponse n’a été reçue ;
overrideMimeType() = surcharge le type MIME retourné par le serveur.

Retour Plan cours

Pages : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21