Questions tagged [readystate]

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

Related Tags

• dom
• ajax