Categories:
Partners
Web Hosting
We've partnered with HostGator for reliable, affordable hosting starting at $3.95/mon. Use coupon code "javascriptkit25" for 25% off any package.

Determining when the XML file has loaded

Before you actually attempt to manipulate the XML file, you should first make sure it has completely loaded into the client's browser cache. Otherwise, you're rolling the dice each time your page is viewed, running the risk of a JavaScript error thrown whenever the execution of your script proceeds the complete downloading of the XML file in question. Fortunately, there are ways to detect the current download state of an XML file, albeit some more refined than others. Lets start with the crude methods first.

In IE, the async property denotes whether IE should "wait" for the specified XML file to fully load before proceeding with downloading the rest of the page. Short for asynchronous, by default this property is set to true, meaning the browser will NOT wait on the XML file before rendering everything else that follows. By setting this property to false instead, we can instruct IE to load the file first, then, and only then, the rest of the page:

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false //Download XML file first, then load rest of page (IE only)
xmlDoc.load("myfile.xml");

In NS6, the good old onLoad event handler is supported on XML objects, so we can simply use that instead:

var xmlDoc= document.implementation.createDocument("","doc",null);
xmlDoc.load("myfile.xml");
xmlDoc.onload=customfunction //Detect complete loading of XML file (NS6 only)

Most XML related scripts we've seen rely on the above two techniques to ensure a connection between the XML file and the script that manipulates it. There is more you can do, however, especially in IE.

- Refining the detection process in IE

For IE, the simplicity of the async property is not without its flaw- by setting this property to false, IE will stall the page until it makes contact and has fully received the UFO that is our specified XML file. In those rare instances where the browser is having trouble connecting/downloading the file, your page is left hanging like a monkey on a branch. This is where the readyState property can help.

The readyState property of IE exists for XML objects (not limited to, however), and returns the current loading status of the object. The 5 possible values returned are:

Return values for the readyState property Description
0 The object has not yet started initializing (uninitialized).
1 The object is initializing, but no data is being read (loading).
2 Data is being loaded into the object and parsed (loaded).
3 Parts of the object's data has been read and parsed, so the object model is available. However, the complete object data is not yet ready (interactive).
4 The object has been loaded, its content parsed (completed).

The value we're interested in here is the last one- "4" indicating the object has fully loaded. Using it, the below code will return true if our XML file has completely loaded:

if (xmlDoc.readyState==4)
alert("XML file loaded!")

- Creating an intelligent XML file download detector (IE only)

With the readyState property and a little free time, it's not hard to create a mechanism for detecting when an XML object has loaded, and abort the rest of the script should this process take longer than the designated time frame (ie: 5 seconds). This keeps the unwelcome surprises at bay as far as dealing with slow or non loading XML files. Take a look at the below code:

var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.load("myfile.xml");

var times_up=false
var expiretime=5000 //set expire time to abort. 5 seconds.

function XMLloadcontrol(){
if (times_up==true){ //if designated time frame has expired
alert ("XML file loading aborted")
return
}
else if (xmlDoc.readyState==4){ //if xml file has loaded within time frame
getdaily() //execute the rest of the script, ie: function getdaily()
return
}
else //else, run thyself again
setTimeout("test()",10)
}

if (window.ActiveXObject){ //if IE
setTimeout("times_up=true", expiretime) //set abort download time (5 sec).
XMLloadcontrol()
}

All that our routine really does is continuously check the readyState of the XML file up until 5 seconds has elapsed, and performs two different actions depending on the outcome. Here we assume getdaily() is the function that is to be run should the XML file downloads successfully.

Ok, with the potential hazards of your eager script too quickly accessing the XML file avoided, we can now move on to see how to actually manipulate the file.

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.