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?
Comments
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.
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.
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.
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.
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.
>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
>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
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.
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
Hehe and what about delegating the parsing in a dedicated, hidden swf which would send it back to the javascript ?
Will project Apollo solve these problems.Apollo = browser + flash -> Integrated.One client to code for – with a free runtime – unlike Central.
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
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
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.
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
Look at this page for the whitespace hangling in the DOM.Whitespace in the DOM
Look at this page for the whitespace handling in the DOM.Whitespace in the DOM
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
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?
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.
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
yeah, solved if you can use flash in the page… i can’t so i’m stuck with javascript (!problemSolved)
A small xml2array() function will do the trick…http://www.openjs.com/scripts/xml_parser/