What is AJAX and how does it work?

AJAX stands for Asynchronous JavaScript and XML. The name is a historical artifact — almost nobody sends XML any more — but the idea it describes is still how every modern web app works: the page talks to the server in the background and updates part of itself, instead of reloading.

Before AJAX, any new data meant a full navigation: the browser threw away the page, the server sent a new document, everything flashed. AJAX lets JavaScript issue an HTTP request, receive the response (today almost always JSON), and patch just the part of the DOM that changed. Infinite scroll, live search suggestions, and saving a form without leaving the page all rest on this.

The modern way: fetch()

async function loadUser(id) {
  const res = await fetch(`/api/users/${id}`);
  if (!res.ok) throw new Error(`Request failed: ${res.status}`);
  return res.json();
}

fetch() returns a promise, works naturally with async/await, and supports request cancellation through AbortController. One gotcha: it only rejects on network failure, so a 404 or 500 still resolves — you must check res.ok yourself.

The older way: XMLHttpRequest

const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/users/1");
xhr.onload = () => {
  if (xhr.status === 200) console.log(JSON.parse(xhr.responseText));
};
xhr.send();

XHR is callback-based and more verbose. It is still worth recognising in interviews and legacy code, and it remains the only option if you need upload progress events.

What to keep in mind

• Requests to another origin need CORS headers from that server.
• Because the URL does not change, you are responsible for updating history (history.pushState) if the view should be linkable.
• Users see nothing happen by default — show loading and error states, and keep the interface reachable for screen readers by announcing updates.