mediumFrontend

How do you make an AJAX request?

Q: How do you make an AJAX request?

**Core concept (TL;DR).** AJAX (Asynchronous JavaScript And XML) is the technique of exchanging data with a server **in the background** and updating the page without a full reload. The original API is XMLHttpRequest (XHR); the modern, Promise-based replacement is fetch , and libraries like Axios wrap either. Talk to the server in the background; update in place Page (JS) <

387 views

Understand the problem

Fundamental for understanding how web applications communicate with servers.

ajaxfetchxmlhttprequestapi

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

fetch (modern) vs XMLHttpRequest (legacy)

// Modern AJAX with fetch + async/await
async function loadUser(id) {
  const res = await fetch("/api/users/" + id);
  if (!res.ok) throw new Error("HTTP " + res.status);
  return res.json();
}

// The legacy equivalent with XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open("GET", "/api/users/1");
xhr.responseType = "json";
xhr.onload = () => { if (xhr.status === 200) console.log(xhr.response); };
xhr.onerror = () => console.error("network error");
xhr.send();

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

Tricky JavaScript Scenario #25: custom debounce with cancel method

Tricky JavaScript Scenario #39: MutationObserver tree monitoring