Cross-domain Requests with jQuery doesn't work in Facebook App

Question

I want to make a HTTP request in order to receive the contents of the home page of the logged-in user of facebook.com inside my Facebook App. The app loads inside an iframe. I am using the Cross-domain Ajax mod for jQuery made by James Padolsey: http://james.padolsey.com/javascript/cross-domain-requests-with-jquery/ . This mod works fine for pages like google.com as presented in the examples.

Unfortunately if I try something like:

$('#container').load('http://www.facebook.com/');

I get no result and no errors. Furthermore if I try:

$.ajax({
            type: 'POST',
            url: 'http://www.facebook.com',
            success: function(html){
                process(html);
            },
            error: function(){
                debug("error");
            }
        });

I get an error in the Firebug Console which says: data.results[0] is undefined. This error is inside James Padolsey's Ajax mod so it doesn't have anything to do with any previous code I wrote in my script.

Any ideas?

Answer 1

JSON doesnt work cross domain. You need to use JSONP or better yet in the getJSON call use the "callback=?" parameter.

For example

$.getJSON("https://graph.facebook.com/me/friends?callback=?&access_token="+fbtoken, function(rtnmsg) {

}

Where fbtoken is your access token and rtnmsg is the return object. This one works for me.

Cheers