Facebook Graph API使用Ajax获取JSON

Question

这是我第一次在jQuery中使用Facebook.

我收到以下错误:

Uncaught SyntaxError: Unexpected token : 
www.facebook.com/feeds/page.php?id=20531316728&format=JSON
    &callback=jQuery110105899784066714346_1383828332964&_=1383828332965:2

码

$.ajax({
    url: 'http://www.facebook.com/feeds/page.php?id=20531316728&format=JSON',
    dataType: 'jsonp'
}).done(function(data) {
    alert(data);
});

的jsfiddle

我为什么要这个？

Answer 1

为什么不起作用？

作为Javascript框架的jQuery必须应用Ajax请求的实现规则,更具体地说是同源策略.简而言之,此限制表明Ajax请求只能在同一个域中执行.

这些信息也可以在jQuery $.ajax文档中找到:

由于浏览器安全限制,大多数"Ajax"请求都遵循相同的原始策略; 请求无法从其他域,子域或协议成功检索数据.

解决方法

YQL:Yahoo Query Language

Yahoo Query Language是一种富有表现力的类SQL语言,可让您跨Web服务查询,过滤和连接数据.使用YQL,应用程序运行速度更快,代码行数更少,网络占用空间更小.

资料来源:http://developer.yahoo.com/yql/

使用YQL作为代理

YQL可以用作代理,以便进行跨域Ajax调用.可以在此处找到解释:JavaScript:使用Web代理进行跨域XMLHttpRequest调用

码

var fbUrl = "http://www.facebook.com/feeds/page.php?id=20531316728&format=JSON";

$.ajax({
    url: "http://query.yahooapis.com/v1/public/yql",
    dataType: "jsonp",
    data: {
        q: 'select * from json where url="' + fbUrl + '"',
        format: "json"
    },
    success: function (data) {
        $.each(data.query.results.json.entries, function (i, v) {
            $('#entries').append(data.query.results.json.entries[i].title + '<br />');
        });
    }
});

jsFiddle here