Handling XML Document Events | Inside JavaScript

As with HTML documents, it can be important to know when an XML document loads and its data is available. The Internet Explorer actually enables you to track the progress of an XML document as it's being loaded. In this case, you can use the onreadystatechange and ondataavailable events. The ondataavailable event occurs when the data from the XML document is available for use, and you can connect an event handler to this event like this:

 document1.ondataavailable = dataAvailable          .          .          .  function dataAvailable()  {      div1.innerHTML = "The data is now available!"  }

The readyState property in the onreadystatechange event lets you know about the current status of a document's data. You also can connect an event handler to this event, and check the readyState property to see what's going on:

 document1.onreadystatechange = stateChange          .          .          .  function stateChange()  {      switch (document1.readyState)      {          case 1:              div1.innerHTML = "The data is uninitialized."              break          case 2:              div1.innerHTML = "The data is being loaded."              break          case 3:              div1.innerHTML = "The data is loaded."              break          case 4:              div1.innerHTML = "The data loading process is done."              if (document1.parseError.errorCode != 0) {                  div1.innerHTML = "Error."              }              else {                  div1.innerHTML = "The data loaded OK."              }          break      }  }

Here's an example putting this kind of code to work, enabling us to watch the loading progress of an XML document:

(Listing 22-08.html on the web site)

 <HTML>      <HEAD>          <TITLE>              Loading XML Documents          </TITLE>          <SCRIPT LANGUAGE="JavaScript">              <!--             var document1              function loader()              {                  document1 = new ActiveXObject("microsoft.XMLDOM")                  document1.ondataavailable = dataAvailable                  document1.onreadystatechange = stateChange                  document1.load('22-01.xml')              }              function dataAvailable()              {                  div1.innerHTML += "The data is now available!<BR>"              }              function stateChange()              {                  switch (document1.readyState)                  {                      case 1:                          div1.innerHTML += "The data is uninitialized.<BR>"                          break                      case 2:                          div1.innerHTML += "The data is being loaded.<BR>"                          break                      case 3:                          div1.innerHTML += "The data is loaded.<BR>"                          break                      case 4:                          div1.innerHTML += "The data loading process is done.<BR>"                          if (document1.parseError.errorCode != 0) {                              div1.innerHTML += "Error.<BR>"                          }                          else {                              div1.innerHTML += "The data loaded OK.<BR>"                          }                          break                  }              }              //-->          </SCRIPT>      </HEAD>      <BODY>          <H1>              Loading XML Documents          </H1>          <INPUT TYPE="BUTTON" VALUE="Load XML Document"              ONCLICK="loader()">          <DIV ID="div1"></DIV>      </BODY>  </HTML>

The results of this web page appear in Figure 22.5, and you can see the progress that the Internet Explorer made in loading our XML document in that page.

Figure 22.5. Loading an XML document in the Internet Explorer.

graphics/22fig05.gif