在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 相关文章推荐
js的写法基础分析
Jan 17 Javascript
用JQUERY增删元素的代码
Feb 14 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
javascript包装对象实例分析
Mar 27 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
移动端基础事件总结与应用
Jan 12 Javascript
JS实现队列的先进先出功能示例
May 10 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 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数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
2015/04/15 PHP
PHP文件上传操作实例详解
2016/09/27 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
jQuery实现的产品自动360度旋转展示特效源码分享
2015/08/21 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
Node.js复制文件的方法示例
2016/12/29 Javascript
bootstrap选项卡使用方法解析
2017/01/11 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
十大热门的JavaScript框架和库
2017/03/21 Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
2018/06/25 Javascript
vue+iview动态渲染表格详解
2019/03/19 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
python登录QQ邮箱发信的实现代码
2013/02/10 Python
讲解python参数和作用域的使用
2013/11/01 Python
详解Python核心编程中的浅拷贝与深拷贝
2018/01/07 Python
详解python读取image
2019/04/03 Python
PyCharm中代码字体大小调整方法
2019/07/29 Python
如何理解python对象
2020/06/21 Python
仓库管理专业个人的自我评价
2013/12/30 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
感动中国何玥观后感
2015/06/02 职场文书
2016年小学六一儿童节活动总结
2016/04/06 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
Go语言grpc和protobuf
2022/04/13 Golang