Comprendre AJAX en JavaScript : Le Guide Ultime

3 min readJul 10, 2024

Dans cet article, on va parler d’un sujet intéressant pour tous les développeurs web : AJAX en JavaScript.

Tu as probablement entendu ce terme circuler, mais qu’est-ce que c’est exactement ? Comment ça fonctionne et pourquoi l’utiliser ? Tout est dit dans cet article 👇🏼

Qu’est-ce qu’AJAX ?

AJAX signifie “Asynchronous JavaScript and XML”. En gros, c’est une technique qui permet à une page web de communiquer avec un serveur sans avoir à se recharger entièrement. Cela rend les interactions utilisateur beaucoup plus fluides et rapides. Imagine une barre de recherche qui affiche des suggestions en temps réel sans recharger la page. C’est grâce à AJAX !

Pourquoi utiliser AJAX ?

Dynamisme : Mets à jour des parties spécifiques de ta page sans recharger l’ensemble du site.
Performance : Économise de la bande passante et améliore la vitesse de ton application.
Expérience Utilisateur : Offre une navigation plus fluide et agréable à tes utilisateurs.

Comment ça marche ?

AJAX fonctionne principalement en utilisant l’objet XMLHttpRequest ou la méthode moderne fetch. Voici comment les utiliser.

Avec XMLHttpRequest

// Création de l'objet XMLHttpRequest
let xhr = new XMLHttpRequest();

// Configuration de la requête
xhr.open('GET', 'https://api.exemple.com/data', true);

// Quand la requête est terminée
xhr.onload = function() {
  if (xhr.status === 200) {
    let data = JSON.parse(xhr.responseText);
    console.log(data);
  } else {
    console.error('La requête a échoué.');
  }
};

// Envoi de la requête
xhr.send();

Avec fetch

// Envoi de la requête avec fetch
fetch('https://api.exemple.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Erreur réseau');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Il y a eu un problème avec la requête fetch :', error);
  });

Les composants clés d’AJAX

Requête HTTP : La demande envoyée au serveur (GET, POST, etc.).
Réponse HTTP : La réponse du serveur, souvent en JSON.
Asynchronicité : Les requêtes sont envoyées en arrière-plan sans interrompre l’utilisateur.

Exemple pratique

Imagine que tu as un formulaire où les utilisateurs peuvent soumettre leurs adresses e-mail. Tu veux vérifier si l’e-mail est déjà utilisé, sans recharger la page. Voici comment tu feras :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vérification d'Email avec AJAX</title>
</head>
<body>
  <form id="emailForm">
    <label for="email">Email: </label>
    <input type="email" id="email" name="email" required>
    <span id="emailStatus"></span>
    <button type="submit">Vérifier</button>
  </form>

  <script>
    document.getElementById('emailForm').addEventListener('submit', function(event) {
      event.preventDefault(); // Empêche le rechargement de la page

      let email = document.getElementById('email').value;

      fetch(`https://api.exemple.com/check-email?email=${email}`)
        .then(response => response.json())
        .then(data => {
          let status = document.getElementById('emailStatus');
          if (data.exists) {
            status.textContent = 'Email déjà utilisé';
            status.style.color = 'red';
          } else {
            status.textContent = 'Email disponible';
            status.style.color = 'green';
          }
        })
        .catch(error => {
          console.error('Erreur:', error);
        });
    });
  </script>
</body>
</html>

Ici, lorsque le formulaire est soumis, une requête fetch est envoyée pour vérifier si l'e-mail est déjà utilisé, et la réponse est affichée sans recharger la page.

Sécurité

Attention ! L’utilisation d’AJAX peut poser des problèmes de sécurité si les données ne sont pas correctement validées. Assure-toi de toujours de valider et de filtrer les données côté serveur.

Alternatives modernes à AJAX

Bien que XMLHttpRequest ait été révolutionnaire à son époque, il est maintenant quelque peu dépassé.

Les navigateurs modernes prennent en charge des API comme fetch, qui offrent une syntaxe plus simple et intuitive pour les requêtes HTTP asynchrones.

Fetch utilise des promesses, rendant la gestion des opérations asynchrones plus propre et plus facile, tout en intégrant mieux les normes web actuelles.

Conclusion

AJAX reste un outil puissant pour les développeurs web. Cependant, pour des projets modernes, utilise des solutions comme fetch.

Cela te permettra de bénéficier d'une syntaxe simplifiée, d'une meilleure compatibilité avec les normes web actuelles, et d'une gestion plus élégante des opérations asynchrones grâce aux promesses.

En utilisant fetch, tu peux rendre ton code plus clair et plus maintenable, tout en offrant une meilleure expérience utilisateur, j’espère que tu as appris quelque chose de plus, tchao 👋🏼.