离开页面前立即调用 AJAX答案

【问题标题】：AJAX calls immediately before leaving page离开页面前立即调用 AJAX
【发布时间】：2011-06-22 20:21:40
【问题描述】：

当用户单击指向另一个页面的链接时，我想执行一个简单的 AJAX 获取请求。 AJAX 调用会完成还是会因为用户离开发起 AJAX 请求的页面而停止？我并不真正关心 get 请求的响应。

有什么想法或想法吗？

【问题讨论】：

Ajax request with JQuery on page unload 的可能重复项（虽然是 jQuery，前提是一样的）
在提出新问题之前接受您的其他一些答案。
将点击事件处理程序添加到外部链接，执行ajax请求，根据请求成功/失败将用户重定向到链接href...

【解决方案1】：

如果您只想将数据发送到您的服务器而不关心响应，您可能需要尝试 beacon 请求。基本上就是这样，一劳永逸的事情是这样的：

function sendInfo(something) {
     var beacon = new Image();
         beacon.src = '/somepath/script.pl?info=' + something;
}

$('a[href^=http]').bind('click', function(e) {
    sendInfo(escape(e.href));
});

好吧，这种技术不会阻塞，因此浏览器是否会触发请求可能是一种竞争条件（我没有为此进行测试）。为确保请求会触发，请像这样调用 ajax 调用：

$('a[href^=http]').bind('click', function(e) {
    $.get('/somepath/script.pl', {info: escape(e.href)}, function(data) {
        location.href = e.href;
    });

    return false;
});

【讨论】：

谢谢安迪，这真的很有帮助。我用信标方法结束了你。
我已经针对类似需求测试了信标解决方案，它适用于除 chrome (17.0.942.0 dev) 之外的所有浏览器，其中几乎从不加载图像，即使将 url 随机化为避免缓存命中，因此必须进行优化以避免加载“无用”图像。

【解决方案2】：

我知道这个问题很久以前就被问过、回答和接受了……但我最近问了自己同样的问题，找到了 jAndy 的答案，并稍微改进了一下（关于 Chrome 兼容性问题）并认为我会发布我的发现。

Andy 的信标回答既好又简单，但正如 SirDarius 所提到的，Chrome 似乎已经过优化以忽略它。

我修改了jAndy的代码如下：

function sendInfo(something) {
     var beacon = new Image();
         beacon.src = '/somepath/script.pl?info=' + something;
}

$('a[href^=http]').bind('click', function(e) {
    sendInfo(escape(e.href));
    setTimeout(function() {window.location.href=e.href;},0); // change window location on timeout
    return false; // cancel current window location change
});

这似乎解决了这个问题。

谢谢安迪！

【讨论】：