Cross-domain requests with JQuery using YQL

Question

So I need to make a a cross domain request where the response is not JSON formatted, so I cannot use .getJSON. .get obviously doesn't work because it is a cross domain request.

I came across this (Read this) when I was googling and it seems it should work for what I want to do (which is do a cross domain call that isn't json formatted using a jquery plug in). My code looks like the following. I know the url works fine because if I paste it into my browser, I can see the response, which according to last.fm documentation

The body of the server response consists of a series of \n (ASCII 10) terminated lines. A typical successful server response will be something like this:

OK
17E61E13454CDD8B68E8D7DEEEDF6170
http://post.audioscrobbler.com:80/np_1.2
http://post2.audioscrobbler.com:80/protocol_1.2

So I know my URL is fine. Now I am wondering how I get at this information, and why my version of their example does not work.

function performHandshake(sk, token, ts){

    var token = md5(apiSecret + ts);
    var urlToUse = "http://post.audioscrobbler.com/?hs=true&p=1.2.1&c=tst&v=1.0&u=chamals&t=" + ts + "&a=" + token + "&api_key=" + apiKey + "&sk=" + sk + "&format=xml&callback=cbfunc";
            $('#container').load(urlToUse);
    $.ajax({
        url: urlToUse,
        type: 'GET',
        success: function(res){
            var headline = $(res.responseText).find('a.tst').text();
            window.console.log(headline);   
        }   
    });

}

Answer 1

Yeah, cross browser scripting. You can't AJAX anything like that since it violates the same domain policy.

You are going to have to setup a proxy on the same server the JavaScript is running from.

Edit Lookslike you need the $('#container').load(url) bit for that to work.

Go back an reread the linked article carefully.

Answer 2

The var res actually has my information that I needed. I guess their headline = part was specifically for their implementation.

Thanks to those who helped!

Answer 3

Well the page you linked you talks about using YQL and jQuery. It's a very interesting solution. However, your example seems to skip over the YQL part (which is crucial).

var urlToUse = "http://post.audioscrobbler.com/?hs=true&p=1.2.1&c=tst&v=1.0&u=chamals&t=" + ts + "&a=" + token + "&api_key=" + apiKey + "&sk=" + sk + "&format=xml&callback=cbfunc";

var yqlUrl2Use = "http://query.yahooapis.com/v1/public/yql?"+
            "q=select%20*%20from%20html%20where%20url%3D%22"+
            encodeURIComponent(urlToUse)+
            "%22&format=xml'&callback=?"
    // this function gets the data from the successful 
    // JSON-P call

Then you'll have to call the call the new URL as a JSONP req...

$.getJSON(yqlUrl2Use, function(json){
    // figure out the format of the answer here...   
});

Answer 4

You need to use $.getJSON rather than $.ajax() to return cross site information.