Accueil AJAX

Tutoriel JavaScript Asynchrone Moderne

Apprenez à rendre les pages web dynamiques et interactives en échangeant des données avec un serveur en arrière-plan, sans recharger la page entière. Ce tutoriel se concentre sur les techniques modernes telles que l’API Fetch, les Promesses et async/await.

Bien que traditionnellement connu sous le nom d’AJAX (Asynchronous JavaScript and XML), les pratiques modernes privilégient fortement le JSON à la place du XML comme format de données et l’API Fetch au lieu de l’ancien objet XMLHttpRequest.

Exemples Interactifs dans Chaque Chapitre

Chaque chapitre contient des exemples de code illustrant les concepts. Vous pouvez adapter et exécuter ces exemples dans votre propre environnement de développement.

Exemple basique de Fetch :

<button id="fetchBtn">Fetch Data</button>
<div id="output">Click button to load data...</div>

<script>
  document.getElementById('fetchBtn').addEventListener('click', async () => {
    const outputDiv = document.getElementById('output');
    outputDiv.textContent = 'Loading...';
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos/1'); // Example API
      if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
      const data = await response.json();
      outputDiv.textContent = `Fetched Title: ${data.title}`;
    } catch (error) {
      outputDiv.textContent = `Error: ${error.message}`;
      console.error('Fetch error:', error);
    }
  });
</script>

(Note : L’exemple ci-dessus utilise une API de test publique. Assurez-vous d’avoir un accès à internet pour l’essayer.)

Commencez dès maintenant à apprendre le JavaScript asynchrone moderne !