3

我发现了许多与我的问题类似的问题。也许是我，但我很难找到一个真正明确的答案来解释为什么我不能执行多个 json 请求或者为什么这不起作用。

这是我的 jQuery 代码：

$.getJSON('http://api.espn.com/v1/sports/basketball/nba/teams/16/news?apikey=0001234', function(data) {
    console.log(data.headlines);              
});

$.getJSON('http://api.espn.com/v1/sports/football/nfl/teams/16/news?apikey=0001234', function(data) {
    console.log(data.headlines);
});

这是我在控制台日志中收到的错误。 

XMLHttpRequest cannot load http://api.espn.com/v1/sports/football/nfl/teams/16/news?apikey=62t2h4tsdmhr2q7aynvjuv2s. Origin null is not allowed by Access-Control-Allow-Origin.

当我自己运行一个 $.getJSON 请求时，它工作正常。所以我假设这是因为我提出了多个请求。我只是不确定如何以不相互冲突的方式编写它。感谢任何帮助。谢谢

编辑

所以我猜那个问题..是否可以通过这种方式进行多个请求。我的代码有问题吗？或者它很可能是 ESPN 的 API 的问题。我可以尝试使用 yahoo api，看看是否得到相同的结果。

4

3 回答 3

4

你能一个接一个地触发两个 json 请求吗？

是的。他们不会互相干扰。

ESPN 会为这两个请求返回数据吗？

目前没有。您的第二个请求将返回 403 响应。他们可能会在某个时候改变这一点，谁知道......

为什么我会收到错误消息Origin null is not allowed by Access-Control-Allow-Origin.？

正如您在评论中提到的，您的脚本是从一个以file://. 如本答案所述

CORS 标头有两种方式表明跨域 XHR 正常。一种是发送 Access-Control-Allow-Origin: * （如果您是通过 $.get 访问 Flickr，他们一定是这样做的），另一种是回显 Origin 标头的内容。但是，file:// URL 会产生一个空的 Origin，无法通过回显授权。

一旦您将文件托管在某个服务器上，即使localhost，您也不会收到该错误。作为替代方案，jsonp如果 ESPN 支持，您可以尝试使用请求。

试试这个查询，

$.getJSON('http://api.espn.com/v1/sports/football/nfl/teams/16/news?apikey=0001234&callback=?',     
function(data) {
    console.log(data.headlines);
});

请注意&callback=?网址末尾的...

于 2012-07-15T18:43:23.590 回答
2

$.getJSON发出多个调用在概念上没有任何问题。虽然，正如 Amith George 在对原始问题的评论中提到的那样，如果您超出允许的速率限制，您可能会收到 403 回复。（Twitter 使用此响应代码；我不确定 ESPN 是否使用。）

对我来说，当这些 JSON 调用是托管在域（例如 jsfiddle.net）中的 HTML 文件的一部分时，我会将两个对象记录到控制台（请参阅http://jsfiddle.net/pGBmT/）。这使用 jquery 1.7.2。

如果我在 HTML 文件中尝试旧版本的 jquery (1.3)，我会收到您注意到的错误。

但是，当我使用 jquery 1.7.2 时，它在本地也可以正常工作（尽管其他人报告了偶尔的问题）。这是我在本地尝试的文件：

<!doctype html>
<html>
  <head><meta charset="utf-8"><title>Test</title></head>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
      $.getJSON('http://api.espn.com/v1/sports/basketball/nba/teams/16/news?apikey=62t2h4tsdmhr2q7aynvjuv2s', function(data) {
        console.log(data.headlines);              
      });
      $.getJSON('http://api.espn.com/v1/sports/football/nfl/teams/16/news?apikey=62t2h4tsdmhr2q7aynvjuv2s', function(data) {
        console.log(data.headlines);
      });
    </script>
  </body>
</html>

您可以尝试连续多次重新加载。大多数时候我认为没有问题，但偶尔会收到 403。通常我会得到一个成功的响应，第二个是原始错误。

我最好的猜测是速率限制问题。尝试将其中一个呼叫setTimeout延迟 3 或 4 秒。当我尝试这个时：

<!doctype html>
<html>
  <head><meta charset="utf-8"><title>Test</title></head>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
      $.getJSON('http://api.espn.com/v1/sports/basketball/nba/teams/16/news?apikey=62t2h4tsdmhr2q7aynvjuv2s', function(data) {
        console.log(data.headlines);              
      });
      setTimeout(function () {$.getJSON('http://api.espn.com/v1/sports/football/nfl/teams/16/news?apikey=62t2h4tsdmhr2q7aynvjuv2s', function(data) {
        console.log(data.headlines);
      })}, 4000);
    </script>

​​​

它连续工作了5次，没有任何问题！

于 2012-07-15T18:30:59.277 回答
1

我很难看到即使是单个getJSON()请求也可以工作。默认情况下，您不允许进行跨域浏览器请求 - 这就是您的错误消息所述。

要进行跨域请求，您必须使用 JSON-P（如果 API 支持它），或者在您自己的域中设置服务器端代理，您可以使用 Ajax 请求调用它 - 从而避免跨域域请求。

于 2012-07-15T18:13:01.700 回答