在注销时自动保存"卸载"事件和ajax调用:操作顺序导致问题

Question

我在在线编辑器上使用AutoSave功能.

当用户离开页面(检测到unload或beforeunload事件)时,我发送一个AJAX请求(async = false)来保存数据.

我有时在Chrome浏览器中遇到问题,因为有一系列事件正在发生:

• 事件被解雇
• 请求发送
• 页面更改,用户断开连接
• 请求分析服务器=>问题!
• 请求浏览器收到的响应

当然,由于用户已断开连接,因此无法处理"保存"请求.

有没有一种与所有浏览器兼容的方法,在页面实际更改之前等待AJAX​​调用的响应？

Answer 1

ori的回答是正确和完整的.

但从你的情况来看,你可以使用一种解决方法.

您可能感兴趣的有两个JavaScript功能:localStorage和sessionStorage(除了第二个在浏览器关闭时清除,所以你可能会选择第一个)

我们的想法是将数据保存到localStorage,其中包含一些元数据,说明是否保存了更改.如果用户离开页面但转到服务中的另一个页面,甚至稍后返回 - 您可以再次发送数据,其中包含由于页面卸载而未保存的一些信息.

概念证明代码:

$(window).bind('unload', function() {
    localStorage.setItem('unsavedData',data);
    localStorage.setItem('unsaved',true);
});

$(document).ready(function(){
    if(localStorage.getItem('unsaved')){
       //ajax send 
       localStorage.setItem('unsaved',false);
    }
});

[编辑]

我已成功使用JSONP unload并且它似乎在大多数时间都有效,但我还没有在负载和慢速网络上测试它.

Answer 2

不可以.您只能向用户显示确认对话框:

$(window).bind('beforeunload', function() {
    // AJAX

    return 'STRING';
});

该STRING会显示在对话框中,然后你可能有时间效应初探回来之前,用户反应.

但这是阻止页面卸载的唯一方法,因此不会收到ajax响应.