如何在 Web 关闭页面时发送 Ajax 请求

有时候咱们须要在用户离开页面的时候，作一些上报来记录用户行为。又或者是发送服务器ajax请求，通知服务器用户已经离开，好比直播间内的退房操做。javascript

本文主要分两部分来说解怎么完成退出行为的上报。php

1.事件监听

浏览器有两个事件能够用来监听页面关闭，beforeunload和unload。 beforeunload是在文档和资源将要关闭的时候调用的，这时候文档仍是可见的，而且在这个关闭的事件仍是能够取消的。好比下面这种写法就会让用户致使在刷新或者关闭页面时候，有个弹窗提醒用户是否关闭。java

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.错误不会中止卸载文档的过程。git

基于以上两个方法就能够实现对页面关闭的事件监听了，为了稳妥，能够两个事件都监听。而后对监听函数作处理，让关闭事件只调用一次。github

2.请求发送

有了上面的监听，事情只完成了一半，若是咱们在监听中直接发送ajax请求，就会发现请求被浏览器abort了，没法发送出去。在页面卸载的时候，浏览器并不能保证异步的请求可以成功发出去。web

咱们有几种方式能够解决这个问题：ajax

方案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');
复制代码

这种方式虽然有效，可是用户须要等待请求结束才能够关闭页面。对用户的体验很差。api

方案2：发送异步请求，而且在服务端忽略ajax的abort

虽然异步请求会被浏览器abort，可是若是服务端能够忽略abort，仍然正常执行，也是能够的。好比PHP有ignore_user_abort函数能够忽略abort。这样须要改造后台，通常不太可行..浏览器

方案3：使用`navigator.sendBeacon`发送异步请求

根据MDN的介绍：bash

这个方法主要用于知足统计和诊断代码的须要，这些代码一般尝试在卸载（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 技术周刊》 震撼上线了，关注公众号：IVWEB社区，每周定时推送优质文章。