当页面关闭时向后台发送请求

Posted 2020-08-28 谦卑之峰

今天做项目时遇上一个需求，当浏览器或页面关闭时将数据存储到数据库内。实现思想是采用js监测onunload然后发送请求。结果失败，刷新可以发送但是关闭并不能，最终整了一整天并没有解决，最后找到了解决办法。

先贴个能实现功能的方法：

 1 function saveStatus(){
 2     /*结束时保存设备状态*/
 3     window.onbeforeunload=function(){//必须使用beforeunload
 4         var url ="device_saveDeviceStatus";
 5         $.ajax({
 6             url:url,
 7             async:false                //必须采用同步方法
 8         });
 9     }
10 }
11 saveStatus();

接下来来解释一下：

　　1.一开始的想法是采用onunload方法，但最后经过查询，需要使用onbeforeunload方法。它们之间的区别在于：onbeforeunload是正要去服务器读取新的页面时调用，此时还没开始读取；而onunload则已经从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。onunload是无法阻止页面的更新和关闭的。而 onbeforeunload 可以做到。

　　2.在发送请求上，一开始采用简单的$.post()，但是$.post()是异步的方法，不行。为什么这里不能采用异步方法呢？我的理解是，如果采用异步方法，那么浏览器会在方法成功发送并响应前先unload，从而导致请求丢失。如果采用的是同步方法，浏览器就会等待请求成功，然后再unload。按照这个理解，如果采用异步方法发送后，再采用alert()进行拦截等待，应该也是可以的，只是这个方法太影响体验，所以抛弃。

　　附：提供一个替代的想法，在j2ee开发中，可以采用监听器监听session的销毁事件，达到类似的效果。