监听页面关闭，并发起请求

监听页面关闭，并发起请求

利用浏览器的beforeunload和unload事件

beforeunload 事件在新窗口被打开的时候不会执行，只有在窗口刷新和关闭时执行。
unload 事件在窗口打开、刷新、关闭时都会执行。

监听这两个事件：

window.addEventListener('beforeunload', function(){
    // 可以在这里做一些事情，例如向服务器发起同步的请求
    // debugger
})

同步请求

XMLHttpRequest

var xhr = new XMLHttpRequest()
// open 的第三个参数传 false， 表示当前请求使用同步方式
xhr.open('post','host:api', false)
xhr.setRequestHeader('content-type','application/json')
xhr.onreadystatechange = function(){
    // 到这里页面已经关闭了，所以不会进入到这里
}
xhr.send({x:'xxx'})

同步请求会阻塞代码的执行，所以可以发送，但是这样会导致屏幕出现一段时间的无响应状态
注意：部分浏览器会不支持，eg:chrome 80 以上已经不支持了。

ajax

async:false ajax 可以设置是否使用异步请求

$.ajax({
    async: false,
    // ...
})

缺点

• 阻塞问题，体验差
• 浏览器支持问题
• 拿不到返回的数据

navigator.sendBeacon

通过 HTTP POST 的方式，可以以 异步方式 发送 少量 的数据

function sendBeacon(){
    const url = 'http://host/api'
    const data = JSON.stringify({x:'xxx'})
    navigator.sendBeacon(url, data)
}
window.addEventListener('beforeunload', function(){
    document.visiblityState === 'hidden' && sendBeacon()
})

优点：

• 不会阻塞
• 数据传输可靠
  缺点：
• 只能发起 post 请求
• 不能定义请求头
• 请求数据容量小（chrome 中最大 64kb）
• 只能在 visibilityChange和beforeunload事件中使用
• 也会存在浏览器兼容问题。（旧浏览器可能不支持）