如何使用 JSONP 查询 Facebook Graph API答案

【问题标题】：How to query the Facebook Graph API with JSONP如何使用 JSONP 查询 Facebook Graph API
【发布时间】：2011-06-07 20:58:11
【问题描述】：

JQuery 工作不应该遵循 AJAX 请求吗？

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

我已经定义了一个名为onLoadJSONP的回调函数。

但是 Chrome 给了我一个典型的 Same-Origin-Policy 错误：

XMLHttpRequest 无法加载 https://graph.facebook.com/138654562862101/feed?callback=onLoadJSONP。 Origin null 不允许访问控制允许来源。

我认为 JSONP 可以解决这个问题，我做错了什么？

【问题讨论】：

标签： jquery facebook jsonp

【解决方案1】：

在进行任何跨域 AJAX 调用之前，只需添加以下 JavaScript 代码。

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

【讨论】：

【解决方案2】：

它必须是“回调=？”然后将回调定义为请求的最后一个参数。

$.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;
    });
  });

【讨论】：

【解决方案3】：

jQuery detects JSONP desired behavior 特别是和callback=?，所以你需要正是那个，然后传递你想要处理的函数。在没有外部更改的情况下，您可以这样做：

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

这允许通过直接使用您的函数作为回调来搜索callback=?。以前，它没有检测到您想要获取 JSONP，而是尝试使用 XMLHttpRequest 来获取数据...由于相同的来源策略限制而失败。

【讨论】：

这在 IE 中也有效吗？（这对我来说适用于 Chrome 和 Firefox，但在 IE 中失败）。谢谢。
在通过 IE 调试器进行调试时，它给了我“无传输”错误。你有这个在 IE 上工作吗？谢谢！
请注意，图形请求现在需要使用身份验证令牌 - 缺少令牌的调用现在被拒绝。它的文档记录不是很好，但您可以将 应用程序令牌 用于这种客户端 JSON 请求。