HTML onreadystatechange Event Attribute

Description

The onreadystatechange HTML event attribute specifies a JavaScript function to be executed when the readyState property of an element changes. The readyState property indicates the loading state of an element, such as an image, script, or iframe.

The onreadystatechange event attribute is most commonly used with the XMLHttpRequest object to track the progress of an HTTP request. When an XMLHttpRequest object is created, its readyState property is set to 0. As the request progresses, the readyState property is updated to reflect the current state of the request. When the request is complete, the readyState property is set to 4.

The following table shows the possible values of the readyState property:

Value	State
0	UNSENT
1	OPENED
2	HEADERS_RECEIVED
3	LOADING
4	DONE

To use the onreadystatechange event attribute, you would first create an XMLHttpRequest object and then set its onreadystatechange property to a JavaScript function. The JavaScript function will be executed each time the readyState property changes.

For example, the following code shows how to use the onreadystatechange event attribute to track the progress of an HTTP request:

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // Success!
    } else {
      // Error!
    }
  }
};

xhr.open("GET", "https://example.com/api/users");
xhr.send();

The onreadystatechange event attribute can also be used with other elements, such as images and iframes, to track their loading progress.

Here is an example of how to use the onreadystatechange event attribute with an image:

<img src="https://example.com/image.png" onreadystatechange="this.style.display = 'block';">

In this example, the onreadystatechange event attribute is set to a JavaScript function that will display the image when it is finished loading.

Syntax

<element onreadystatechange="script">

Values

scriptThe name of the script to use when the event has been triggered.

Example

HTML

<!DOCTYPE html>

<html>

<head>

   <title>onreadystatechange event example</title>

<script type="text/javascript">

   // Internet Explorer and Opera

   document.onreadystatechange = WaitForComplete;

        

   function WaitForComplete() {

      alert ("EXAMPLE: The state of the document: " + document.readyState);

   }		

   function OnLoad() {

      alert ("EXAMPLE: The document has been loaded.");

   }

</script>

</head>

<body onload="OnLoad()">

<p>onreadystatechange event example</p>

</body>

</html>