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
<!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 | |||||
Yes | Yes | Yes | Yes | Yes |
Tablets / Mobile | |||||
Yes | Yes | Yes | Yes | Yes | Yes |
Last updated by CSSPortal on: 14th October 2023