如何使用JavaScript取消HTTP请求

Question

我有一个页面，其中附加了一个事件处理程序到一个onclick事件。当事件触发时，它将文本框的内容传递给一个GET请求。由于URL不在同一域中，所以我创建了一个脚本标签，并将URL附加到其源上，如下所示：

elem.onclick=fire;

function fire()
{
var text=document.getElementById('text').value;
var script=document.createElement("script");
script.className="temp";
script.src="some url"+"?param="+text;
document.body.appendChild(script);
}

现在，如果该事件被触发多次，我希望取消所有先前的 GET 请求（因为它们可能仍在接收响应），并使用最新的文本进行 GET 请求。但是，为此我需要取消以前的请求。我尝试过

document.body.removeChild(script);
script.src=null;

但是在 Firefox 中这并不起作用（我正在使用 Firefox 5），尽管在 Google Chrome 中可以。有人知道在 Firefox 中是否可以取消这些请求，如果可以，那么应该如何取消？

---

更新 正如 Alfred 所建议的，我使用了 window.stop 来取消请求，但它并没有取消请求，而是挂起了请求。这意味着当我查看 Firebug 时，看起来请求正在进行中，但没有响应。

- lovesh

---

你会考虑使用像jQuery这样的库吗？ - Matt Ball

@Matt Ball 当然可以。但您能否建议一些纯JavaScript的内容，因为我想了解它是如何完成的？ - lovesh

我在stackoveflow.com上进行了搜索，并找到了以下答案。 - Alfred

@Alfred，非常感谢，但是你知道吗，当我在Firebug的网络面板中检查时，请求似乎已经挂起了，而不是被取消了，我也无法发出任何其他请求。 - lovesh

@Alfred，我能取消一个挂起的请求吗？ - lovesh

@lovesh 好的 :). 顺便说一下，JQuery 也可以停止请求（我相信甚至/也有 JSON-p / 脚本标签）。或许你应该检查一下 JQuery 的源代码，看看它们是如何实现的 => http://pastebin.com/VSKPDCbh - Alfred

Answer 1

解决方案很简单：在创建HTTP请求时，使用<img>元素代替<script>元素。同时，您必须始终更改相同元素的src属性。

var img;
function fire()
{
    var text = document.getElementById('text').value;
    var im = img || (img = new Image());
    im.src = "url"+"?param="+text;
}

您可以通过以下方式确认它确实有效：您请求的URL应具有巨大的响应时间（您可以使用PHP的sleep函数来确保这一点）。然后，在Firebug中打开Net选项卡。如果您多次单击按钮，则会发现所有未完成的请求都被中止。

- duri

---

我该如何取消请求？ - lovesh

@lovesh 如果您创建另一个请求，则未完成的请求将自动取消。如果您想取消请求而不创建另一个请求，可以通过设置img.src = '';来实现。 - duri

Answer 2

完全凭直觉，但如果脚本标签还没有加载完成，你可以简单地使用 script.parentElement.removeChild( script )。这基本上是 mootools 做的事情。(从技术上讲，他们首先用 /\s+/ 替换 ' '，但这似乎并不是非常重要)。

- cwallenpoole

---

这意味着HTTP请求没有被取消吗？ - lovesh

它应该相当于 XMLHttpRequest.abort();，但不能保证，我以前从未这样做过。 - cwallenpoole

Answer 3

我不确定这是否是您要寻找的内容，但它似乎是一个类似的问题： http://www.velocityreviews.com/forums/t506018-how-to-cancel-http-request-from-javascript.html

- dwmcc

---

我正在客户端完成所有这些操作。在那里找不到任何有用的东西。 - lovesh

尽管链接文章的标题如此，但它实际上是关于让PostBack在ASP.NET服务器上工作，并且与ASP.NET特定细节密切相关。 - ToolmakerSteve

Answer 4

你是否可以使用JS框架？如果可以的话，MooTools的Request.JSONP对象已经内置了这个功能。

- Ruy Diaz

---

我不介意使用框架，但我想知道它是如何完成的。你可以解释一下，或者给一个链接来说明吗？ - lovesh

你能解释一下怎么做吗？我看到了链接，知道这可以用JavaScript +1完成。 - lovesh

浏览源代码，它似乎只是从 DOM 中删除脚本标签并将脚本变量设置为 null。也许你缺少的是最后一步，因为只要有对其的引用，请求可能不会被取消。虽然我不确定这一点。 - Ruy Diaz

我尝试了，但是不起作用。我可以在Firebug中看到请求仍在处理中。 - lovesh

Answer 5

为了解决跨域问题，你可以尝试使用CORS（跨源资源共享）代替（假设你可以更改服务器上的内容）： http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/ 如果这样做，你就可以使用更标准的XMLHttpRequest的abort()函数。

CORS与所有主要的现代浏览器兼容，除了Opera（http://caniuse.com/cors）。

- mahemoff