在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 相关文章推荐
jQuery 1.3 和 Validation 验证插件1.5.1
Jul 09 Javascript
jQuery对html元素取值与赋值的方法
Nov 20 Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
May 03 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
详解Vue2 添加对scss的支持
Jan 02 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
Vue基础配置讲解
Nov 29 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
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
国产动画《伍六七》原声大碟大卖,啊哈娱乐引领音乐赋能IP的新尝试
2020/03/08 国漫
第十五节--Zend引擎的发展
2006/11/16 PHP
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
php 常用类整理
2009/12/23 PHP
PHP可变函数的使用详解
2013/06/14 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
2018/10/12 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
详解JS预解析原理
2020/06/16 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
python实现xlsx文件分析详解
2018/01/02 Python
python批量获取html内body内容的实例
2019/01/02 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Django缓存系统实现过程解析
2019/08/02 Python
python递归函数用法详解
2020/10/26 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
大四学生毕业自荐信
2013/11/07 职场文书
函授本科个人自我鉴定
2014/03/25 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
教师个人自我评价
2015/03/04 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
中国式结婚:司仪主持词(范文)
2019/07/25 职场文书
2019年健身俱乐部的创业计划书
2019/08/26 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android
Python实现科学占卜 让视频自动打码
2022/04/09 Python
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python
python神经网络 使用Keras构建RNN训练
2022/05/04 Python