JS AJAX Response

Once an AJAX request completes, the response needs to be read in the correct format -- plain text, JSON, or occasionally XML -- and the response's status and headers checked before trusting its contents, since a completed request is not automatically a successful one.

In this page:

Reading a JSON Response
Checking response.ok and Status
Reading Text and Other Response Formats
Reading Response Headers
The Response Body Can Only Be Read Once

Syntax

javascript

xhr.responseText
xhr.responseXML
xhr.status
xhr.getResponseHeader("name");

Reading a JSON Response

response.json() parses the response body as JSON and returns a Promise resolving to the parsed JavaScript value -- the most common way to read structured API responses, since most modern APIs return JSON by default.

Note: Always await or .then() the result of response.json(), since parsing the body is itself an asynchronous operation, not an instant synchronous one.

Warning: Calling response.json() on a response whose body is not actually valid JSON (like an HTML error page from the server) throws an error rather than returning something usable.

उदाहरण: Reading a JSON Response

javascript

// Define the method `fetch` taking `"data.php"`
// Define the method `fetch` taking `"data.php"`
fetch("data.php")
  // On success, run this with the resolved value as `response`
  // On success, run this with the resolved value as `response`
  .then(response => response.json())
  // On success, run this with the resolved value as `data`
  // On success, run this with the resolved value as `data`
  .then(data => console.log(data));

Checking response.ok and Status

response.ok is a boolean, true only when the HTTP status is in the 200-299 range -- checking it (or response.status directly) is essential, since fetch's promise resolves normally even for a 404 or 500 response, unlike what you might expect from a "failed" request.

Note: Check response.ok immediately after the fetch resolves, before attempting to parse the body, so a failed request is caught early rather than producing a confusing parse error later.

Warning: Assuming a resolved fetch promise always means success is one of the most common fetch-related bugs -- an HTTP error status still resolves the promise successfully.

उदाहरण: Checking response.ok and Status

javascript

fetch("data.php").then(response => {
  console.log(response.ok, response.status); // check before trusting the data
  return response.json();
});

Reading Text and Other Response Formats

response.text() reads the body as a plain string, useful for HTML fragments or plain-text responses, while response.blob() reads binary data (like an image or file), each returning a Promise, exactly like response.json().

Note: Match the response-reading method to the actual content the server sends -- .text() for plain text or HTML, .json() for JSON, .blob() for binary files.

Warning: Calling the wrong parsing method for the actual response format (like .json() on a plain-text response) produces unhelpful errors or garbled data.

उदाहरण: Reading Text and Other Response Formats

javascript

fetch("data.php").then(response => response.text()).then(text => console.log(text));

Reading Response Headers

response.headers.get(headerName) reads a specific header from the response, useful for metadata a server sends alongside the body -- like Content-Type to confirm the format, or custom pagination headers indicating how many total results exist.

Note: Use response.headers.get() to read metadata the server intentionally provides outside the body, rather than trying to encode everything into the response body itself.

Warning: Header names are case-insensitive when reading with .get(), but this is easy to forget when debugging a header that seems to be missing.

उदाहरण: Reading Response Headers

javascript

fetch("data.php").then(response => {
  // Print `response.headers.get("Content-Type")` to the console
  // Print `response.headers.get("Content-Type")` to the console
  console.log(response.headers.get("Content-Type"));
});

The Response Body Can Only Be Read Once

A response's body is a stream that can only be consumed a single time -- calling response.json() and then response.text() on the same response object fails on the second call, since the body has already been read and drained.

Note: If you genuinely need to read a response body more than once (rare), clone it first with response.clone() before consuming the original.

Warning: Attempting to read an already-consumed response body throws an error ("body stream already read"), a confusing message if you do not know about this one-time-use constraint.

उदाहरण: The Response Body Can Only Be Read Once

javascript

fetch("data.php").then(response => {
  return response.json().then(data => {
    console.log(data);
    // return response.text(); // would fail, body already read
  });
});

Live Example

Chapter Quiz — Complete all 26 topics to unlock

0/26 topics done

Complete these topics first:

← Previous Lesson JS AJAX Request Next Lesson → JS AJAX XML

JS AJAX Response

Reading a JSON Response

Checking response.ok and Status

Reading Text and Other Response Formats

Reading Response Headers

The Response Body Can Only Be Read Once

Chapter Quiz — Complete all 26 topics to unlock

Login to run this code