Loading XML Asynchronously

In the past, I’ve implemented Ajaxiness by creating XMLHttpRequest objects (or Microsoft.XMLHTTP objects fo IE):

var request = (document.all)?new ActiveXObject("Microsoft.XMLHTTP"):new XMLHttpRequest();
request.onreadystatechange = function(){
	if(request.readyState == 4)
		alert("Document loaded");
};
request.open("GET", "test.xml", true);
request.send("");

The above code just loads an xml file, test.xml, and alerts the user when the load is finished. It’s as simple an Ajax example as it gets. Fully cross-browser compliant (as much as necessary anyway). From there, you could use your browser’s ridiculous XML parsing capabilities which isn’t the same between browsers and with much trial and error and a whack of frustration, implement some client-server Ajax and maybe pull data into a grid or something.

As I’ve said, I’ve done it this way. But it’s insane. In this day and age of the wheel already having been invented over and over, the time needed to implement the core cross-browser Ajax functions should be zero. In fact, the addition of a particular library to your script can not only make cross browser Ajax and DOM\XML processing worry free, it can make your scripting days a hell of a lot easier in general.

That incredible library is… jQuery.

With jQuery, the above code becomes a one liner (sorta anyway):

$.ajax({
  url: "test.xml",
  success: function(retxml){
    alert("Document loaded");
  }
});

ECMAScript for XML (E4X)

ECMAScript is javascript. They’re one and the same. In 2004, a standardized extended version of ECMAScript was published that elegantly treated xml as a primitive data type. Doing so makes traversing an XML or DOM document a breeze. Firefox and Safari both support this standard. So does Adobe Flash\Flex actionscript. Unfortunately (and unsurprisingly) IE doesn’t and from what I’ve read, MS doesn’t intend to change that. This being the case, combined with the utterly depressing fact that IE is so incredibly popular, means that using E4X in any script is likely a poor choice for the time being (unless, of course, you choose not to support IE – good luck with that).

jQuery – the E4X Alternative

So for now, until either Dell’s stop being shipped with IE as the default browser or Microsoft decides to incorporate more of the browser standards, we’re squeezed out from using xml as a primitive data type. While this no doubt sucks, jQuery again comes to the rescue.

Suppose the following XML file named test.xml :

<Provinces>
	<Province name="Ontario">
		<Cities>
			<City>Kitchener</City>
			<City>Guelph</City>
			<City>Toronto</City>
		</Cities>
	</Province>
</Provinces>

We can easily load the file and traverse all City elements as follows:

$.ajax({
  url: "test.xml",
  success: function(retxml){
    $(retxml).find("City").each(function(){
    	alert("City: " + $(this).text());
    })
  }
});

Easy peasy…

jQuery not only enables easy Ajax, it also has many other cool features like fading and sliding elements and animation support that would certainly feed management’s buzz word frenzy.

For more information about jQuery, check out the homepage, http://jquery.com/.