AJAX

Asynchronous JavaScript and XML

Pronunciation: AY-jaks

Updated October 3, 20262 min read

In short

AJAX (Asynchronous JavaScript and XML) is a technique for loading server data in the background with JavaScript and updating part of a page without a reload.

What is AJAX?

Early web pages had to reload completely whenever they needed new data: submit a form, wait, get a whole new page. AJAX changed that. JavaScript sends a request in the background, the user keeps working, and when the response arrives the script updates just the part of the page that changed, such as a list of search suggestions or new messages in an inbox.

The name was coined by Jesse James Garrett in 2005, describing how applications such as Gmail and Google Maps felt like desktop software. The underlying browser feature, XMLHttpRequest, had appeared a few years earlier. Despite the X in the name, today's AJAX requests almost always carry JSON rather than XML.

Modern code uses the Fetch API instead of XMLHttpRequest: fetch(url) returns a promise, which fits naturally with async and await. Libraries and frameworks build on it, and single-page applications are, in effect, AJAX all the way down: the page loads once and then talks to an API for everything else.

A common misconception is that AJAX is a library or a separate technology. It is a pattern built from standard pieces: JavaScript, an HTTP request made in the background and DOM updates. Requests to another domain still follow the browser's same-origin rules, so the server must allow them with CORS.

Key takeaways

AJAX loads data in the background and updates part of the page.
The term dates from 2005; XMLHttpRequest came earlier.
Today's requests usually carry JSON, not XML.
Modern code uses the Fetch API with promises and async/await.
Cross-origin AJAX requests need the server to allow them with CORS.

Example

Loading search suggestions without a page reloadjavascript

const input = document.querySelector("#search");
const list = document.querySelector("#suggestions");

input.addEventListener("input", async () => {
  const response = await fetch(`/api/suggest?q=${encodeURIComponent(input.value)}`);
  const suggestions = await response.json();   // JSON, not XML

  // Update just this part of the page
  list.replaceChildren(
    ...suggestions.map((text) => Object.assign(document.createElement("li"), { textContent: text })),
  );
});

Readers ask

Is AJAX still used?

The technique is everywhere, though the name is used less. Every page that loads data with fetch and updates itself without a reload is doing AJAX.

What is the difference between AJAX and fetch?

AJAX is the general technique. The Fetch API is the modern browser function for making the background request, replacing the older XMLHttpRequest object.

Does AJAX have to use XML?

No. XML was common when the name was coined, but almost all AJAX requests today send and receive JSON, and they can carry any format, including plain text and HTML.