Parsing XML in JavaScript?

I have been doing some work with JavaScript / Ajax lately, and found myself needing to parse some XML (something I do quite often when building apps). However, I have not had much luck successfully parsing XML with JavaScript cross browser.


Firefox 1.5 has support for E4X, which makes parsing a breeze, but it is only supported in the latest version of Firefox. The XMLHttpRequest object parses loaded XML into a DOM, but my experience has been that the DOM is different depending on the browser you are running in (I tested on Firefox and Sarafi on Mac).I know that I must be missing something pretty obvious, but just about every article I have read online about this suggests to NOT use XML, and use something like JSON where possible (which I can’t do in this case).So, if you are doing JavaScript development, what are you using to do cross-browser XML parsing in JavaScript on the client side?

23 Responses to Parsing XML in JavaScript?

  1. Jeremy says:

    I feel your pain. I found the main difference between Firefox and IE is their handling of whitespace between tags. Firefox adheres strictly to the W3C spec and considers any whitespace between tags as an empty text node. You can see this easily in Firefox’s DOM Inspector. IE tends to ignore the whitespace altogether. I’m not sure how Safari handles it, but its probably more like IE in this instance.Anyway the two solutions I know of are to remove any whitespace between the XML tags on the server side or to parse through the DOM and remove them on the client side. Neither of which is ideal, but what can you do.Depending on what you’re doing, the DOM function getElementsByTagName, might be helpful. I know a lot of people tend to overlook it.P.S. Your link to [url=http://www.json.org/]JSON[/url] isn’t working.

  2. christian says:

    JSON is neat, but there is not a standard representation of xml. You have different options and someone are not so intuitive. What I did, since I worked with huge xmls, I created by myself an xml2Array function. I have it in the office, let me know if you are interested on seing it.

  3. Josh says:

    You probably need to convert your response to an XML object before using XML methods on it. For example, I have a script that uses Prototype, and need to do the following with XML responses before using them:onSaveComplete: function(response){var ajaxResponse = Try.these(function() { return new DOMParser().parseFromString(response.responseText, ‘text/xml’); },function() { var xmldom = new ActiveXObject(‘Microsoft.XMLDOM’); xmldom.loadXML(response.responseText); return xmldom; });var personid = ajaxResponse.getElementsByTagName(‘personid’)[0].firstChild.nodeValue;}Higher-level libraries like Rico handle this for you, and that’s probably where I copied the code from.

  4. Jacek says:

    Mike,there’s only one difference in XML handling across various browsers – while w3c-compliant browsers use XMLHttpRequest object, IE uses Microsoft.XMLHTTP, but that’s really the only difference – once you load the XML, you can parse it with standard W3C DOM methods.I created a small library – AjaxLib (http://karaszewski.com/tools/ajaxlib/) – that unifies those objects, and as a bonus it can strip whitespace from the XML document (whitespace is often a problem, as XML object in JS doesn’t have ignoreWhite property) and call a specified function when XML is loaded. It works on IE, Opera, Firefox, Mozilla, Safari.Hope this helps.

  5. Ray Horn says:

    Actualy I tend to simply pass back JavaScript code when I do my AJAX thing – this makes communicating data back to the calling JavaScript code a breeze and there is no need to do anything with XML even when using xmlHttpRequest() as my AJAX transport protocol. This may sound counter-intuitive but it makes processing the AJAX response extremely fast and isn’t this what we all want from our AJAX code – super fast performance ?!? Well this is what I want from my code; blazing speed and no fuss to code.

  6. mike chambers says:

    >Actualy I tend to simply pass back JavaScript code when I do my AJAX thingWell, in this case, I don’t have control of the data source, and don’t want to pass it through the server just so i can format it for JavaScript.Besides, I though one of the primary advantages of XML was having a standard way to describe data that worked across development environments.mike chambersmesh@adobe.com

  7. mike chambers says:

    >there’s only one difference in XML handling across various browsersWell, actually, MS browsers use two different ways, but that is not the issue I was running into.Anyways, I expected the DOMs to be the same, but ran into issues where they were not. For example, the following works in Firefox 1.5 on MacxmlHttp.responseXML.documentElement.getElementsByTagName(‘title’)[0]firstChild.nodeValuebut not in Safari. I have not tested on any Windows browsers yet.I also had some difficulty in parsing XML that was not loaded from a server (i.e. XML contained within a String).mike chambersmesh@adobe.com

  8. ericd says:

    I scanned your post – won’t one of those Apple RSS-based widgets work? I know they read XML and parse it up. The include some parsing libraries.

  9. cosmin says:

    Well I don’t think I’ve ever used this in a real project but it seems to be an old and solid piece of code (2001). And in my opinion the js code that lived trough the browser wars is better (if written in a clean manner):http://www.gazingus.org/html/XML_Parser_in_JavaScript.html

  10. Hehe and what about delegating the parsing in a dedicated, hidden swf which would send it back to the javascript ?

  11. ianc says:

    Will project Apollo solve these problems.Apollo = browser + flash -> Integrated.One client to code for – with a free runtime – unlike Central.

  12. riley says:

    You might want to try using the Zimbra AJAX Toolkit (AjaxTK), as I think they’ve established cross browser XML parsing objects:http://www.zimbra.com/community/ajaxtk_download.html

  13. ilya Devèrs says:

    Hi Mike,I recenty listened to a podcast interview with Thomas Fuchs (from script.aculo.us) (the Ajax and effects package extending prototype).That is one of the most awesome ajax packages i know of. The funny thing is: he recommends to NEVER return XML from an ajax call, as it is “dog-slow” on every platform (his words).So, if you would have to do it, just pass the response to flash app, and return the results again with the javascrit ExternalInterface or use your own javascript package :)the podcast is available here:http://ajaxian.com/archives/audible-ajax-episode-12-thomas-fuchs-of-scriptaculousgood stuffCheers,ilya

  14. Matt Walker says:

    Hi Mike,I’ve been using Sarissa (http://sourceforge.net/projects/sarissa/ and http://sarissa.sourceforge.net/doc/) which is a “cross-browser ECMAScript library for client side XML manipulation”. It’s been a big help – but I’ve still got an issue with Opera!It’s all so easy with Flash!Matt.

  15. mde says:

    The xmlparse.js library has a simple method for deserializing an XML document to an array of JavaScript objects. You pass it the responseXML from an XHR object and a tag name for the items to pull, and it creates an array of generic JS Objects out of the items.It’s a very bare-bones implementation — all the values are transformed to strings — but it works in Mozilla/Firefox, IE6, and Safari 2.x.It’s a Apache-licensed, and you can get it here:http://www.fleegix.org/downloads/xmlparse.js

  16. madrabaz says:

    Look at this page for the whitespace hangling in the DOM.Whitespace in the DOM

  17. madrabaz says:

    Look at this page for the whitespace handling in the DOM.Whitespace in the DOM

  18. Eric Viegas says:

    Hy guys!I just want to share that there are great online tutorials about ajax parsing xml at http://www.KYNOU.com.You can find by searching for it (the website is like a search engine but just for tutorials) or you can go right into the Newest Tutorials link.I hope this helps 🙂

  19. Brian says:

    I’m glad that I am not the only having trouble with this kind of thing. It has been driving me nuts.My problem is:I am trying to write a widget for Opera9 and I can only use Javascript and HTML. I have a webpage that generates XML data and I want the widget to grab the XML data from the website and display parts of it. I did it quite eaisly with the Microsoft DOM, but that doesn’t work in Opera9. Any thoughts?

  20. Jeff says:

    The issue was cross browser XML parsing. Problems solved use Flash to load the XML and parse it using flash then pass the parsed informationuse to a JavaScript function that replaces the innerHTML of div tags. A browser and platfom independent XML parser problem solved.

  21. steven cook says:

    White space and the DOM is frustrating. I’ve used these functions from Firefox development.http://developer.mozilla.org/en/docs/Whitespace_in_the_DOM

  22. Trevor says:

    yeah, solved if you can use flash in the page… i can’t so i’m stuck with javascript (!problemSolved)

  23. Binny V A says:

    A small xml2array() function will do the trick…http://www.openjs.com/scripts/xml_parser/