Legacy XMLHttpRequest (XHR) & ReadyStates

open(), send(), onreadystatechange, and the 5 readyState phases

« AJAX Fundamentals & The Asynchronous Web« Previous Modern Fetch API & Promises »Next »

Before the modern fetch() API, all asynchronous requests were orchestrated via the XMLHttpRequest (XHR) object.

The 5 readyState Phases of XHR

0: UNSENT: Client has been created, open() not called yet.

1: OPENED: open() has been invoked.

2: HEADERS_RECEIVED: send() called, response headers and status are available.

3: LOADING: Response body is being downloaded (responseText contains partial data).

4: DONE: The transfer operation is 100% complete.

Classic XMLHttpRequest Implementation

Try It Yourself »

const xhr = new XMLHttpRequest();

// Configure GET request
xhr.open("GET", "https://api.example.com/data", true);

// Listen to state transitions
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) { // DONE
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText);
      console.log("Success:", data);
    } else {
      console.error("HTTP Error:", xhr.status);
    }
  }
};

// Send the request
xhr.send();

XHR requires tracking readyState === 4 and status === 200 manually.

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

In XMLHttpRequest, which `readyState` value indicates that the request operation is fully completed?

« Previous: AJAX Fundamentals & The Asynchronous Web Next: Modern Fetch API & Promises »