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?

Solution 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.

Solution 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;
    });
  });

Solution 3

Simple add following JavaScript code before you make any cross-domain AJAX call.

jQuery.support.cors = true;

$.ajaxTransport("+*", function( options, originalOptions, jqXHR ) {

  if(jQuery.browser.msie && window.XDomainRequest) {

    var xdr;

    return {

        send: function( headers, completeCallback ) {

            // Use Microsoft XDR
            xdr = new XDomainRequest();

            xdr.open("get", options.url);

            xdr.onload = function() {

                if(this.contentType.match(/\/xml/)){

                    var dom = new ActiveXObject("Microsoft.XMLDOM");
                    dom.async = false;
                    dom.loadXML(this.responseText);
                    completeCallback(200, "success", [dom]);

                }else{

                    completeCallback(200, "success", [this.responseText]);

                }

            };

            xdr.ontimeout = function(){
                completeCallback(408, "error", ["The request timed out."]);
            };

            xdr.onerror = function(){
                completeCallback(404, "error", ["The requested resource could not be found."]);
            };

            xdr.send();
      },
      abort: function() {
          if(xdr)xdr.abort();
      }
    };
  }
});

Comments

[user1055761]

Does this work in IE as well ? (This is working for Chrome and Firefox for me, but fails in IE). Thanks.

[user1055761]

it gives me 'no transport' error, when debugging thru IE debugger. Have you got this working on IE ? Thanks !

[Simon East]

Note that graph requests now need to use an authentication token - calls that are missing a token are now denied. It's not super-well documented, but you can use application tokens for this kind of client-side JSON request.