Alright, so I'm building a web app that provides music information (i.e. info on artists, albums, songs, etc.) and for the info source I'm using the MusicBrainz API.

Now, I'm trying to load the data from an API call and process it, with jQuery. This is the code I'm using:

Code:
queryString="/?type=xml&name="+qry+"&limit=10"; 
$.ajax({url: queryString, dataType: ($.browser.msie) ? "text" : "xml", success: function(data){ 
      alert("success"); 
      var xml; 
      if (typeof data == "string") { 
             xml = new ActiveXObject("Microsoft.XMLDOM"); 
             xml.async = false; 
             xml.loadXML(data); 
        } else { 
             xml = data; 
        }; 
...

With 'queryString' being the URL string for the request, and then I'd proceed to read the data out of the 'xml' object. Fairly simple.

However, this is where problems arise. The code works flawlessly when running locally on my puter, but does not work at all when I upload everything to my web server and try to run it there. I did some reading and have discovered that AJAX calls can't be made across different domains, due to security issues.

So I've read through numerous solutions, but almost all require either something with PHP (which I have absolutely NO knowledge of) or grabbing the data in JSON format (which apparently isn't subject to the same security restrictions). However, my main problem is that the MusicBrainz API does not return data in JSON format (in fact the only format it returns is XML).

So in any event, I was basically just wondering if anyone could give me some help or pointers on if and how I could grab that remote XML file using only JS/jQuery. Or, point me toward another method that could be acplished by a plete PHP noob like myself.

Thanks for any help!

Alright, so I'm building a web app that provides music information (i.e. info on artists, albums, songs, etc.) and for the info source I'm using the MusicBrainz API.

Now, I'm trying to load the data from an API call and process it, with jQuery. This is the code I'm using:

Code:
queryString="http://musicbrainz/ws/1/artist/?type=xml&name="+qry+"&limit=10"; 
$.ajax({url: queryString, dataType: ($.browser.msie) ? "text" : "xml", success: function(data){ 
      alert("success"); 
      var xml; 
      if (typeof data == "string") { 
             xml = new ActiveXObject("Microsoft.XMLDOM"); 
             xml.async = false; 
             xml.loadXML(data); 
        } else { 
             xml = data; 
        }; 
...

With 'queryString' being the URL string for the request, and then I'd proceed to read the data out of the 'xml' object. Fairly simple.

However, this is where problems arise. The code works flawlessly when running locally on my puter, but does not work at all when I upload everything to my web server and try to run it there. I did some reading and have discovered that AJAX calls can't be made across different domains, due to security issues.

So I've read through numerous solutions, but almost all require either something with PHP (which I have absolutely NO knowledge of) or grabbing the data in JSON format (which apparently isn't subject to the same security restrictions). However, my main problem is that the MusicBrainz API does not return data in JSON format (in fact the only format it returns is XML).

So in any event, I was basically just wondering if anyone could give me some help or pointers on if and how I could grab that remote XML file using only JS/jQuery. Or, point me toward another method that could be acplished by a plete PHP noob like myself.

Thanks for any help!

• javascript
• jquery
• xml
• cross-domain

2 Answers 2

You require something on your server side to proxy your request to that other server. A URL that looks like:

/proxy?url=http%3A//musicbrainz/ws/1/artist/%3Ftype%3Dxml%26name%3Dexample%26limit%3D10

If PHP is available on your server, you can Google to find a generic PHP proxy script.

EDIT Here is an example of very simple PHP script that will retrieve a specified URL:

<?php readfile($_GET['url']) ?>

Note that you won't be able to POST any data to it, or specify a Content-Type. This is the most basic proxy required for very basic needs.

I understand that JSON is not an option right now but still, here is the explanation of why it can work for cross domain requests.

JSON being Javascript, it can be queried using the <script> tag instead of XMLHttpRequest. Since the <script> tag does not have the same restriction for cross domain request, it is possible to retrieve the JSON content this way.

This technique is called JSONP and is implemented in jQuery in the getJSON function.

If you don't want to setup your own proxy server, check out my response here: use jsonp to get xml cross domain