Chapter 22: AJAX Introduction
introduction to AJAX, written as if I’m your patient teacher sitting next to you — explaining everything slowly, clearly, with many examples, analogies, historical context, modern reality, and code you can actually try.
We will go step by step so you really understand what AJAX is, why it was revolutionary, how it works, why the name is misleading today, and what people actually do in 2025–2026.
1. What is AJAX? (The simplest and most honest explanation)
AJAX stands for Asynchronous JavaScript and XML.
But the most important thing to understand right now is:
AJAX is not a new language or a library. AJAX is a technique / way of working that allows a web page to talk to a server and update itself without reloading the whole page.
Before AJAX (classic web ~1995–2004):
- Every time you clicked a link, submitted a form, or changed a page → full page reload
- The browser sent a request → server sent back a complete new HTML page → browser threw away the old page and showed the new one
- Very slow, very “jumpy”, bad user experience (especially on slow internet)
With AJAX (starting ~2005):
- JavaScript sends a background request to the server
- Server sends back only the needed data (not the whole page)
- JavaScript takes that data and updates only part of the current page
- No full reload → feels fast and smooth
Real-life analogy everyone understands:
Imagine you are reading a book (the web page).
- Without AJAX: Every time you want to know what happens next, you have to close the book, go to the library, get a new book, come back, and start reading again.
- With AJAX: You keep the same book open, just quietly send a friend to the library to bring you the next page, and you stick it into the book without closing it.
That’s the core idea.
2. Why is it called “XML” when almost nobody uses XML anymore?
The name AJAX was coined in 2005 by Jesse James Garrett.
At that time (2004–2007):
- Google Maps (2005) became famous for smooth zooming/panning without reloads
- Gmail, Google Suggest, Flickr, early Facebook features used this technique
- The most common data format being sent back from servers was XML
So people called it Asynchronous JavaScript and XML.
Reality in 2025–2026:
- 99% of new AJAX-style code uses JSON (not XML)
- The name AJAX stayed — even when people use fetch, axios, JSON, Promises, async/await…
- When someone says “AJAX call” today, they almost always mean “make an HTTP request in the background and update the page” — regardless of the data format.
So AJAX = background HTTP request + partial page update The “XML” part is mostly historical now.
3. The Two Main Technologies Behind AJAX
| Technology | Purpose | Modern replacement / status in 2025–2026 |
|---|---|---|
| XMLHttpRequest | The original way to make background requests | Still works, but rarely used directly |
| fetch API | Modern, Promise-based way to make requests | The standard way today |
Both can be used with XML, JSON, plain text, FormData, etc.
4. Classic AJAX with XMLHttpRequest – The Original Style
HTML + JavaScript example (We’ll load a small piece of data without reloading the page)
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>AJAX Introduction – Classic Example</title> <style> body { font-family: Arial, sans-serif; margin: 40px; } #result { margin-top: 20px; padding: 20px; background: #f8f9fa; border: 1px solid #ddd; border-radius: 8px; min-height: 100px; } button { padding: 10px 20px; font-size: 16px; margin-right: 10px; } </style> </head> <body> <h1>AJAX Introduction – Classic Style</h1> <p>Click the buttons below — notice the page does NOT reload!</p> <button onclick="loadMessage('hello')">Say Hello</button> <button onclick="loadMessage('time')">Get Server Time</button> <button onclick="loadMessage('random')">Random Quote</button> <div id="result">Click one of the buttons above…</div> <script> function loadMessage(type) { // 1. Create the request object const xhr = new XMLHttpRequest(); // 2. Configure it let url = ''; if (type === 'hello') url = 'https://api.example.com/hello'; if (type === 'time') url = 'https://api.example.com/time'; if (type === 'random') url = 'https://api.example.com/quote'; xhr.open('GET', url, true); // true = asynchronous // 3. What to do when we get a response xhr.onload = function () { if (xhr.status >= 200 && xhr.status < 300) { // Success document.getElementById('result').innerHTML = ` <strong>Server response:</strong><br> <pre>${xhr.responseText}</pre> `; } else { document.getElementById('result').innerHTML = `Error: ${xhr.status} ${xhr.statusText}`; } }; // 4. Handle network errors xhr.onerror = function () { document.getElementById('result').innerHTML = 'Network error – cannot reach server'; }; // 5. Send the request xhr.send(); } </script> </body> </html> |
What happens inside the browser:
- You click a button
- JavaScript creates XMLHttpRequest object
- xhr.open() prepares the request (method, URL, async=true)
- xhr.onload waits for response
- Server sends back text/JSON/XML
- JavaScript updates only the <div id=”result”> → No full page reload!
5. Modern AJAX – The Way You Should Write It Today (fetch + async/await)
Same example – modern style
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
async function loadMessage(type) { const resultDiv = document.getElementById('result'); resultDiv.innerHTML = 'Loading...'; try { let url = ''; if (type === 'hello') url = 'https://api.example.com/hello'; if (type === 'time') url = 'https://api.example.com/time'; if (type === 'random') url = 'https://api.example.com/quote'; const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: {response.status}`); } const text = await response.text(); // or .json() if JSON resultDiv.innerHTML = ` <strong>Server response:</strong><br> <pre>${text}</pre> `; } catch (error) { resultDiv.innerHTML = `Error: ${error.message}`; } } |
Why this is better:
- Cleaner syntax (no onreadystatechange)
- Promise-based → easy await
- Better error handling
- fetch is built into every modern browser
6. Quick Summary – AJAX Introduction Cheat Sheet
| Period | Dominant way | Data format | Main JavaScript API | Page reload? | User feeling |
|---|---|---|---|---|---|
| Before 2005 | Traditional web | HTML | Form submit, | Yes | Slow, jumpy |
| 2005–2015 (classic) | AJAX | Mostly XML | XMLHttpRequest | No | Magic, fast |
| 2015–2020 | AJAX + JSON | JSON | XMLHttpRequest + jQuery | No | Normal |
| 2020–2026 (modern) | AJAX-style (but we say fetch) | JSON | fetch + async/await | No | Expected, smooth |
Most important sentence:
Today when people say “AJAX”, they usually mean any background HTTP request that updates the page without reloading — even when using JSON, fetch, axios, or any other method.
Would you like to continue with one of these next?
- Making a real AJAX call to a free public API (JSON example)
- Handling XML response in modern code (when forced to)
- POST request with form data (very common pattern)
- Loading indicator, error handling, caching patterns
- Difference between XMLHttpRequest vs fetch vs axios
- How Google Maps / Gmail used AJAX in the beginning
Just tell me what you want to explore more deeply! 😊
