What is the use of the onreadystatechange property in JavaScript?

The onreadystatechange property is an event handler that is used with the XMLHttpRequest object in JavaScript. It allows you to monitor the status of an asynchronous HTTP request and respond to changes in the request’s state.

When you make an HTTP request with the XMLHttpRequest object, it goes through several states as it is processed by the server. These states are represented by the readyState property of the XMLHttpRequest object, which can have a value between 0 and 4.

The onreadystatechange property allows you to specify a function that will be called each time the readyState property changes.

Here’s an example of how you might use the onreadystatechange property to monitor the progress of an HTTP request:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log("There was a problem with the request.");
    }
  }
};
xhr.open("GET", "https://api.example.com/data");
xhr.send();

In this example, we create a new XMLHttpRequest object and assign a function to the onreadystatechange property. This function checks the value of the readyState property each time it is called. When the value of readyState is XMLHttpRequest.DONE (4), we check the value of the status property to see if the request was successful. If it was, we log the response text to the console. If there was a problem with the request, we log an error message instead.

Note that the onreadystatechange property is not the only way to handle the results of an HTTP request in JavaScript. You can also use the onload and onerror event handlers, which are called when the request completes successfully or with an error, respectively:

var xhr = new XMLHttpRequest();
xhr.onload = function () {
  console.log(xhr.responseText);
};
xhr.onerror = function () {
  console.log("There was a problem with the request.");
};
xhr.open("GET", "https://api.example.com/data");
xhr.send();

In this example, we assign a function to the onload property, which is called when the request completes successfully. We also assign a function to the onerror property, which is called when there is an error with the request.

While the onreadystatechange property is not the only way to handle the results of an HTTP request in JavaScript, it can be useful in some situations. For example, if you want to monitor the progress of a long-running request or perform different actions based on the value of the readyState property, the onreadystatechange property is a good choice.

Here’s an example of how you might use the onreadystatechange property to monitor the progress of a long-running request:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  switch (xhr.readyState) {
    case XMLHttpRequest.OPENED:
      console.log("Request opened.");
      break;
    case XMLHttpRequest.HEADERS_RECEIVED:
      console.log("Headers received.");
      break;
    case XMLHttpRequest.LOADING:
      console.log("Loading data.");
      break;
    case XMLHttpRequest.DONE:
      console.log("Request complete.");
      console.log(xhr.responseText);
      break;
  }
};
xhr.open("GET", "https://api.example.com/long-request");
xhr.send();

In this example, we use a switch statement to perform different actions based on the value of the readyState property. We log messages to the console at each stage of the request, which can be useful for debugging purposes or to provide feedback to the user.

Note that the onreadystatechange property can also be used with other types of HTTP requests, such as POST requests.

For example:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.log("There was a problem with the request.");
    }
  }
};
xhr.open("POST", "https://api.example.com/data");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.send(JSON.stringify({ foo: "bar" }));

In this example, we use the setRequestHeader method to set the Content-Type header to application/json. We also use the JSON.stringify method to convert an object to a JSON string and send it with the request body.

Thank you for reading, and let’s have conversation with each other

Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.