0Pricing
jQuery Academy · Leçon

Configuration efficace des requêtes AJAX

Découvrez les options complètes de .ajax(), notamment les types de données, les en-têtes, la mise en cache et les délais d’expiration, afin d’affiner vos requêtes asynchrones selon différents scénarios.

Configuration efficace des requêtes AJAX est une leçon jQuery Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage jQuery Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours jQuery Academy comprend 3 leçons au total.

Libérez la puissance de .ajax()

La méthode $.ajax() de jQuery est votre solution de référence pour effectuer des requêtes HTTP avec un contrôle total. Contrairement à des méthodes plus simples comme $.get() ou $.post(), $.ajax() vous permet d’ajuster précisément chaque aspect de votre requête.

Cette leçon explore ses nombreuses options, de la définition des types de données à la gestion de la mise en cache et des délais d’expiration, afin de créer des applications asynchrones robustes et efficaces.

Structure de base de .ajax()

À la base, $.ajax() reçoit un objet de paires clé-valeur représentant les options de configuration. La requête la plus simple nécessite uniquement une url.

Voici comment récupérer des données depuis une API :

$.ajax({
  url: "https://jsonplaceholder.typicode.com/posts/1"
}).done(function(data) {
  console.log("Fetched data:", data.title);
});

URL et méthode (type)

L’option url indique le point de terminaison de votre requête. L’option type (ou method dans les versions plus récentes de jQuery) définit la méthode HTTP, telle que GET, POST, PUT ou DELETE.

  • url : l’URL cible de la requête.
  • type : la méthode HTTP (par exemple, « GET » ou « POST »).
$.ajax({
  url: "/api/users",
  type: "POST"
});

Envoyer des données avec `data`

Utilisez l’option data pour envoyer des informations avec votre requête. Pour les requêtes GET, les données sont ajoutées à l’URL sous forme de paramètres de requête. Pour les requêtes POST, elles sont envoyées dans le corps de la requête.

Vous pouvez transmettre un objet simple, et jQuery le sérialisera pour vous.

$.ajax({
  url: "/api/save-item",
  type: "POST",
  data: {
    id: 123,
    name: "New Gadget"
  }
});

Réponse attendue : `dataType`

L’option dataType indique à jQuery quel type de données vous attendez du serveur (par exemple, "json", "xml", "html" ou "text"). Cela aide jQuery à analyser correctement la réponse.

Si cette option n’est pas indiquée, jQuery tente de la déduire du type MIME de la réponse.

$.ajax({
  url: "/api/products",
  dataType: "json"
});

En-têtes personnalisés : `headers`

L’option headers vous permet de définir des en-têtes HTTP personnalisés pour votre requête. Elle est essentielle pour des tâches comme l’authentification (par exemple, l’envoi d’une clé d’API) ou la spécification des types de contenu.

Transmettez un objet dont les clés sont les noms des en-têtes et les valeurs, leur contenu.

$.ajax({
  url: "/api/secure-data",
  headers: {
    "Authorization": "Bearer your_token",
    "X-Requested-With": "XMLHttpRequest"
  }
});

Contrôler la mise en cache : `cache`

Les navigateurs mettent souvent en cache les requêtes GET afin d’accélérer les chargements suivants. C’est pratique, mais vous aurez parfois besoin de données actualisées à chaque fois.

Définissez cache: false pour empêcher le navigateur de mettre la réponse en cache et garantir que votre requête récupère toujours les informations les plus récentes du serveur.

$.ajax({
  url: "/api/dynamic-content",
  cache: false
});

Limites des requêtes : `timeout`

Les requêtes de longue durée peuvent dégrader l’expérience utilisateur. L’option timeout vous permet de définir une durée maximale (en millisecondes) pour l’exécution de la requête.

Si la requête n’est pas terminée dans ce délai, elle est interrompue et la fonction de rappel .fail() est déclenchée.

$.ajax({
  url: "/api/slow-report",
  timeout: 8000 // 8 seconds
});

En direct : configuration AJAX avancée

Voyons un exemple complet combinant plusieurs options de $.ajax(). Cette requête récupère une tâche, indique que la réponse attendue est au format JSON, ajoute un en-tête personnalisé, désactive la mise en cache et définit un délai d’expiration.

Essayez de l’exécuter pour voir comment le paragraphe de sortie est mis à jour !

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Config Demo</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <h3>Check Console & Output:</h3>
  <p id="output">Fetching data...</p>
  <script>
    $(document).ready(function() {
      $.ajax({
        url: "https://jsonplaceholder.typicode.com/todos/1",
        type: "GET",
        dataType: "json",
        headers: {
          "X-App-ID": "CoddyKit-Demo"
        },
        cache: false,
        timeout: 7000 // 7 seconds
      })
      .done(function(data) {
        $("#output").html(
          "<b>Todo fetched!</b><br>ID: " + data.id + 
          "<br>Title: " + data.title
        );
        console.log("Success:", data);
      })
      .fail(function(jqXHR, textStatus, errorThrown) {
        $("#output").html(
          "<b>Request failed!</b><br>Status: " + textStatus + 
          "<br>Error: " + errorThrown
        );
        console.error("Error:", textStatus, errorThrown);
      })
      .always(function() {
        console.log("Request completed.");
      });
    });
  </script>
</body>
</html>

Vérification de la configuration AJAX

Imaginez que vous développiez une fonctionnalité permettant d’envoyer le nouveau commentaire d’un utilisateur à /api/comments. Il doit s’agir d’une requête POST, qui inclut commentText et userId, et qui attend en retour un objet JSON. De plus, pour garantir que le commentaire est toujours actualisé, vous voulez empêcher la mise en cache par le navigateur.

Quelles options $.ajax() parmi les suivantes sont essentielles dans ce scénario précis ?

Récapitulatif : configuration AJAX maîtrisée

Vous maîtrisez désormais l’art de configurer la méthode $.ajax() de jQuery !

  • Vous avez appris à définir l’url et le type HTTP.
  • À envoyer des données à l’aide de l’option data.
  • À définir le format de réponse attendu avec dataType.
  • À ajouter des headers HTTP personnalisés pour les cas d’utilisation avancés.
  • À contrôler la mise en cache du navigateur avec cache.
  • À définir des limites pour les requêtes lentes avec timeout.

Ces puissantes options vous permettent de créer des interactions asynchrones hautement personnalisées et fiables dans vos applications web.

Questions Fréquemment Posées

La leçon « Configuration efficace des requêtes AJAX » est-elle gratuite ?

Oui — le texte complet de « Configuration efficace des requêtes AJAX » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours jQuery Academy, passe à CoddyKit PRO. Le cours jQuery Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Configuration efficace des requêtes AJAX » ?

Découvrez les options complètes de .ajax(), notamment les types de données, les en-têtes, la mise en cache et les délais d’expiration, afin d’affiner vos requêtes asynchrones selon différents scénari… Tu pratiques jQuery Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer jQuery Academy ?

Aucune expérience préalable n'est requise. jQuery Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.

Combien de temps prend la leçon « Configuration efficace des requêtes AJAX » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon jQuery Academy ?

Oui. Chaque leçon jQuery Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Configuration efficace des requêtes AJAX
  2. Gestion des erreurs et des réussites AJAX
  3. AJAX interdomaines (CORS/JSONP)
← Retour à jQuery Academy