Création de requêtes Ajax avec jQuery

Dans cette leçon, nous allons étudier la méthode jQuery $.ajax(), présenter ses options les plus courantes et créer une première requête Ajax grâce à elle puis nous discuterons des alternatives possibles à l’utilisation de cette méthode.

 

La méthode jQuery $.ajax()

La méthode jQuery $.ajax() est au coeur de la création de requêtes Ajax avec jQuery et il convient donc de bien comprendre comment elle fonctionne.

Cette méthode va prendre un objet de configuration en argument. Cet objet de configuration devra contenir toutes les instructions (ou “options”) dont jQuery a besoin pour compléter notre requête et notamment l’URL de la requête, le type de requête, le type de données attendues etc.

On va pouvoir passer un grand nombre d’options à $.ajax() afin de fournir des instructions plus ou moins spécifiques par rapport à notre requête. Les options les plus couramment utilisées sont les suivants :

• url : URL de la requête. Seule option strictement obligatoire ;
• method (valeur par défaut : GET) : Permet de préciser la méthode d’envoi de la requête (GET, POST ou plus rarement PUT, DELETE, etc.) ;
• dataType : Le type de données qu’on attend en réponse du serveur. Par défaut, jQuery examinera le type MIME de la réponse si aucun type de données n’est spécifié ;
• data : Contient les données à envoyer au serveur. Si ces données ne sont pas au format chaine de caractères, elles seront converties en chaine ;
• async (valeur par défaut : true) : Permet d’indiquer si la requête doit être renvoyée de manière asynchrone (true) ou synchrone (false) ;
• cache (valeur par défaut : true sauf si le type de données défini est script ou jsonp) : Permet d’indiquer s’il faut utiliser une réponse en cache si disponible (true) ou pas (false) ;
• beforeSend : Permet de définir des en-têtes personnalisées ;
• context : Permet de préciser le contexte dans lequel la ou les fonctions de rappel doivent être exécutées. Par défaut, le contexte est un objet représentant les réglages Ajax utilisés durant l’appel ;
• name : Nom d’utilisateur à utiliser dans le cas où une demande d’identification HTTP est faite ;
• password : Mot de passe à utiliser dans le cas où une demande d’identification HTTP est faite ;
• timeout : Délai d’attente en millisecondes avant de considérer la demande comme un échec.

Commençons par effectuer une requête GET relativement simple :

Une fois la requête envoyée, on va vouloir récupérer la réponse du serveur et prendre en charge les différents cas de succès ou d’échec de cette requête.

Ici, il faut savoir que la méthode $.ajax() retourne un objet jqXHR dont le comportement se rapproche d’un objet XMLHttpRequest et qui implémente l’interface Promise. Cela va nous permettre de chainer différents gestionnaires à une requête et notamment les gestionnaires done()fail() et always().

La méthode done() va généralement contenir une fonction de rappel qui sera exécutée si la requête aboutit. Cette fonction reçoit les données de réponse (converties en un objet JavaScript si le type de données est JSON),

La méthode fail() va également contenir une fonction de rappel qui sera exécutée si la requête n’aboutit pas.

Finalement, on passera une nouvelle fois une fonction de rappel à always() qui sera exécutée lorsque la requête est terminée, et ceci que ce soit un succès ou un échec.

See the Pen
Cours jQuery 5.2.1 by Pierre (@pierregiraud)
on CodePen.

 

Autres méthodes jQuery pour créer des requêtes

Les autres méthodes jQuery de création de requêtes ne sont qu’un sucre syntaxique : elles sont construites à partir de la méthode $.ajax() en prédéfinissant telle ou telle option selon la méthode.

En ce sens, elles sont donc beaucoup moins puissantes que la méthode de base $.ajax() car sont moins flexibles et possèdent moins d’options de configuration.

Ces méthodes peuvent cependant s’avérer plus rapide à utiliser dans le cas où on doit effectuer une requête sans option particulière et dans le cas où on ne se soucie pas de la gestion des erreurs, même si il reste généralement recommandé d’utiliser $.ajax().

Les méthodes à notre disposition sont les suivantes :

• $.get() : permet d’effectuer une requête GET à l’URL fournie ;
• $.post() : permet d’effectuer une requête POST à l’URL fournie ;
• $.getScript() : permet d’ajouter un script à une page ;
• $.getJSON() : permet d’effectuer une requête GET à l’URL fournie et demande à ce que du JSON soit renvoyé en réponse.

Ces méthodes vont pouvoir prendre les arguments suivants (dans l’ordre) :

• L’URL de la requête (obligatoire) ;
• Les données à envoyer au serveur sous forme d’objet ou de chaine (facultatif). Cet argument n’est pas valide pour $.getScript() ;
• Une fonction de rappel qui s’exécutera en cas de succès de la requête (facultatif). Cette fonction recevra la réponse du serveur ;
• Le type de données attendu du serveur (facultatif). Cet argument n’est pas valide pour $.getJSON().

See the Pen
Cours jQuery 5.2.2 by Pierre (@pierregiraud)
on CodePen.

Finalement, il existe une dernière méthode à connaitre qui est la méthode jQuery load(). Cette méthode permet de télécharger le code HTML d’une URL et de placer ce code dans une sélection d’éléments.

See the Pen
Cours jQuery 5.2.3 by Pierre (@pierregiraud)
on CodePen.