a property of both Document and XMLHttpRequest objects
readyState is a property of both Document and XMLHttpRequest objects.
Document.readyState
In a Document object, readyState represents the object's loading state. It has three possible values:
- loading
- interactive
- complete
Example
When the readyState value changes, a Document.onreadystatechange event is fired:
document.onreadystatechange = function () {
if (document.readyState === 'loading') {
console.log('the document is still loading');
} else if (document.readyState === 'interactive') {
console.log('the document has loaded, but sub-resources are still loading');
} else if (document.readyState === 'complete') {
console.log('the document and its sub-resources are loaded');
}
}
XMLHttpRequest.readyState
In an XMLHttpRequest object, readyState represents the current state of the request's lifecycle. It has five possible values:
UNSENT(0)OPENED(1)HEADERS_RECEIVED(2)LOADING(3)DONE(4)
Example
When the readyState value changes, a XMLHttpRequest.onreadystatechange event is fired:
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState === 1 ||
request.readyState === XMLHttpRequest.OPENED) {
console.log('the request has been successfully opened');
} else if (request.readyState === 2 ||
request.readyState === XMLHttpRequest.HEADERS_RECEIVED) {
console.log('the response headers have been received');
} else if (request.readyState === 3 ||
request.readyState === XMLHttpRequest.LOADING) {
console.log('the response body is being received');
} else if (request.readyState === 4 ||
request.readyState === XMLHttpRequest.DONE) {
console.log('the request is complete');
}
};
request.open('get','http://stackoverflow.com/');
request.send();
Resources
- MDN Document.readyState
- HTML Living Standard: current document readiness
- MDN XMLHttpRequest.readyState
- XMLHttpRequest Living Standard: states
