You are here: Reference > JavaScript > client-side > event handling > events > onreadystatechange (XMLDocument)

onreadystatechange event | readystatechange event (XMLDocument)

Browser support:
Occurs when the load state of the XMLDocument object changes.
Use the readyState property in your event handler for the onreadystatechange event to get the current state.
The onreadystatechange event and the readyState property are useful if the load method of the XMLDocument object loads an XML document asynchronously. If you want to start processing partial data as soon as it becomes available, use the ondataavailable event.
If you need the onreadystatechange event for http requests (AJAX), please see the onreadystatechange event of the XMLHttpRequest object.

How to register:

This event cannot be registered in HTML.

In JavaScript:
object.onreadystatechange = handler;
object.addEventListener ("readystatechange", handler, useCapture);
object.attachEvent ("onreadystatechange", handler);
You can find the related objects in the Supported by objects section below.
The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.
For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles No
Cancelable No
Event object -

Actions that invoke the onreadystatechange event:

  • If the load state of the XMLDocument object has changed.

Events related to the onreadystatechange event:

The ondataavailable event occurs each time when a new chunk of data becomes available from the source.

Example HTML code 1:

This example illustrates the use of the onreadystatechange event:
    <script type="text/javascript" src="ajax.js"></script>
    <script type="text/javascript">
        var xmlDoc = null;

        function LoadXML () {
            xmlDoc = CreateXMLDocumentObject ();    // defined in ajax.js
            if (!xmlDoc) {

            var url = "large.xml";
            xmlDoc.async = true;

            if (xmlDoc.addEventListener) {  // Firefox, Opera, Google Chrome and Safari
                xmlDoc.addEventListener("load", OnLoadXML, false);
            else {
                xmlDoc.onreadystatechange = OnStateChange;

            xmlDoc.load (url);

        function OnLoadXML () {
            LoadingFinished ();

        function OnStateChange () {
            var output = document.getElementById ("output");
            switch (xmlDoc.readyState) {
            case 1:
                output.innerHTML += "The load method was called, but no data has been received yet.<br/>";
            case 2:
                output.innerHTML += "A part of the data has been loaded, but the document object model (DOM) is not yet available.<br/>";
            case 3:
                output.innerHTML += "The document object model has been built from the received data and it is available.<br/>";
            case 4:
                LoadingFinished ();

        function LoadingFinished () {
            var output = document.getElementById ("output");
            output.innerHTML += "All data has been loaded, the operation is finished:<br/>";

            var errorMsg = null;
            if (xmlDoc.parseError && xmlDoc.parseError.errorCode != 0) {
                errorMsg = "XML Parsing Error: <span style='color:red'>" + xmlDoc.parseError.reason
                          + " at line " + xmlDoc.parseError.line
                          + " at position " + xmlDoc.parseError.linepos
                          + "</span><br/>";
            else {
                if (xmlDoc.documentElement) {
                    if (xmlDoc.documentElement.nodeName == "parsererror") {
                        errorMsg = "<span style='color:red'>" + xmlDoc.documentElement.childNodes[0].nodeValue + "</span><br/>";
            if (errorMsg) {
                output.innerHTML += errorMsg;
            else {
                output.innerHTML += "<span style='color:blue'>The XML is valid.</span><br/>";
    <button onclick="LoadXML ()">Analyze the loading process of an XML</button>
    <div id="output" style="width:420px; height:200px; overflow:auto; border:1px solid #000000; background-color:#f5e4b1;"></div>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content