Chapitre 11 – AJAX avec jQuery

1) AJAX : définition simple

AJAX est l’acronyme de Asynchronous JavaScript And XML. Historiquement, on utilisait parfois du XML, mais aujourd’hui, dans 95% des cas, on échange du JSON (plus simple à lire et à manipuler en JavaScript).

À retenir :

• La page reste affichée (pas de reload)
• JavaScript envoie une requête HTTP (GET/POST…)
• Le serveur répond (souvent en JSON)
• On met à jour une zone de la page (DOM) avec la réponse

2) Notions HTTP indispensables : URL, méthode, données, réponse

Une requête AJAX, c’est exactement comme quand ton navigateur charge une page, sauf que tu contrôles la requête depuis ton code.

3) Première requête : $.ajax() (méthode complète)

$.ajax() est la méthode la plus complète. Elle accepte un objet de configuration : URL, méthode, données, type attendu, callbacks...

$.ajax({
  url: 'data/users.json',
  method: 'GET',
  dataType: 'json',

  success: function(data) {
    console.log('Réponse :', data);
  },

  error: function(xhr, status, error) {
    console.error('AJAX error:', status, error);
  }
});

4) Méthodes simplifiées : $.get() et $.post()

jQuery propose des raccourcis pour les cas courants. C’est très pratique, mais tu as un peu moins d’options que $.ajax().

GET : récupérer des données

$.get('data/users.json', function(data){
  console.log('Users:', data);
}, 'json');

POST : envoyer des données

$.post('api/login.php', {
  email: 'test@mail.com',
  password: '1234'
}, function(resp){
  console.log('Réponse:', resp);
}, 'json');

5) Envoyer un formulaire (pattern pro)

Le scénario classique : tu intercepteras le submit, tu valides, puis tu envoies en AJAX. Pour envoyer facilement tous les champs, jQuery propose serialize().

<form id="contactForm">
  <label>Email</label>
  <input type="email" name="email" id="email">

  <label>Message</label>
  <textarea name="message" id="message"></textarea>

  <button type="submit" id="btn">Envoyer</button>
</form>

<p id="feedback"></p>

$(function(){
  $('#contactForm').on('submit', function(e){
    e.preventDefault();

    const $form = $(this);
    const $btn = $('#btn');
    const $feedback = $('#feedback');

    $btn.prop('disabled', true).text('Envoi...');
    $feedback.text('');

    $.ajax({
      url: 'api/contact.php',
      method: 'POST',
      data: $form.serialize(),
      dataType: 'json'
    })
    .done(function(resp){
      if(resp && resp.ok){
        $feedback.text(resp.message || 'Message envoyé.');
        $form[0].reset();
      } else {
        $feedback.text((resp && resp.message) ? resp.message : 'Erreur côté serveur.');
      }
    })
    .fail(function(){
      $feedback.text('Erreur réseau. Réessaye plus tard.');
    })
    .always(function(){
      $btn.prop('disabled', false).text('Envoyer');
    });
  });
});

6) Mettre à jour la page : afficher une liste depuis un JSON

Exemple simple : on récupère une liste d’utilisateurs, puis on construit une liste HTML.

<button id="loadUsers">Charger utilisateurs</button>
<ul id="users"></ul>

$(function(){
  $('#loadUsers').on('click', function(){
    $('#users').html('<li>Chargement...</li>');

    $.get('data/users.json', function(users){
      let html = '';
      for(const u of users){
        html += `<li>${u.name} (${u.email})</li>`;
      }
      $('#users').html(html);
    }, 'json')
    .fail(function(){
      $('#users').html('<li>Impossible de charger la liste.</li>');
    });
  });
});

7) Erreurs AJAX : comprendre et afficher correctement

Les erreurs les plus fréquentes :

• 404 : l’URL est mauvaise (fichier ou endpoint introuvable)
• 500 : erreur serveur (bug PHP/Node)
• CORS : API sur un autre domaine sans autorisation
• JSON invalide : le serveur renvoie du texte/HTML au lieu de JSON

$.ajax({
  url: 'api/data.php',
  method: 'GET',
  dataType: 'json'
})
.done(function(data){
  console.log('OK', data);
})
.fail(function(xhr, status, error){
  console.error('Status:', xhr.status);
  console.error('Texte:', xhr.responseText); // très utile pour déboguer
  console.error('Erreur:', error);
});

8) Bonnes pratiques (checklist)

• Toujours gérer le cas fail/error
• Afficher un état “chargement” (bouton désactivé, texte…)
• Ne jamais faire confiance aux données (validation côté serveur)
• Préférer JSON + templates (contrôle) plutôt qu’injecter du HTML non maîtrisé
• Tester hors-ligne (simulateur : couper internet) et erreurs serveur (500)

Exercice – Charger et filtrer une liste (AJAX)

1. Crée un champ de recherche #q et un bouton “Rechercher”.
2. Au clic, charge data/users.json via AJAX.
3. Affiche uniquement les utilisateurs dont le nom contient la recherche.
4. Bonus : afficher “Aucun résultat” si vide.

const q = String($('#q').val()).trim().toLowerCase();
const filtered = users.filter(u => u.name.toLowerCase().includes(q));

Résumé du chapitre

• AJAX = requêtes serveur sans rechargement de page
• $.ajax() : méthode complète, configurable
• $.get() / $.post() : raccourcis
• serialize() : envoyer un formulaire facilement
• Gérer done/fail/always et afficher un “loading”