在我的应用程序中,有一个对象需要在用户切换到另一个页面或关闭他的浏览器之前被 ajaxed 回服务器。
目前,我正在使用这样的东西:
$(window).on('unload', function () {
$.ajax(....);
});
ajax 会在所有浏览器中调用,还是在某些情况下这不起作用并且需要以不同方式处理这种情况?就成功功能而言,我不需要处理任何事情,我只关心将其发送到服务器的信息。
谢谢。
在我的应用程序中,有一个对象需要在用户切换到另一个页面或关闭他的浏览器之前被 ajaxed 回服务器。
目前,我正在使用这样的东西:
$(window).on('unload', function () {
$.ajax(....);
});
ajax 会在所有浏览器中调用,还是在某些情况下这不起作用并且需要以不同方式处理这种情况?就成功功能而言,我不需要处理任何事情,我只关心将其发送到服务器的信息。
谢谢。
如果您使用的是 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
不,不幸的是,您的 Ajax 调用不会完成,因为文档将在异步调用期间卸载。当用户关闭窗口时,你不能做很多事情。
您可以打开一个弹出窗口,而不是执行 ajax 同步调用(在最新的浏览器上已弃用并且可能会出现异常):
$(window).on('unload', function () {
window.open("myscript.php");
});
您可以向链接添加明显的参数,如果您愿意,您可以自动关闭弹出窗口。必须在浏览器选项中为您的域禁用弹出窗口阻止程序。
您必须使用 onbeforeunload 事件并进行同步 AJAX 调用。
$.ajax({
...
"url": "http://www.example.com",
"async": false,
...
});