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?
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.
Jeremy
9 Jan 06 at 5:10 pm
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.
christian
9 Jan 06 at 6:08 pm
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.
Josh
9 Jan 06 at 6:11 pm
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.
Jacek
9 Jan 06 at 7:34 pm
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.
Ray Horn
9 Jan 06 at 8:09 pm
>Actualy I tend to simply pass back JavaScript code when I do my AJAX thing
Well, 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 chambers
mesh@adobe.com
mike chambers
9 Jan 06 at 8:34 pm
>there’s only one difference in XML handling across various browsers
Well, 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 Mac
xmlHttp.responseXML.documentElement.getElementsByTagName(’title’)[0]firstChild.nodeValue
but 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 chambers
mesh@adobe.com
mike chambers
9 Jan 06 at 8:44 pm
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.
ericd
9 Jan 06 at 8:58 pm
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
cosmin
10 Jan 06 at 12:13 am
Hehe and what about delegating the parsing in a dedicated, hidden swf which would send it back to the javascript ?
Dominique PERETTI
10 Jan 06 at 1:20 am
Will project Apollo solve these problems.
Apollo = browser + flash -> Integrated.
One client to code for - with a free runtime - unlike Central.
ianc
10 Jan 06 at 7:39 pm
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
riley
11 Jan 06 at 11:59 am
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-scriptaculous
good stuff
Cheers,
ilya
ilya Devèrs
14 Jan 06 at 8:47 am
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.
Matt Walker
15 Jan 06 at 11:50 am
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
mde
9 Feb 06 at 8:21 pm
Look at this page for the whitespace hangling in the DOM.
Whitespace in the DOM
madrabaz
16 Feb 06 at 12:42 pm
Look at this page for the whitespace handling in the DOM.
Whitespace in the DOM
madrabaz
16 Feb 06 at 12:46 pm
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 :)
Eric Viegas
10 May 06 at 9:59 am
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?
Brian
3 Jul 06 at 7:24 am
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.
Jeff
5 Jul 06 at 3:16 pm
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
steven cook
5 Oct 06 at 8:40 am
yeah, solved if you can use flash in the page… i can’t so i’m stuck with javascript (!problemSolved)
Trevor
25 Oct 06 at 1:37 am
A small xml2array() function will do the trick…
http://www.openjs.com/scripts/xml_parser/
Binny V A
31 Jan 07 at 8:55 am
i have xml file named site.xml
i have to get the object of site.xml
i have wrote like this
value = new ActiveXObject(”Microsoft.XMLDOM”);
value.async = false;
value.load(document.getElementById(’txtName’).value);
but it will not support in firefox
so please give a solution
krishna Bv
2 Jul 07 at 5:44 am
The only solution is to abolish Firefox and to use what is obvious, easy and safe - IExplorer! I am about to start an antiFirefox campaign. Join me!
Derek Jones
29 Jan 08 at 1:40 am
hi ,
i m getting a response from server and going to parse it through ….
if (window.ActiveXObject) {
var xmldom = new ActiveXObject(’Microsoft.XMLDOM’);
xmldom.loadXML(xml_txt);
return xmldom;
}
but when i going to get the child node of xmldom its giving a null value but i m getting the child node in firefox . so can every one help me how to get childnode in ie
thanx
tulsa
Tulsa
21 Feb 08 at 7:17 am
Try using this function. It actually helps by quite a bit to remove whitespace.
/***********************************
* @method RemoveWhitespace
* @param {Object} xml
************************************/
function RemoveWhitespace(xml)
{
var loopIndex;
for (loopIndex = 0; loopIndex < xml.childNodes.length; loopIndex++)
{
var currentNode = xml.childNodes[loopIndex];
if (currentNode.nodeType == 1){RemoveWhitespace(currentNode);}
if (((/^\s+$/.test(currentNode.nodeValue))) && (currentNode.nodeType == 3))
{
xml.removeChild(xml.childNodes[loopIndex--]);
}
}
}
Tony Bianco
18 Mar 08 at 9:03 am
Easy way!
function ignoreWhite(node){
node.innerHTML=node.innerHTML.replace(/\>\s*?\<”);
}
window.onload=function(){
ignoreWhite(document.body);
}
Marc Palau
23 Apr 08 at 2:21 am
@Derek Jones
So its Firefox’s fault for using a W3C standard whereas Microsoft uses its own ActiveX model to load an XML Object?
I am about to start an antiIdiot campaign. Join me! (No Derek Jones allow).
Anti Idiot
7 Nov 08 at 5:40 am