De nos jours, les développeurs ont tendance à s'éloigner de jQuery et de ses méthodes pratiques pour la manipulation DOM et les requêtes Ajax qui l'ont rendu extrêmement populaire. En ce qui concerne les requêtes Ajax, Fetch API ou alternativement, bibliothèque Axios sont désormais des outils plus populaires pour effectuer des opérations asynchrones. Cela dit, jQuery est toujours bien vivant et gère près de 70 000 sites Web dans le monde. Cela signifie que savoir utiliser jQuery est toujours utile dans le travail quotidien des développeurs, comme la prise en charge de bases de code héritées ou la maintenance de projets qui utilisent jQuery comme une dépendance importante.

Ajax est une technologie qui permet aux développeurs pour effectuer des requêtes HTTP asynchrones sans avoir besoin d'une actualisation complète de la page. Pour rendre le processus moins lourd qu'il ne le serait en JavaScript pur, les développeurs utilisent la bibliothèque jQuery depuis des années. Dans mon article An Introduction to jQuery's Shorthand Ajax Methods j'ai discuté de quelques-unes des méthodes de raccourci Ajax les plus utilisées de jQuery: $. Get () $. Post () et $. Load () . Ce sont des méthodes pratiques pour effectuer des requêtes Ajax en quelques lignes de code.

Parfois, nous avons besoin de plus de contrôle sur les appels Ajax que nous voulons effectuer. Par exemple, nous voulons spécifier ce qui doit se produire en cas d'échec d'un appel Ajax ou si nous devons effectuer une demande Ajax, mais son résultat n'est nécessaire que s'il est récupéré dans un certain laps de temps. Dans de telles situations, nous pouvons compter sur une autre fonction fournie par jQuery, appelée $. Ajax () qui est le sujet de ce didacticiel.

Le $. Ajax () Fonction

La fonction jQuery $. Ajax () est utilisée pour effectuer une requête HTTP asynchrone. Il a été ajouté à la bibliothèque il y a longtemps, existant depuis la version 1.0. La fonction $. Ajax () est ce que chaque fonction discutée dans l'article mentionné précédemment appelle derrière la scène en utilisant une configuration prédéfinie. Les signatures de cette fonction sont indiquées ci-dessous:

 $. Ajax (url [, settings])
$ .ajax ([settings])

Le paramètre url est une chaîne contenant l'URL que vous souhaitez atteindre avec l'appel Ajax, tandis que settings est un littéral objet contenant la configuration de la demande Ajax.

Dans sa première forme, cette fonction exécute une requête Ajax en utilisant le paramètre url et les options spécifiées dans les paramètres . Dans le second formulaire, l'URL est spécifiée dans le paramètre settings ou peut être omise, auquel cas la demande est faite à la page en cours.

La liste des options acceptées par cette fonction, décrit dans la section suivante, est très long, donc je vais garder leur description courte. Si vous souhaitez étudier leur signification en profondeur, vous pouvez vous référer à la documentation officielle de $. Ajax () .

Les réglages Paramètre

Il y en a beaucoup de différentes options que vous pouvez spécifier pour plier $. ajax () à vos besoins. Dans la liste ci-dessous, vous pouvez trouver leurs noms et leur description triés par ordre alphabétique:

• accepte : Le type de contenu envoyé dans l'en-tête de la demande qui indique au serveur le type de réponse qu'il acceptera en retour.
• async : définissez cette option sur false pour effectuer une demande synchrone.
• beforeSend : fonction de rappel préalable à la demande qui peut être utilisée pour modifier le jqXHR objet avant son envoi.
• cache : définissez cette option sur false pour forcer les pages demandées à ne pas être mises en cache par le navigateur.
• complete : fonction à appeler lorsque la demande se termine (après succès et erreur les rappels sont exécutés).
• contents : objet qui détermine comment la bibliothèque analysera la réponse.
• contentType : type de contenu des données envoyées au serveur.
• contexte : un objet t o utiliser comme contexte ( this ) de tous les rappels liés à Ajax.
• convertisseurs : un objet contenant des convertisseurs dataType-to-dataType.
• crossDomain : définir cette propriété à true pour forcer une demande interdomaine (telle que JSONP) sur le même domaine.
• data : données à envoyer au serveur lors de l'exécution de la demande Ajax.
• dataFilter : fonction à utiliser pour gérer les données de réponse brutes de XMLHttpRequest.
• dataType : type de données attendues du serveur.
• error : fonction à appeler si la demande échoue.
• global : Indique s'il faut déclencher les gestionnaires d'événements Ajax globaux pour cette demande.
• headers : Un objet d'en-têtes supplémentaires à envoyer au serveur.
• ifModified : Définissez cette option sur true si vous souhaitez forcer la demande à aboutir uniquement si la réponse a changé depuis la dernière
• isLocal : définissez cette option sur true si vous souhaitez forcer jQuery à reconnaître l'environnement actuel comme "local".
• jsonp : une chaîne pour remplacer le nom de la fonction de rappel dans une demande JSONP.
• jsonpCallback : spécifie le nom de la fonction de rappel pour une demande JSONP.
• mimeType : chaîne spécifiant le type MIME pour remplacer le type MIME XHR. [19659015] mot de passe : mot de passe à utiliser avec XMLHttpRequest en réponse à une demande d'authentification d'accès HTTP.
• processData : définissez cette option sur false si vous ne voulez pas que les données soient transmises dans l'option données (si ce n'est déjà une chaîne) à traiter et à transformer en chaîne de requête.
• scriptAttrs : définit un objet avec des attributs supplémentaires à utiliser dans un "script" ou requête "jsonp".
• scriptCharset : définit l'attribut charset sur t La balise de script utilisée dans la demande mais s'applique uniquement lorsque le transport de «script» est utilisé.
• statusCode : Un objet de codes et fonctions HTTP numériques à appeler lorsque la réponse a le code correspondant.
• success : fonction à appeler en cas de réussite de la demande.
• timeout : nombre spécifiant un délai d'attente (en millisecondes) pour la demande.
• traditionnel : définissez-le sur true si vous souhaitez utiliser le style traditionnel de sérialisation des paramètres.
• type : type de demande à effectuer, qui peut être "POST" ou "GET".
• url : Chaîne contenant l'URL à laquelle la demande est envoyée.
• nom d'utilisateur : nom d'utilisateur à utiliser avec XMLHttpRequest en réponse à une demande d'authentification d'accès HTTP.
• xhr : rappel pour la création du Objet XMLHttpRequest.
• xhrFields : objet à définir sur l'objet XHR natif.

