HTTP Status Messages

Every time a browser loads a page, submits a form, or your JavaScript makes a fetch() call, the server answers with a three-digit HTTP status code. This code tells the client whether the request succeeded, was redirected, failed because of something the client did, or failed on the server side. The browser uses it automatically — it follows redirects, shows its own error page for some codes, and re-uses cached content for others — but as a developer you also read these codes directly: a form posts and you branch on the response, or a fetch() resolves and you check response.ok (which is simply "status in the 200–299 range").

Here you can find the list of Hypertext Transfer Protocol (HTTP) response status codes. These codes answer the request a client makes to a server — whether that request uses GET, POST, or another HTTP method — and they are grouped into 5 classes by their first digit. Knowing them helps you debug broken links, wrong URLs, failed form submissions, and unexpected API responses. Let’s go through each class:

Handling status codes in JavaScript

When you submit a form or call an API with fetch(), the request succeeds (the promise resolves) even when the server returns a 4xx or 5xx error — a 404 or 500 is still a valid HTTP response, not a network failure. So you must inspect the status yourself. The handy shortcut is response.ok, which is true only for the 200–299 range; for anything else you branch on response.status to react appropriately:

const form = document.querySelector("#signup");

form.addEventListener("submit", async (event) => {
  event.preventDefault();

  const response = await fetch("/api/signup", {
    method: "POST",
    body: new FormData(form),
  });

  if (response.ok) {
    // 200–299: success
    window.location.href = "/welcome";
  } else if (response.status === 401) {
    showMessage("Please log in first.");
  } else if (response.status === 422) {
    // Validation errors returned as JSON
    const data = await response.json();
    showMessage(data.error);
  } else if (response.status === 429) {
    // Rate limited — respect the Retry-After header
    const wait = response.headers.get("Retry-After");
    showMessage(`Too many attempts. Try again in ${wait}s.`);
  } else if (response.status >= 500) {
    showMessage("Server error — please try again later.");
  } else {
    showMessage(`Unexpected error (${response.status}).`);
  }
});

Note that fetch() only rejects on genuine network problems (no connection, CORS block, DNS failure), so wrapping the call in try…catch handles those, while the if/else above handles the HTTP status itself.

1xx: Information

2xx: Successful

3xx: Redirection

Codes not listed here (such as 305 and 306) are deprecated, rare, or extension-specific.

4xx: Client Error

Codes not listed here (such as 419, 420, and several in the 423–431 range) are rare, framework-specific, or non-standard. A few — like 421 (Misdirected Request, used in HTTP/2) and 451 above — are standardized but uncommon in everyday work.

5xx: Server Error

Related Chapters

The status a server returns often depends on the request itself. To go deeper, see:

• HTTP Methods — GET, POST, and friends, which determine how some redirects (302 vs 307) behave.
• HTML Forms — how form submissions trigger requests that may return 303, 422, or 429.
• HTML URL (Uniform Resource Locators) — the addresses that 3xx redirects and 404 responses point to.

Practice