在Web关闭页面时发送Ajax请求的实现方法


Posted in Javascript onMarch 07, 2019

前言

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

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

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-

blob = new Blob([`room_id=123`], {type : 'application/x-www-form-urlencoded'});
navigator.sendBeacon("/cgi-bin/leave_room", blob);

在Web关闭页面时发送Ajax请求的实现方法

(2)使用FormData对象,但是这时content-type会被设置成"multipart/form-data"。

var fd = new FormData();
fd.append('room_id', 123);
navigator.sendBeacon("/cgi-bin/leave_room", fd);

在Web关闭页面时发送Ajax请求的实现方法

(3)数据也可以使用URLSearchParams 对象,content-type会被设置成"text/plain;charset=UTF-8"

var params = new URLSearchParams({ room_id: 123 })
navigator.sendBeacon("/cgi-bin/leave_room", params);

在Web关闭页面时发送Ajax请求的实现方法

通过尝试,可以发现使用blob发送比较方便,内容的设置也比较灵活,如果发送的消息抓包后发现后台没有识别出来,可以尝试修改内容的string或者header,来找到合适的方式发送请求。
参考链接:

  • sendBeacon API not working temporarily due to security issue, any workaround?
  • Sending AJAX Data when User Moves Away / Exits from Page
  • Setting HTTP Headers in a Beacon Request

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
JS继承用法实例分析
Feb 05 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 Javascript
Bootstrap Table从零开始
Jun 30 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
详解react关于事件绑定this的四种方式
Mar 09 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
在Layui 的表格模板中,实现layer父页面和子页面传值交互的方法
Sep 10 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 #Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 #Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 #Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 #Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 #Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 #Javascript
js如何获取图片url的Blob值并预览示例代码
Mar 07 #Javascript
You might like
php实现用已经过去多长时间的方式显示时间
2015/06/05 PHP
PHP使用NuSOAP调用Web服务的方法
2015/07/18 PHP
php实现文件预览功能
2017/05/23 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
Javascript的数组与字典用法与遍历对象的属性技巧
2012/11/07 Javascript
如何使用Javascript获取距今n天前的日期
2013/07/08 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
JavaScript必知必会(二) null 和undefined
2016/06/08 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
layui前端框架之table表数据的刷新方法
2018/08/17 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
Vue父组件向子组件传值以及data和props的区别详解
2020/03/02 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python写入xml文件的方法
2015/05/08 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
详解Python中where()函数的用法
2018/03/27 Python
python如何制作英文字典
2019/06/25 Python
Python绘制热力图示例
2019/09/27 Python
python3中数组逆序输出方法
2020/12/01 Python
水果花束:Fruit Bouquets
2017/12/20 全球购物
Optimalprint加拿大:在线打印服务
2020/04/03 全球购物
文明学生标兵事迹
2014/01/21 职场文书
高中生期末评语
2014/01/28 职场文书
洗发露广告词
2014/03/14 职场文书
美术指导求职信
2014/03/17 职场文书
优秀少先队工作者事迹材料
2014/05/13 职场文书
教师师德考核自我评价
2014/09/13 职场文书
乡镇党员群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
经典导游欢迎词
2015/01/26 职场文书
因家庭原因离职的辞职信范文
2015/05/12 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL