浏览器偶尔中止Ajax请求而不返回任何错误[重复]答案

【问题标题】：Browser aborting Ajax requests sporadically without returning any errors [duplicate]浏览器偶尔中止Ajax请求而不返回任何错误[重复]
【发布时间】：2015-01-19 15:25:39
【问题描述】：

在我的项目中（PHP 和 Symfony 2）我在每个页面中都做了很多 Ajax 请求。我遇到了很多问题，因为看起来浏览器（在Google Chrome 和Firefox 中测试）正在中止请求而没有给我错误。我已经做了一个干净的页面来测试可能导致此问题的原因并且错误仍然存在。我已经尝试在 for 循环内进行 10 个请求的测试（我相信我们没有任何问题，对吧？）。

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Test page</title>
    </head>
    <body>Test page.
        <script type="text/javascript" src="/js/compressed_jquery-1.8.2.min_1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                for (var i = 0; i < 10; i++) {
                    $.get('/i18n/javaScript/pt.json', function(data) {
                        console.log(data);
                    });
                }
            });
        </script>
    </body>
</html>

这里是Firebug的请求结果截图：

如您所见，有些请求已完成，有些则未完成。有时浏览器会完成所有 10 个请求而不会出错。这可能是什么原因造成的？

我已经测试了所有解决方案，但我很确定这是 Windows、Apache 或 PHP 配置问题。今天我在我的机器上配置了一个VM，VirtualBox 运行Ubuntu 13.04（Raring Ringtail）和 Apache 2.2 + PHP，并且没有发生错误，证明这与我的JavaScript、HTML 或 PHP 无关代码。我不确定这是配置问题。如何发现此配置？

【问题讨论】：

看起来所有请求都发往同一个 URL：那么每个请求是因为缓存已完成还是因为出现错误而中止？如果您添加一个随机查询字符串值（即破坏缓存），情况会发生变化吗？
我不认为这是一个查询问题，因为当使用缓存时，浏览器会收到 302（未更改）响应。在我的真实代码中，所有请求都有不同的 URL。
我已经用这个 url 尝试了我的示例：'/i18n/javaScript/pt.json?t=' + Math.floor(Math.random()*101) 并且错误仍然存在。这不是缓存问题。 =/
在这种情况下看看这个stackoverflow.com/questions/4238135/…
我不知道这个限制之王。所以我只能同时做4个请求？我不知道该怎么做，因为在我的页面中我有很多不同捆绑包的请求。有什么替代方案吗？

标签： javascript jquery ajax symfony xmlhttprequest

【解决方案1】：

可以满足您的需求，一个一个发送请求应该避免服务器拒绝一些并行请求：

TEST IT

$(document).ready(function () {
    var tot = 30; //to simulate 30 requests
    (function request(i){
        if(i === tot) return;
        $.get('/echo/html/?'+i, function (data) {
            console.log("success");
        }).always(function() { request(++i) });
    })(0);
});

【讨论】：

谢谢@roasted，但正如我所说，它不起作用，因为它与发出的请求不同。这是来自不同资源的许多不同请求（一个不知道其他）。我仅将此逻辑用作测试。但无论如何不可能是因为运行代码在我的服务器中运行并行请求成功！ =/
服务器一次不能处理超过设定数量的来自单个客户端的请求。这是为了防止您的服务器被单个客户端占用。如果它们都是针对同一主机的，那么它们都是不同的请求并不重要。根据 HTTP 规范，一次最多允许 2 个。一些服务器和浏览器给你的远不止这些。
有一个技巧，您可以在其中为子域设置别名并将它们指向根域。大多数浏览器会为每个子域提供两个连接，另外两个用于根域。

【解决方案2】：

您可以使用全局对象序列化请求：

function AjaxRequester() {
    this.queue = [];
}

AjaxRequester.prototype.doRequest(request){
    if (this.queue.length>0){
        this.queue.push(request)
    }
    else 
       handleRequest(request)
}

AjaxRequester.prototype.handleRequest(request){
    /* actually handle ajax request, on complete inspect 
       queue and if not empty recall this method on the first
       element */
}

requester = new AjaxRequester();

进入你的代码，做

requester.doRequest(yourRequest);

【讨论】：

【解决方案3】：

我认为您的服务器响应时间过长并且浏览器超时。可能是浏览器将只有两个与服务器的打开连接，并且当前两个花费太长时间时正在中止最后一个 8/10。我会检查您的服务器日志以确认这一点。

当服务器看到对/i18n/javaScript/pt.json 的请求时，它在做什么？四秒钟是很长的时间。尝试获取一些静态内容，例如图像或一些静态 HTML 而不是 pt.json，看看是否能解决问题。

如果你需要做大量的计算来产生pt.json，它可以被缓存吗？它很大吗？你在用 Apache 吗？

【讨论】：

这不是一个复杂的请求。它是一个由服务器返回的 json，仅包含 2kb。但是让我们假设可以，因为它是我的 DEV 环境，并且打开了很多调试消息。如何使浏览器不会因这些请求而超时？我正在使用 Apache 和 Wamp 2.2
在尝试修复它之前，第一步是确认我所说的是真的。您是否尝试过 ajax 加载一些静态文件？

【解决方案4】：

如果这是一个缓存问题，那么你可以试试这个：

在页面标题中添加以下标记。这将阻止浏览器缓存任何数据。

<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1990 12:00:00 GMT" />

这将在大多数浏览器中禁用缓存，并且您的数据将在每次刷新时获取，因为没有缓存，

还有一件事。您的数据被循环调用......我可以说这是一个具有相同请求的连续调用，因此该请求可能被视为重复请求并可能被服务取消；因为如果一次又一次发送相同的请求，这可能会被视为请求泛滥......

尝试在调用时添加一些东西，像这样..

for (var i = 0; i < 10; i++) {
    $.get('/i18n/javaScript/pt.json?v='+i, function(data) {
        console.log(data);
    });
}

然后用一些东西来处理请求。试试看它是否有效..

如果调用 open() 时使用 jQuery，它是内置的，并且会产生效果。

参考 Stack Overflow 旧帖 How to solve Firebug’s “Aborted” messages upon Ajax requests?。

我相信这会给您带来积极的解决方案...

【讨论】：