如何在不发生冲突的情况下处理多个json请求

How to do multiple json requests without conflict

本文关键字：处理 情况下 请求 json 冲突      更新时间：2023-09-26

我发现了许多与我的问题类似的问题。也许是我自己，但我很难找到一个真正明确的答案，为什么我不能处理多个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的问题。我可以尝试使用yahooapi，看看是否得到相同的结果。

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

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

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

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

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

正如您在评论中提到的，您的脚本是从一个以file://开头的url执行的。如本答案所述

CORS标头有两种方式来发出跨域XHR可以。一种是发送访问控制允许来源：*（如果您是通过$.get访问Flickr的，他们一定一直在做）另一个是回显Origin标头的内容。然而file://URL产生一个空的Origin，不能通过回显。

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

尝试此查询，

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

请注意url末尾的&callback=?。。。

发出多个$.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分。通常，我会得到一个成功的响应，第二个响应出现原点错误。

我的最佳猜测是利率限制问题。尝试在延迟3或4秒的setTimeout中放置其中一个调用。当我尝试这个：

<!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次，没有任何问题！

我很难理解一个getJSON()请求是如何工作的。默认情况下，您不允许进行跨域浏览器请求，这就是您的错误消息所说的。

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

相关文章：