在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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
js检验密码强度(低中高)附图
Jun 05 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
Nov 18 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
Jul 29 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 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
YB217、YB235、YB400浅听
2021/03/02 无线电
php中将时间差转换为字符串提示的实现代码
2011/08/08 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
css把超出的部分显示为省略号的方法兼容火狐
2008/07/23 Javascript
JavaScript 编写匿名函数的几种方法
2010/02/21 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
Python计算一个文件里字数的方法
2015/06/15 Python
Python 专题五 列表基础知识(二维list排序、获取下标和处理txt文本实例)
2017/03/20 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
几道PHP面试题
2013/04/14 面试题
软件缺陷的分类都有哪些
2014/08/22 面试题
《风娃娃》教学反思
2014/04/19 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
2015年学校财务工作总结
2015/05/19 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
单身狗福利?Python爬取某婚恋网征婚数据
2021/06/03 Python
mysql配置SSL证书登录的实现
2021/09/04 MySQL
Linux中如何安装并部署Redis
2022/04/18 Servers