AJAX Introduction

What AJAX actually stands for#

AJAX stands for Asynchronous JavaScript And XML. The name is a historical artifact — when Jesse James Garrett coined the term in 2005, XML was the assumed data format for the web. In practice, almost nobody sends XML anymore: modern AJAX requests use JSON almost exclusively, because it maps directly onto JavaScript objects and is far less verbose to parse and produce. The "X" stuck around in the name purely for historical reasons, the same way "CD" stuck around on a computer's "burn to disc" button long after most people stopped using discs.

So when someone today says "make an AJAX call," they mean: use JavaScript, running in the browser, to send an HTTP request to a server and update the page with the response — without reloading the whole page. The data format is almost always JSON.

The problem AJAX solved#

Before AJAX became common (roughly the early-to-mid 2000s), almost every interaction with a web page required a full page reload. Click a link, submit a form, vote on a poll — the browser threw away the entire current page, sent a request, and rendered a brand new HTML page from scratch, even if only a small part of the page actually changed.

Old model (classic form submit):
  1. User clicks "Vote"
  2. Browser submits a full HTML form -> new HTTP request
  3. Server renders an entire new HTML page
  4. Browser discards the old page and renders the new one
  5. Scroll position, unsaved form state, etc. are all lost

This was slow, wasteful (re-downloading the same header, navigation, and CSS on every click), and jarring for the user — the whole screen would flash and reset. Gmail and Google Maps were among the first mainstream applications to popularize a different model: use JavaScript to fetch just the data that changed, and update just the relevant part of the DOM.

AJAX model:
  1. User clicks "Vote"
  2. JavaScript sends a small HTTP request in the background
  3. Server responds with just the data that changed (e.g. a JSON count)
  4. JavaScript updates only the vote count element in the DOM
  5. Everything else on the page — scroll position, other form fields — is untouched

This is the foundation that every modern interactive web app is built on: single-page applications (SPAs), infinite-scrolling feeds, live search-as-you-type, autosaving forms, and real-time-feeling dashboards all rely on the same basic idea — JavaScript talking to a server in the background, and updating the page itself.

A conceptual example#

Imagine a page with a button that shows the current server time without reloading the page.

<button id="load-time">What time is it on the server?</button>
<p id="time-display"></p>

document.getElementById('load-time').addEventListener('click', async () => {
  const response = await fetch('/api/server-time');
  const data = await response.json();

  document.getElementById('time-display').textContent = data.time;
});

Clicking the button sends a request to /api/server-time in the background. The server responds with something like {"time": "2026-08-26T14:03:00Z"}, and the script drops that value into the <p> element — the rest of the page (scroll position, any other content, the URL in the address bar) never changes. This is AJAX in its simplest form: fetch data, update the DOM, no reload.

AJAX today#

The term "AJAX" is a bit old-fashioned now — most developers just say "fetch data" or "call the API" — but the underlying concept is more central to web development than ever. The rest of this track covers the modern tools for it in depth: the fetch() API, working with JSON payloads, and handling errors correctly.

Common mistakes#

• Assuming AJAX requires XML because of the name — in real-world code today it is almost always JSON.
• Thinking AJAX is a specific technology or library — it's a technique (asynchronous, in-page HTTP requests), implementable with plain fetch(), no framework required.
• Forgetting that "asynchronous" means the rest of your script keeps running while the request is in flight — code after a fetch() call (outside of await/.then()) does not wait for the response.

Interview questions#

Q: What does AJAX actually stand for, and is that still accurate? Asynchronous JavaScript And XML. The "asynchronous JavaScript" part is still exactly what it means today; the "XML" part is a historical holdover — virtually all modern AJAX requests exchange JSON, not XML.

Q: What core problem did AJAX solve for web applications? It eliminated the need for a full page reload on every user interaction. Before AJAX, even a small update (like a vote count or a form validation message) required the server to re-render and the browser to reload an entire HTML page. AJAX lets JavaScript request just the data that changed and update just the relevant part of the page.