What happened to the X in AJAX? The previous examples all used JSON. Time to step back and have a look how we can use XML with XMLHttpRequest.

To demonstrate this we'll first need some XML to play with. Please keep your excitement levels in check, the XML we are going to use is for bus routes around Sheffield - exciting stuff. Hold onto your hats here it comes:

<buses>
<bus>
<number>51</number>
<destination>Lodge Moor</destination>
<start>Charnock</start>
<interval>15</interval>
</bus>
<bus>
<number>52</number>
<destination>Crookes</destination>
<start>Woodhouse</start>
<interval>1</interval>
</bus>
<bus>
<number>95</number>
<destination>Walkley</destination>
<start>City Centre</start>
<interval>20</interval>
</bus>
</buses>

In our example the above data would be saved into a file called 'buses.xml'. This file would be placed on your webserver. Now lets put together an XMLHttpRequest to use that data in our page. Firstly we create a new XMLHttpRequest object as follows:

var myXHR =new XMLHttpRequest();

We then use the open method of XMLHttpRequest to indicate how we want to request the data and where from. If we wanted to make a GET call for the file 'buses.xml' and we wanted the call to be asynchronous we would add the following:

var myXHR=new XMLHttpRequest();
myXHR.open("GET","buses.xml", true);

We next send the request for the file and also set up a variable to receive the response. When using JSON in previous examples the data returned was stored in the responseText property of the XHR. This time the data returned from the request is in XML format and so we use the responeXML property of the XMLHttpRequest.

var myXHR=new XMLHttpRequest();
myXHR.open("GET","buses.xml", true);
myXHR.send();
var myXML=myXHR.responseXML;

By using a console output we can check to see if our data has been loaded correctly. Add console.info(myXML) as follows:

var myXHR=new XMLHttpRequest();
myXHR.open("GET","buses.xml", true);
myXHR.send();
var myXML=myXHR.responseXML;
console.info(myXML);

If you are using the console in the likes of Google Chrome you the above example will output the XML as #document in the console.

Beware the dreaded White Space

Be very careful when working with XHR and XML data. Although XML is designed to be human readable, often it is not and so what us humble humans do is add white spaces (tabs, line breaks) to make sense of it ie:

<bus><number>51</number><destination>Lodge Moor</destination><start>Charnock</start><interval>15</interval></bus>

Compared to:

<bus>
    <number>51</number>
    <destination>Lodge Moor</destination>
    <start>Charnock</start>
    <interval>15</interval>
</bus>

Unfortunately white-space in a XML document is not truncated and therefore becomes part of the DOM making traversing the document near to impossible.

Compare these two screenshots. You are looking at the console output from Google Chrome for the same XML file but this one has whitespacing, whilst this one has the whitespacing removed. Notice how the three bus nodes are visible in the example where the white space has been removed.

Therefore when working with XHR and XML ensure you remove all unnecessary white spacing from the file before attempting to access its content.

Assuming you have a white space free XML document we can now navigate through it to extract the specific data we want.

var myXHR=new XMLHttpRequest();
myXHR.open("GET","buses.xml",false);
myXHR.send();
var myXML=myXHR.responseXML;

If you wanted to extract the first bus's route numbers then we would use the following:

var myXHR=new XMLHttpRequest();
myXHR.open("GET","buses.xml",false);
myXHR.send();
xmlDoc=myXHR.responseXML;
var testBusDest = xmlDoc.getElementsByTagName("bus").item(0).childNodes[0].textContent;
document.getElementById('eventInfo').innerHTML = testBusDest;

Notice again the difference when the XML contains all that nasty white spacing compared to one that doesn't and works.

Working with Older Browsers

Finally a note about old browsers. If you need to support really old browsers like IE6 then you have to create your XHR objects slightly differently with an ActiveXObject. The following snippets illustrates the approach you would take:

if (window.XMLHttpRequest) {

      xmlhttp=new XMLHttpRequest()                            // For all modern browsers

  } else if (window.ActiveXObject) {

     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")   // For (older) IE

  }

Leave a Comment