Question

I need to access XML files with JQuery. I tried these two ways but I can’t seem to contain them on one browser.

Here:

In Chrome, this works:

var xml = "<music><album>Beethoven</album></music>";
var result = $(xml).find("album").text();
alert(result);

Now I try to use it in conjunction with this code snippet, which works fine in IE:

jQuery.get('fruits.xml', function(data) {
    alert(data);
});

The problem is, if I put both these codes together, one of them don’t work on the other. So in Chrome I’d be able to access “Beethoven” while not being able to access “fruits.xml” but gives me this error:

XMLHttpRequest cannot load file:///C:/Python32/fruits.xml. Origin null is not allowed by Access-Control-Allow-Origin.

In IE on the other hand, I could access the whole content of fruits.xml and save it into a variable but the code for which I need to access XML attributes which works in Chrome doesn’t work in IE.

As you can see, I want to get the contents of the xml using the 2nd snippet of code, while I will access the contents of the xml using the 1st snippet of code. Is there another way to access XML with Javascript? Can you help me with what’s wrong with my codes?

Help?

Answer 1

The problem causing the error message is that you’re sending an XHRRequest (The A in *A*JAX) to a file:// URL. For security reasons, this is being disabled by modern browsers. Instead, set up a webserver und it to access your page, via http://localhost/.. instead of file://C:/....

For the second part, make sure that you test loading fruits.xml first. Chances are there is an error in the XML stored in this file, or its structure is not what you expect. You can debug JavaScript in IE by pressing F12, going to the Scripting tab, and clicking Start Debugger. That way, you’ll get a better error description than “doesn’t work”.