You are here: Reference > JavaScript > client-side > event handling > events > ondataavailable

ondataavailable event | dataavailable event

Browser support:
Occurs each time when a new chunk of data becomes available from the source.
The ondataavailable event is useful for asynchronous requests if you want to start processing data as soon as it becomes available.
Use the async property and the load method of the XMLDocument object to load an XML document asynchronously.

How to register:

In HTML:
<ELEMENT ondataavailable="handler">

In JavaScript:
object.ondataavailable = handler;
object.attachEvent ("ondataavailable", 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 Yes
Cancelable No
Event object -

Actions that invoke the ondataavailable event:

  • When a new chunk of data becomes available.

Events related to the ondataavailable event:

The onreadystatechange event occurs when the load state of the XMLDocument object changes.
The onload event occurs when the loading process is completed.

Example HTML code 1:

This example illustrates the use of the ondataavailable event:
Code
ajax.js
chars.xml
<head>
    <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) {
                return;
            }

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

            if ('ondataavailable' in xmlDoc) {  // Internet Explorer
                xmlDoc.ondataavailable = OnData;
            }

            if (xmlDoc.addEventListener) {  // all browsers except IE
                xmlDoc.addEventListener("load", OnLoadXML, false);
            }
            else {  // IE
                xmlDoc.onreadystatechange = OnStateChange;
            }

            xmlDoc.load (url);
        }

        function OnData () {
                // The currently available data as a text
            var dataTxt = xmlDoc.documentElement.xml;
            dataTxt = dataTxt.replace (/</g, "&lt;");

            var output = document.getElementById ("output");
            output.innerHTML += "A part of the data has arrived. The currently available data:<div style='color:#808080'>" + dataTxt + "</div>";
        }

        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/>";
                break;
            case 2:
                output.innerHTML += "A part of the data has been loaded, but the document object model (DOM) is not yet available.<br/>";
                break;
            case 3:
                output.innerHTML += "The document object model has been built from the received data and it is available.<br/>";
                break;
            case 4:
                LoadingFinished ();
                break;
            };
        }

        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/>";
            }
        }
    </script>
</head>
<body>
    <button onclick="LoadXML ()">Analyze the loading process of an XML</button>
    <br/><br/>
    <div id="output" style="width:520px; height:200px; overflow:auto; border:1px solid #000000; background-color:#f5e4b1;"></div>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content