如何在ajax调用完成之前防止页面导航

Question

所以我有一个ajax调用，下载几十个大小为数兆字节的数据块，然后通过html5文件系统api在本地存储数据。

我希望在ajax调用完成之前防止用户离开页面。我决定探索onbeforeunload事件，让它通知用户应该等到ajax调用完成再离开页面。我在AJAX调用之前设置了以下内容，在AJAX调用结束/成功时重新设置window.onbeforeunload。

window.onbeforeunload = function(){
    return "Information is still downloading, navigating away from or closing "+ 
        "this page will stop the download of data";
}

当我试图关闭页面或离开页面时，弹出消息按预期出现，提示用户留在页面上。然而，一旦我确认我想要留在页面上，ajax调用不会恢复到它们停止的地方。有没有办法防止ajax调用暂停/停止或继续/重新开始执行？我愿意接受任何实现标题所述所需功能的想法。

- Arthur Weborg

Answer 1

我很确定你可以在.js文件中创建一个全局变量，例如...

var request;

然后将你的ajax调用分配给这个变量。

request = $.ajax{
 //Ajax
 //Stuff
 //Goes
 //Here
}

现在，在您的window.unbeforeunload函数中，添加以下条件语句。

window.onbeforeunload = function(){
  if(!request){
    return "Request not initiated";
  }else{
    //Request is in progress...
    //You can use request.abort() if you need
  }
}

编辑：为了详细介绍您可以在request对象上使用的一些方法，请查看此页面。（例如，.done 或 .always 可能适合您的情况）

- Mattiavelli

---

感谢您的帖子和链接，我一直在查看和测试，如果我能够根据您展示的内容使其正常工作，我将选择它作为答案。到目前为止，您的帖子确实很有帮助。 - Arthur Weborg

很高兴能够帮助！如果您有问题，请告诉我，我会尽力协助。 - Mattiavelli

所以，我提出的问题更加概括 - 我实际上正在进行30多个ajax调用，其中一些是jquery AJAX，一些是普通的AJAX。然而，我使用了一个布尔值，该值基于从AJAX中成功调用（在onbeforeunload事件方法中检查）进行切换，并在if语句的else部分处理ajax调用。最终，您的帖子让我达到了我需要的目标。非常感谢您的帮助！ - Arthur Weborg

我们能用XMLHttpRequest请求做同样的事情吗？ - Sohaib

如果你在谈论XMLHttpRequest对象，我相信你可以使用XMLHttpRequest.readyState属性来识别请求的状态。但是实现方式可能会略有不同。https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest - Mattiavelli