How to query the Facebook Graph API with JSONP

Question

Shouldn't follow AJAX request with JQuery work?

$.getJSON('https://graph.facebook.com/138654562862101/feed?callback=onLoadJSONP');

I have defined a callback function named onLoadJSONP.

But Chrome gives me a typical Same-Origin-Policy error:

XMLHttpRequest cannot load https://graph.facebook.com/138654562862101/feed?callback=onLoadJSONP. Origin null is not allowed by Access-Control-Allow-Origin.

I thought JSONP worked around that, what am I doing wrong?

Answer 1

jQuery detects JSONP desired behavior specifically with callback=?, so you'll need exactly that, then pass the function you want to handle it. With no outside changes, you could do this:

$.getJSON('https://graph.facebook.com/138654562862101/feed?callback=?', onLoadJSONP);

This allows the search for callback=? to still work by using your function as the callback directly. Previously, it wasn't detecthing that you wanted a JSONP fetch, and was trying to use an XMLHttpRequest to grab the data...which fails due to the same origin policy restriction.

Answer 2

It has to be "callback=?" and then you define the callback as the last parameter of the request.

$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
  {
    tags: "cat",
    tagmode: "any",
    format: "json"
  },
  function(data) {
    $.each(data.items, function(i,item){
      $("<img/>").attr("src", item.media.m).appendTo("#images");
      if ( i == 3 ) return false;
    });
  });