jquery - 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

为什么不起作用？

jQuery 作为一个 Javascript 框架，必须应用 Ajax 请求的实现规则，更具体地说是 Same-origin policy。一。简而言之，此限制表示 Ajax 请求只能针对同一域执行。

此信息也可以在 jQuery $.ajax documentation 中找到:

Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.

解决方法

YQL:雅虎查询语言

The Yahoo Query Language is an expressive SQL-like language that lets you query, filter, and join data across Web services. With YQL, apps run faster with fewer lines of code and a smaller network footprint.

Source: http://developer.yahoo.com/yql/

使用 YQL 作为代理

YQL 可以用作代理，以便使跨域 Ajax 调用成为可能。可以在这里找到解释:JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls

代码

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