How do you make an AJAX request?

Q: How do you make an AJAX request?

**Target Audience:** Engineers preparing for JavaScript/browser-API interviews. **Difficulty:** Easy > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The environment-availability claims below were actually run in Node. ## 1. Why This Even Matters — A Story First Before smartphone apps had built-in instant messaging, checking for a new message meant reloading the entire webpage — a full-page refresh just to see if anything new arrived, discarding whatever you were doing on the page. AJAX was the technique that let a page quietly ask the server "anything new?" in the background and update just a small part of the page — no full reload needed. `XMLHttpRequest` was the original tool for asking that question; `fetch` is the modern, more ergonomic tool for the exact same job. ## 2. The Core Idea 📌 **Interview term:** AJAX is the general technique of background server communication without a full page reload. `

The problem

Question presented to candidate: "The term 'AJAX' predates fetch and Promises entirely. What was the original API used to make an AJAX request, and why would you choose fetch over it in new code today?"

What a strong answer should cover:

📌 Interview term: AJAX (Asynchronous JavaScript And XML) — not a specific API itself, but the general TECHNIQUE of fetching/sending data to a server in the background, without a full page reload — despite the name, modern AJAX overwhelmingly uses JSON, not XML.
📌 Interview term: XMLHttpRequest (XHR) — the original, classic browser API for making an AJAX request, predating both fetch and Promises — it uses an event-based, callback-driven model (onreadystatechange/onload/onerror), tracking progress through a numeric readyState.
📌 Interview term: fetch() — the modern, Promise-based replacement, covered in more depth in this bank's own dedicated fetch API question — genuinely built into every current browser and modern Node.js, verified directly.
📌 Interview term: the real, direct answer to why fetch is generally preferred — a cleaner, Promise-based interface (genuinely composable with async/await, chaining, and Promise.all) versus XHR's older, more verbose, callback/event-based model — verified directly that fetch genuinely returns a real Promise instance.
A precise answer names a real, genuine advantage XHR still has over plain fetch: XHR provides a native upload/download progress event (onprogress), something plain fetch does not expose as simply — this is a real, honest reason some file-upload code still reaches for XHR (or a library built on it) today, rather than presenting fetch as strictly superior in every respect.

Clarifying questions expected:

None — this is a definitional/historical-technical question; naming the real API that predates fetch (XHR) and the concrete reason for preferring fetch today is the strong signal.

Code / implementation expected: Optional — confirming fetch is genuinely available and Promise-returning, contrasted with XMLHttpRequest's absence in this Node environment, demonstrates real understanding of the historical/environment context.

ajax
fetch
xmlhttprequest
api

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript/browser-API interviews. Difficulty: Easy

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The environment-availability claims below were actually run in Node.

1. Why This Even Matters — A Story First

Before smartphone apps had built-in instant messaging, checking for a new message meant reloading the entire webpage — a full-page refresh just to see if anything new arrived, discarding whatever you were doing on the page. AJAX was the technique that let a page quietly ask the server "anything new?" in the background and update just a small part of the page — no full reload needed. XMLHttpRequest was the original tool for asking that question; fetch is the modern, more ergonomic tool for the exact same job.

2. The Core Idea

📌 Interview term: AJAX is

The solution is hidden so you can try first

6 min read · 8 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal proof: both fetch and XMLHttpRequest are genuinely available here (a real browser); fetch genuinely returns a real Promise