T la liste est assez longue, n'est-ce pas? Eh bien, en tant que développeur, vous avez probablement arrêté de lire cette liste au cinquième ou au sixième élément, je suppose, mais ça va. La section suivante sera plus excitante, car nous mettrons en action la fonction $. Ajax () et certaines de ces options.

Tout mettre ensemble

Dans cette section, nous ' Je vais voir cette fonction et certaines de ses options en action.

Un premier exemple de $. ajax ()

Nous allons commencer par une démonstration simple qui reproduit le même code que nous avons développé dans le article précédent, mais cette fois, nous adopterons $. ajax () . Le code dont je parle est présenté ci-dessous pour votre commodité:

 $ ('# main-menu a'). On ('click', function (event) {
  event.preventDefault ();

  $ ('# main'). load (this.href + '#main *', function (responseText, status) {
  if (status === 'success') {
    $ ('# notification-bar'). text ('La page a été chargée avec succès');
  } autre {
      $ ('# notification-bar'). text ('Une erreur s'est produite');
    }
  });
});

En mettant à jour cet extrait pour utiliser la fonction $. Ajax () nous obtenons le code ci-dessous:

 $ ('# main-menu a'). On ('click', function (un événement) {
  event.preventDefault ();

  $ .ajax (this.href, {
    succès: fonction (données) {
      $ ('# main'). html ($ (data) .find ('# main *'));
      $ ('# notification-bar'). text ('La page a été chargée avec succès');
},
    erreur: function () {
      $ ('# notification-bar'). text ('Une erreur s'est produite');
    }
  });
});

Ici, vous pouvez voir que j'ai utilisé la première forme de la fonction. J'ai spécifié l'URL à laquelle envoyer la demande en tant que premier paramètre, puis un objet de paramètres en tant que deuxième paramètre. Ce dernier profite de seulement deux des nombreuses propriétés discutées dans la section précédente – succès et erreur – pour spécifier ce qu'il faut faire en cas de succès ou d'échec de la demande respectivement. [19659057] Récupération d'une conversation à partir de Joind.in à l'aide de $. Ajax ()

Le deuxième exemple dont je veux parler crée une demande JSONP pour récupérer des informations à partir d'un service appelé Joind.in . Ce dernier est un site Web où les participants à l'événement peuvent laisser des commentaires sur un événement et ses sessions. Plus précisément, je vais créer un extrait de code qui, à l'aide de la fonction $. Ajax () récupère le titre et la description de mon exposé Front-end moderne avec les yeux d'un Développeur PHP .

Le code pour atteindre cet objectif est le suivant:

 $. Ajax ({
  url: «http://api.joind.in/v2.1/talks/10889»,
  Les données: {
    format: 'json'
  },
  erreur: function () {
    $ ('# info'). html ('
 Une erreur s'est produite 
');
  },
  dataType: 'jsonp',
  succès: fonction (données) {
    var $ title = $ ('
'). text (data.talks [0] .talk_title);
    var $ description = $ ('
'). text (data.talks [0] .talk_description);
    $ ('# info')
    .append ($ title)
    .append ($ description);
  },
  type: 'GET'
});

Dans l'extrait ci-dessus, j'ai utilisé plusieurs des propriétés énumérées ci-dessus. Tout d'abord, vous pouvez voir que j'utilise la deuxième forme de $. Ajax () qui me permet de spécifier l'URL à laquelle la demande est envoyée en tant que propriété ( url ) de l'objet littéral. Étant donné que l'API Joind.in accepte une demande JSONP, dans le code ci-dessus, je définis le type de demande que je souhaite utiliser en spécifiant la propriété dataType . Ensuite, j'ai utilisé la propriété data pour définir le type de format que je souhaite obtenir du serveur comme requis par l'API. Cependant, ce dernier requiert ces données dans le cadre de la chaîne de requête d'une demande GET. Par conséquent, je spécifie également le paramètre de propriété type GET comme valeur. Enfin, j'ai écrit un rappel d'erreur pour afficher un message en cas d'erreur, et un rappel de succès pour afficher le titre et la description de la conversation en cas de succès.

Une démonstration en direct de ce code est présentée ci-dessous:

Conclusion

Dans ce tutoriel, j'ai discuté de la plus puissante des fonctions Ajax offertes par jQuery, $. Ajax () . Il vous permet d'effectuer des demandes Ajax avec beaucoup de contrôle sur la façon dont la demande est envoyée au serveur et sur la façon dont la réponse est traitée. Grâce à cette fonction, vous disposez des outils dont vous avez besoin pour satisfaire toutes les exigences de votre projet au cas où aucune des fonctions sténographiques ne conviendrait bien.

Pour mieux comprendre le potentiel de cette fonction, je vous encourage à jouer avec les exemples de code et essayer de modifier le code pour utiliser d'autres options acceptées par le paramètre .

Si vous voulez en savoir plus sur JavaScript, consultez nos titres JavaScript sur SitePoint Premium . Amusez-vous bien!