在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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
返回函数的JavaScript函数
Jun 14 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
Dec 11 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
Jul 11 Javascript
vue中element组件样式修改无效的解决方法
Feb 03 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
js之切换全屏和退出全屏实现代码实例
Sep 09 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
php中Ctype函数用法详解
2014/12/09 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
扩展jquery实现客户端表格的分页、排序功能代码
2011/03/16 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
2012/02/03 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
js分页代码分享
2014/04/28 Javascript
jQuery实现的简单分页示例
2016/06/01 Javascript
js css+html实现简单的日历
2016/07/14 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
JavaScript基于SVG的图片切换效果实例代码
2020/12/15 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
使用Python 自动生成 Word 文档的教程
2020/02/13 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
Python使用内置函数setattr设置对象的属性值
2020/10/16 Python
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
应届生程序员求职信
2013/11/05 职场文书
大学生毕业自我评价范文分享
2013/11/11 职场文书
求职信怎么写范文
2014/05/26 职场文书
选秀节目策划方案
2014/06/06 职场文书
老人节标语大全
2014/10/08 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js