HTML onreadystatechange Event Attribute

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

<!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>

Browser Support

The following table will show you the current browser support for the HTML onreadystatechange Event Attribute.

Desktop
Edge Chrome Firefox Opera Safari
YesYesYesYesYes
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
YesYesYesYesYesYes

Last updated by CSSPortal on: 14th October 2023