Convert String to XML Document in JavaScript

Question

Saw this example on the jQuery examples page for Ajax:

var xmlDocument = [create xml document];
$.ajax({
        url: "page.php",
        processData: false,
        data: xmlDocument,
        success: someFunction
    });

How do I take a string like:

var t = '<foo><bar>something</bar></foo>';  

And convert that to a XML DOM object? cross-browser?

UPDATE: Please see comments to karim79's answer.

Solution 1

Wrap it in a jQuery object. Then use jQuery's normal DOM manipulation methods on it.

var t = $('<foo><bar>something</bar></foo>');

//loop over 'bar' nodes
t.find('bar').each(function () {
    alert($(this).text());
});

If you want to convert it back to a plain string (after modifying it for example) you can do it like so:

//then convert it back to a string
//for IE 
if (window.ActiveXObject) {
    var str = t.xml;
    alert(str);
 }
// code for Mozilla, Firefox, Opera, etc.
else {
   var str = (new XMLSerializer()).serializeToString(t);
   alert(str);
}

EDIT: The $.ajax manual says (on the processData option):

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send DOMDocuments, or other non-processed data, set this option to false.

So if you're passing a jQuery object to the server, you'll need to set that to true, or omit it altogether (it is set to true by default). Hope that helped.

Solution 2

Just a heads up on calling find - if it's a top level element you need to use filter instead.

var t = $('<foo><bar>something</bar></foo>');

//loop over 'foo' nodes
t.filter('foo').each(function () {
  alert($(this).find('bar').text());
});

Solution 3

You can do the conversion without jQuery. This is taken from Mozilla's DOMParser Documentation:

// Create a DOMParser
var parser = new DOMParser();

// Use it to turn your xmlString into an XMLDocument
var xmlDoc = parser.parseFromString(xmlString, "application/xml");

Comments

[BuddyJoe]

Maybe I'm getting something wrong in the $.ajax call. I did wrap it like you said. Then my log on the server shows I'm passing in: [object Object] What should I try now?

[BuddyJoe]

Am I doing something wrong with .ajax() ? I just passed it as a string and it worked. weird. Does this have something to do with the processData option? or another option I'm not turning on?

[karim79]

@Tyndall - see my edit. Basically, if you're passing an XML string to the server, the setting you currently have is correct (processData : false. If you pass the jQuery object, you'll need to either get rid of that option or set it to true.

[BuddyJoe]

Thanks for the explanation of the processData - "jQuery in Action" didn't explain as well as you did in 4 sentences.

[ken]

Just a note that this fails in IE9 + quirks mode. Not a huge surprise, but something to be aware of at least.

[Saravanan]

IE9 supports the XMLSerialize, hence use the following check for IE if (window.ActiveXObject && (new XMLSerializer()) === undefined) {

[wloescher]

This worked great for a Windows 8 Metro app where I needed to store the XML as text in local storage, read it, and then process is into anonymous objects. I didn't have to rework any of my existing (which was expecting responseXML) at all. Thanks! +1

[ZiggyTheHamster]

This only works because jQuery has created HTML nodes for these. For something where jQuery is treating them like XML nodes (like $($.parseXML("<xml></xml>")), this will not work.

[U-Dev]

You made my day man !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!‌​!!!!!!!!!!!!!!!!!!!!‌​!!!!!!!!!!!!!!!!!!!!‌​!!!!!!!!!!!!!!!!!!!!‌​!!!!!!!!!!!!!! Love Youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu!!!!!!‌​!!!