在ChromeDeveloper工具中，状态=取消资源意味着什么？

Question

在ChromeDeveloper工具中，状态=取消资源意味着什么？什么会导致页面被取消？我有Chrome开发者工具的截图。这种情况经常发生，但不是每次都发生。看起来，一旦缓存了其他资源，页面刷新就会加载LeftPane.aspx。而真正奇怪的是，这只发生在谷歌Chrome，而不是InternetExplorer 8。你知道Chrome为什么会取消一个请求吗？

Answer 1

我们遇到了一个类似的问题，Chrome取消了在帧或iframes中加载东西的请求，但只是间歇性的，它似乎取决于计算机和/或互联网连接的速度。

这个信息已经过时几个月了，但是我从头开始构建了Chromium，在源代码中找到了所有请求可能被取消的地方，并在所有请求上设置了断点来进行调试。在内存中，Chrome将取消请求的唯一位置：

• 导致请求被删除的DOM元素(即正在加载IMG，但在加载之前，删除了IMG节点)
• 您所做的事情使加载数据变得不必要。(也就是说，您开始加载iframe，然后更改src或覆盖内容)
• 有很多请求发送到同一台服务器，而早期请求的网络问题表明后续请求无法工作(DNS查找错误，早期(相同)请求导致HTTP 400错误代码等)。

在我们的示例中，我们最终将其追溯到试图将HTML附加到另一个框架的一个框架，这有时发生在目标帧加载之前。一旦您触摸了iframe的内容，它就无法再将资源加载到其中(它如何知道将其放在何处？)所以它取消了请求。

Answer 2

Status=Canced也可能发生在JavaScript事件的Ajax请求上：

<script>
  $("#call_ajax").on("click", function(event){
     $.ajax({
        ...    
     });
  });
</script>

<button id="call_ajax">call</button>

事件成功发送请求，但随后被取消(但由服务器处理)。原因是，元素在单击事件上提交表单，无论您是否对同一个单击事件发出任何Ajax请求。

为了防止请求被取消，必须调用JavaScriptEvent.PretectionDefault()；：

<script>
  $("#call_ajax").on("click", function(event){
     event.preventDefault();
     $.ajax({
        ...    
     });
  });
</script>

Answer 3

注意：确保你没有任何包装形式元素.

我也遇到了一个类似的问题，即我的onClick={}按钮被包装在一个Form元素中。当点击按钮时，表单也被提交了，这就把所有的事情都搞砸了.

这个答案可能永远不会被任何人读到，但我想为什么不写出来呢：)