In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > xml handling > properties > readyState (XMLHttpRequest)

readyState property (XMLHttpRequest)

Browser support:

Returns an integer value that indicates the state of the request operation.

Use this property together with the onreadystatechange event to be notified when the state changes.
The onreadystatechange event and the readyState property is useful if the request opened by the open method needs to be handled asynchronously.

Syntax:

object.readyState;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that represents the state of the object.

One of the following values:

The current object is not initialized (the open method has not been called yet).

The request is opened, but the send method has not been called yet.

The request is sent but no data has been received yet.

A part of the data has been received, but it is not yet available.

All data is available.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the readyState property:

Code

ajax.js

response.txt

<head>
    <script type="text/javascript" src="ajax.js"></script>
    
    <script type="text/javascript">
        var httpRequest = null;

        function SendRequest () {
            if (!httpRequest) {
                httpRequest = CreateHTTPRequestObject ();   // defined in ajax.js
            }
            if (httpRequest) {          
                    // The requested file must be in the same domain that the page is served from.
                var url = "response.txt";
                httpRequest.open ("GET", url, true);    // async
                httpRequest.onreadystatechange = OnStateChange;
                httpRequest.send (null);
            }
        }

        function OnStateChange () {
            var output = document.getElementById ("output");
            switch (httpRequest.readyState) {
            case 1:
                output.innerHTML += "The request is opened, but the send method has not been called yet.<br />";
                break;
            case 2:
                output.innerHTML += "The request is sent but no data has been received yet.<br />";
                break;
            case 3:
                output.innerHTML += "A part of the data has been received.<br />";
                break;
            case 4:
                output.innerHTML += "All data has been received:<br /><span style='margin-left:30px; color:blue'>" + httpRequest.responseText + "</span><br />";
                break;
            };
        }

    </script>
</head>
<body>
    <button onclick="SendRequest ()">Test readyState property</button>
    <br /><br />
    <div id="output" style="width:420px; height:200px; overflow:auto; border:1px solid #000000; background-color:#f5e4b1;"></div>
</body>


function CreateHTTPRequestObject () {
        // although IE supports the XMLHttpRequest object, but it does not work on local files.
    var forceActiveX = (window.ActiveXObject && location.protocol === "file:");
    if (window.XMLHttpRequest && !forceActiveX) {
        return new XMLHttpRequest();
    }
    else {
        try {
            return new ActiveXObject("Microsoft.XMLHTTP");
        } catch(e) {}
    }
    alert ("Your browser doesn't support XML handling!");
    return null;
}

function CreateMSXMLDocumentObject () {
    if (typeof (ActiveXObject) != "undefined") {
        var progIDs = [
                        "Msxml2.DOMDocument.6.0", 
                        "Msxml2.DOMDocument.5.0", 
                        "Msxml2.DOMDocument.4.0", 
                        "Msxml2.DOMDocument.3.0", 
                        "MSXML2.DOMDocument", 
                        "MSXML.DOMDocument"
                      ];
        for (var i = 0; i < progIDs.length; i++) {
            try { 
                return new ActiveXObject(progIDs[i]); 
            } catch(e) {};
        }
    }
    return null;
}

function CreateXMLDocumentObject (rootName) {
    if (!rootName) {
        rootName = "";
    }
    var xmlDoc = CreateMSXMLDocumentObject ();
    if (xmlDoc) {
        if (rootName) {
            var rootNode = xmlDoc.createElement (rootName);
            xmlDoc.appendChild (rootNode);
        }
    }
    else {
        if (document.implementation.createDocument) {
            xmlDoc = document.implementation.createDocument ("", rootName, null);
        }
    }
    
    return xmlDoc;
}

function ParseHTTPResponse (httpRequest) {
    var xmlDoc = httpRequest.responseXML;

            // if responseXML is not valid, try to create the XML document from the responseText property
    if (!xmlDoc || !xmlDoc.documentElement) {
        if (window.DOMParser) {
            var parser = new DOMParser();
            try {
                xmlDoc = parser.parseFromString (httpRequest.responseText, "text/xml");
            } catch (e) {
                alert ("XML parsing error");
                return null;
            };
        }
        else {
            xmlDoc = CreateMSXMLDocumentObject ();
            if (!xmlDoc) {
                return null;
            }
            xmlDoc.loadXML (httpRequest.responseText);

        }
    }

            // if there was an error while parsing the XML document
    var errorMsg = null;
    if (xmlDoc.parseError && xmlDoc.parseError.errorCode != 0) {
        errorMsg = "XML Parsing Error: " + xmlDoc.parseError.reason
                  + " at line " + xmlDoc.parseError.line
                  + " at position " + xmlDoc.parseError.linepos;
    }
    else {
        if (xmlDoc.documentElement) {
            if (xmlDoc.documentElement.nodeName == "parsererror") {
                errorMsg = xmlDoc.documentElement.childNodes[0].nodeValue;
            }
        }
    }
    if (errorMsg) {
        alert (errorMsg);
        return null;
    }

        // ok, the XML document is valid
    return xmlDoc;
}

    // returns whether the HTTP request was successful
function IsRequestSuccessful (httpRequest) {
        // IE: sometimes 1223 instead of 204
    var success = (httpRequest.status == 0 || 
        (httpRequest.status >= 200 && httpRequest.status < 300) || 
        httpRequest.status == 304 || httpRequest.status == 1223);
    
    return success;
}

Data from the server in plain text format.

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Supported by objects:

XMLHttpRequest

onreadystatechange
responseText
XMLHttpRequest
responseXML
abort

External links:

readyState (MSDN)
readyState (Mozilla Developer Center)

Digg Del.icio.us Reddit Facebook Twitter Diigo

User Contributed Comments