本文紧张分两部分来讲解怎么完成退出行为的上报。
1.事宜监听
浏览器有两个事宜可以用来监听页面关闭，beforeunload和unload。 beforeunload是在文档和资源将要关闭的时候调用的， 这时候文档还是可见的，并且在这个关闭的事宜还是可以取消的。比如下面这种写法就会让用户导致在刷新或者关闭页面时候，有个弹窗提醒用户是否关闭。
window.addEventListener(\"大众beforeunload\公众, function (event) { // Cancel the event as stated by the standard. event.preventDefault(); // Chrome requires returnValue to be set. event.returnValue = '';});复制代码
unload则是在页面已经正在被卸载时发生，此时文档所处的状态是：1.所有资源仍存在（图片，iframe等）；2.对付用户所有资源不可见；3.界面交互无效（window.open, alert, confirm 等）；4.缺点不会停滞卸载文档的过程。
基于以上两个方法就可以实现对页面关闭的事宜监听了，为了稳妥，可以两个事宜都监听。然后对监听函数做处理，让关闭事宜只调用一次。
2.要求发送
有了上面的监听，事情只完成了一半，如果我们在监听中直接发送ajax要求，就会创造要求被浏览器abort了，无法发送出去。在页面卸载的时候，浏览器并不能担保异步的要求能够成功发出去。
我们有几种办法可以办理这个问题：
方案1: 发送同步的ajax要求
var oAjax = new XMLHttpRequest();oAjax.open('POST', url + '/user/register', false);//false表示同步要求oAjax.setRequestHeader(\"大众Content-type\公众, \公众application/x-www-form-urlencoded\"大众);oAjax.onreadystatechange = function() { if (oAjax.readyState == 4 && oAjax.status == 200) { var data = JSON.parse(oAjax.responseText); } else { console.log(oAjax); }};oAjax.send('a=1&b=2');复制代码
这种办法虽然有效，但是用户须要等待要求结束才可以关闭页面。对用户的体验不好。
方案2：发送异步要求，并且在做事端忽略ajax的abort
虽然异步要求会被浏览器abort，但是如果做事端可以忽略abort，仍旧正常实行，也是可以的。比如PHP有ignore_user_abort函数可以忽略abort。这样须要改造后台，一样平常不太可行..
方案3：利用navigator.sendBeacon发送异步要求
根据MDN的先容：
这个方法紧张用于知足 统计和诊断代码 的须要，这些代码常日考试测验在卸载（unload）文档之前向web做事器发送数据。过早的发送数据可能导致错过网络数据的机会。然而， 对付开拓者来说担保在文档卸载期间发送数据一贯是一个困难。由于用户代理常日会忽略在卸载事宜处理器中产生的异步 XMLHttpRequest 。
从先容上可以看出，这个方法便是用来在用户离开时发要求的。非常适宜这种场景。 利用办法是这样的：
navigator.sendBeacon(url [, data]);复制代码
sendBeacon支持发送的data可以是ArrayBufferView, Blob, DOMString, 或者 FormData 类型的数据。
下面是几种利用sendBeacon发送要求的办法，可以修正header和内容的格式，由于一样平常和做事器的通信办法都是固定的，如果修正了header或者内容，做事器就无法正常识别出来了。
（1）利用Blob来发送 利用blob发送的好处是可以自己定义内容的格式和header。比如下面这种设置办法，便是可以设置content-type为application/x-www-form-urlencoded。
blob = new Blob([`room_id=123`], {type : 'application/x-www-form-urlencoded'});navigator.sendBeacon(\"大众/cgi-bin/leave_room\公众, blob);复制代码
（2）利用FormData工具，但是这时content-type会被设置成\"大众multipart/form-data\"大众。
var fd = new FormData();fd.append('room_id', 123);navigator.sendBeacon(\公众/cgi-bin/leave_room\"大众, fd);复制代码
（3）数据也可以利用URLSearchParams 工具，content-type会被设置成\"大众text/plain;charset=UTF-8\"大众 。
var params = new URLSearchParams({ room_id: 123 })navigator.sendBeacon(\"大众/cgi-bin/leave_room\"大众, params);复制代码
通过考试测验，可以创造利用blob发送比较方便，内容的设置也比较灵巧，如果发送的抓包后创造后台没有识别出来，可以考试测验修正内容的string或者header，来找到得当的办法发送要求。
作者：腾讯IVWEB团队
链接：https://juejin.im/post/5c7e541b6fb9a049e06415a5
来源：掘金
