views:

704

answers:

1

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.org/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 computer, 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 accomplished by a complete PHP noob like myself.

Thanks for any help!

+1  A: 

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.org/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.

Vincent Robert
Awesome! So could you elaborate a bit more on the actual implementation of this? (Sorry, but like I said, I don't know the first thing about PHP :) ).Would I simply download a PHP proxy script, add it to my server, and then replace the URL I'm currently grabbing (through Javascript) with the URL you posted above?
blabus
Edited my answer with a very simple PHP proxy script
Vincent Robert
You are awesome man- that should work, as I don't need to do anything but read the data. However, I just wanted to walk through this one last time to confirm- I place that single line of PHP into an external PHP file (saved in my site directory), and then just add '/proxy?url=' before the URL I want to get, and that should do it?
blabus
EDIT: Spoke too soon- I added that PHP code you provided to a blank PHP file, saved it as 'proxy.php', and then added '/proxy?url=' to the beginning of the query URL, but still no luck- the 'success' function is never called, so it's still not getting the XML file.Any other ideas?
blabus
Also, do I have to replace all of the special characters with their escape characters for it to work? (as you did, i.e. '%3F')
blabus
When using the proxy, you should call it using /proxy.php?url= plus the escaped URL (use the Javascript "escape" function) to escape your URL. Try querying this URL in the browser first to see if you get results. Or try the Firebug extension in Firefox to monitor AJAX requests.
Vincent Robert
Alright, added the escape formatting to the query URL, but still nothing. I ran it through Firebug and it shows a 404 message. Also, if I just enter the escaped version of the original query URL (without the 'php?url=' part) I get redirected to a 'Invalid URL' site- are you sure the URL is supposed to be escaped?
blabus
Anyone have any other ideas? I literally have an entire application finished but completely useless because it can't run on a server.
blabus
Are you sure you are using the right URL for the proxy script. Using /proxy.php means that the script is at the root of the server, maybe it is in a directory or something else. You should try with your browser first to retrieve the XML file from musicbrainz.org through your proxy. Once you are successful to retrieve the file through the proxy, you can try to get it using Javascript.
Vincent Robert
Yeah, I realized that too- I did have the wrong path, so I changed it, but still the same 404 error (even when pasting into the browser). You can look at the test site here: http://www.5byfive.net/cue/index.htmlCould the error possibly be related to the fact that I'm trying to pass 2 different sets of arguments in the URL? (i.e. multiple '?' marks, since I'm passing the 'url' parameter to my actual proxy, and also the parameters for the MusicBrainz API)
blabus
Maybe this PHP script does not correctly handle url parameters, I didn't tested it. You could have a look on Google to see if a better proxy script exists.
Vincent Robert