如何使用javascript取消http请求答案

【问题标题】：how to cancel http request using javascript如何使用javascript取消http请求
【发布时间】：2011-10-15 11:40:35
【问题描述】：

我有一个页面，其中有一个事件处理程序附加到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 时，它看起来好像正在发出请求但没有响应。

【问题讨论】：

你会考虑使用像jQuery这样的库吗？
@Matt Ball 我当然会。但你也可以建议普通的 javascript bcoz 我想了解它是如何完成的吗？
我在stackoveflow.com上进行了搜索，找到了[以下答案][1] [1]：stackoverflow.com/questions/117551/…
@Alfred 嘿，非常感谢，但你知道，当我在 firefug 的网络面板中检查时，请求似乎已挂起，实际上并没有取消，我也无法提出任何其他请求
@Alfred 我可以取消特定的挂断请求吗？

标签： javascript events firefox dom request-cancelling

【解决方案1】：

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

【讨论】：

我在客户端做这一切。找不到任何有用的东西
尽管有链接文章的标题，但它实际上是关于将回发到 ASP.NET 服务器以使其工作，并且与特定于 ASP.NET 的细节密切相关。

【解决方案2】：

你可以使用 JS 框架吗？如果是这样，MooTools 会在其 Request.JSONP 对象中内置此功能

【讨论】：

我不介意使用框架，但我想知道它是如何完成的。你能解释一下或给出一个解释的链接吗
你能解释一下它是怎么做的吗？我看到了链接，我知道这可以在 javascript +1 中完成
查看它的源代码，它似乎只是从 DOM 中删除脚本标签并将脚本变量设置为 null。也许这最后一步是您所缺少的，因为只要有对它的引用，该请求就不会被取消。不过，不确定这一点。
我试过但没有用。我可以在 firebug 请求中看到仍在处理中

【解决方案3】：

这完全是从臀部拍摄，但如果脚本标签尚未完成加载，您可能只需script.parentElement.removeChild( script )。无论如何，这或多或少是 mootools 所做的。（从技术上讲，他们首先将/\s+/ 替换为' '，但这似乎并不是非常重要）。

【讨论】：

这表示HTTP请求没有被取消？
它应该相当于XMLHttpRequest.abort(); 但不能保证，我以前从未真正这样做过。

【解决方案4】：

解决方案很简单：创建 HTTP 请求时，使用 <img> 代替 <script> 元素。此外，您始终必须更改 same 元素的 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 选项卡。如果您多次单击该按钮，您会看到所有未完成的请求都被中止。

【讨论】：

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

【解决方案5】：

要解决跨域问题，您可以改用 CORS（假设您可以更改服务器上的内容）： http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/

如果你这样做，你可以使用更标准的 XMLHttpRequest 的 abort() 函数。

CORS 与除 Opera (http://caniuse.com/cors) 之外的所有主要现代浏览器兼容。

【讨论】：