AJAX HOME

Modern Asynchronous JavaScript Tutorial

Learn how to make web pages dynamic and interactive by exchanging data with a server behind the scenes, without reloading the entire page. This tutorial focuses on modern techniques like the Fetch API, Promises, and async/await.

While traditionally known as AJAX (Asynchronous JavaScript and XML), modern practices heavily favor JSON over XML as the data format and the Fetch API over the older XMLHttpRequest object.

Interactive Examples in Every Chapter

Each chapter includes code examples demonstrating the concepts. You can adapt and run these examples in your own development environment.

Basic Fetch Example:

<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: The example above uses a public test API. Ensure you have internet access to try it.)

Start learning modern asynchronous JavaScript now!