AJAX请求没有被快速点击调用

用例：当一个锚点标签被点击时，发送信息到服务器，该项目已被点击。在这里你可以找到这个小提琴：http://jsfiddle.net/nXYQP/5/AJAX请求没有被快速点击调用

现在，当我做了一些快速点击锚标记，我可以看到处理程序被调用等于我点击的次数。但是从处理程序发送的AJAX请求的数量相当少。

使用Chrome Developer Tool检查发送的请求数量。按F12打开开发人员工具并导航到网络选项卡，然后单击锚标签查看它发送的请求数。

我无法推理此行为。请说明一下。

这里是我的代码：

<a id="inc" href="http://www.google.com"> Click me </a> 
<div id="container"> Click count will be updated here </div>

Javascript代码：

var text = "Click no:-"; 
var counter = 0; 

$("#inc").click(function() { 
    var new_request = new XMLHttpRequest();      
    var new_serverURL = "http://www.google.com"; 
    new_request.open('GET',new_serverURL,true); 
    new_request.send(null); 

    $("#container").html("<p>" + text + " " + counter + "</p>"); 
    counter++; 
});

来源

2012-11-30 sachinjain024

我试图与小提琴链接。如果我们慢点击，发送请求的数量似乎很好。所以我想有一些Ajax请求。有趣的事情！ –

也许Chrome会限制同时发生的XMLHttpRequest连接的数量。 –

我敢打赌，在取消XMLHttpRequests是离开（iframe的）当前页面的结果。

既然你不会阻止的click事件从触发它的默认行为（即获取引用文档）中的所有排队的事件处理程序回调被取消，一旦当前页面卸载（记住，虽然AJAX调用它们本身是异步的，事件处理程序回调的执行不是）。

编辑
实际上，对单个域的同时请求数量有限制。这个限制是由浏览器强加的，确实有很大的不同（2和6是最常见的）。

请参阅browserscope的网络测试。

编辑2
哦，顺便说一句。您可能需要使用POST而不是GET以确保浏览器不会因缓存命中而取消请求。如果您绝对需要进行每次点击计数，则应在致电new_request.open时将async标志设置为false。通过这种方式，所有的请求都会排队并一个接一个地运行。

快速修复：

var text = "Click no:-"; 
var counter = 0; 

$("#inc").click(function() { 
    var new_request = new XMLHttpRequest(); 

    var new_serverURL = "http://www.google.com"; 

    new_request.open('POST',new_serverURL,true); 
    new_request.send(null); 

    $("#container").html("<p>" + text + " " + ++counter + "</p>"); 
    // Prevent the link's default behavior 
    return false; 
});

来源

2012-11-30 10:30:17 aefxx

防止链接的默认行为甚至都不在使用。你可以在jsfiddle本身尝试：（ – sachinjain024

当然可以，AJAX调用被取消的原因是因为浏览器的跨域策略。试试这个http://jsfiddle.net/nXYQP/15/并亲自看看。 – aefxx

关于（快速）点击次数与实际发送的AJAX调用次数之间的差异：我编辑了我的答案以提供解释和获取统计信息的资源。 – aefxx

AJAX请求没有被快速点击调用

回答

相关问题