javascript - 在 window.unload 上进行 ajax 调用

Question

在我的应用程序中，有一个对象需要在用户切换到另一个页面或关闭浏览器之前通过 ajax 返回到服务器。

目前，我正在使用这样的东西:

$(window).on('unload', function () {
    $.ajax(....);       
});

ajax 调用是否会在所有浏览器中触发，或者在某些情况下这将不起作用并且需要以不同方式处理这种情况？我不需要处理成功函数方面的任何事情，我只关心发送到服务器的信息。

谢谢。

Answer 1

如果您使用的是 jQuery，则可以在 ajax 调用中将 async 设置为 false。它可能有效，但您的结果可能因浏览器而异。这是一个 jsFiddle 示例。 http://jsfiddle.net/jtaylor/wRkZr/4/

// Note:  I came across a couple articles saying we may should to use window.onbeforeunload instead of or in addition to jQuery's unload.  Keep an eye on this.
//        http://vidasp.net/jQuery-unload.html
//        https://stackoverflow.com/questions/1802930/setting-onbeforeunload-on-body-element-in-chrome-and-ie-using-jquery

var doAjaxBeforeUnloadEnabled = true; // We hook into window.onbeforeunload and bind some jQuery events to confirmBeforeUnload.  This variable is used to prevent us from showing both messages during a single event.


var doAjaxBeforeUnload = function (evt) {
    if (!doAjaxBeforeUnloadEnabled) {
        return;
    }
    doAjaxBeforeUnloadEnabled = false;
    jQuery.ajax({
        url: "/",
        success: function (a) {
            console.debug("Ajax call finished");
        },
        async: false /* Not recommended.  This is the dangerous part.  Your mileage may vary. */
    });
}

$(document).ready(function () {
    window.onbeforeunload = doAjaxBeforeUnload;
    $(window).unload(doAjaxBeforeUnload);
});

在 Google Chrome 中，ajax 调用总是在我离开页面之前完成。

但是，我非常不推荐走那条路。 ajax 中的“a”代表“异步”，如果您试图强制执行同步调用，那您就是在自找麻烦。该问题通常表现为卡住浏览器——如果 ajax 调用花费了很长时间，则可能会发生这种情况。

如果可行，如果页面包含需要通过 ajax 发布的数据，请考虑在离开页面之前提示用户。例如，请参阅以下问题:jquery prompt to save data onbeforeunload