比如有需求是要让页面关闭时, 在数据库中记录用户的一些数据或log日志. 这时就需要在用户关闭页面时发起HTTP请求.

做法是对window.onunload设置事件监听函数, 在函数内发起AJAX请求.

不过有时候页面已经卸载了, 但请求还没有发出, 这时就失败了, 解决这一问题的思路有两种:

1. 在监听函数内做一些比较耗时的操作, 保证请求发出;

2. 使用Navigator.sendBeacon().

方法一: 耗时法.

function log() {
let xhr = new XMLHttpRequest();
xhr.open('post', '/log', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('foo=bar');
} window.addEventListener('unload', function(event) {
log(); // a time-consuming operation
for (let i = 1; i < 10000; i++) {
for (let m = 1; m < 10000; m++) { continue; }
}
});

方法二: Navigator.sendBeacon()

window.addEventListener('unload', logData, false);

function logData() {
navigator.sendBeacon('/log', analyticsData);
}

注意: 

1. 增加耗时操作或添加setTimeout都是不合理的, 尽管确实能解决问题.

2. Navigator.sendBeacon()会作为浏览器进程任务, 与当前页面脱钩, 这是处理这一需求的专用方法.

3. Navigator.sendBeacon()是一个可跨域的POST请求, 且不能回调.

怎样在页面关闭时发起HTTP请求的更多相关文章

  1. JavaScript当页面关闭时向后台发送请求

    今天做项目时遇上一个需求,当浏览器或页面关闭时将数据存储到数据库内.实现思想是采用js监测onunload然后发送请求.结果失败,刷新可以发送但是关闭并不能,整了一整天并没有解决,最后找到了解决办法. ...

  2. A页面调到B页面,B页面关闭时A页面刷新

    // A.html <html> <head> <script type="text/javascript"> alert("refr ...

  3. 刷新或关闭时调用onbeforeunload

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于on ...

  4. 控制非模态弹出框(showModelessDialog)唯一且随父页面关闭

    网站开发中,常常会遇到需要弹出窗体的情况,一般弹出框有模态和非模态两种,如下: 模态:window.showModalDialog() 非模态:window.showModelessDialog() ...

  5. 页面关闭或刷新时触发javascript的事件

    当页面在关闭或刷新时提示 window.onbeforeunload(function(){ //判断是关闭还是刷新 1.满足关闭,否则是刷新 if(event.clientX>document ...

  6. Vue切换页面时中断axios请求

    一.概述 在Vue单页面开发过程中,遇到这样的情况,当我切换页面时,由于上一页面请求执行时间长,切换到该页面时,还未执行完,这时那个请求仍会继续执行直到请求结束,此时将会影响页面性能,并且可能对现在页 ...

  7. JS事件 卸载事件 当用户退出页面时(页面关闭、页面刷新等),触发onUnload事件,同时执行被调用的程序。注意:不同浏览器对onunload事件支持不同。

    卸载事件(onunload) 当用户退出页面时(页面关闭.页面刷新等),触发onUnload事件,同时执行被调用的程序. 注意:不同浏览器对onunload事件支持不同. 如下代码,当退出页面时,弹出 ...

  8. VS调式时出现异常,在输入法是中文状态下,输入框输入字母再回车,会造成页面关闭,vs退出调式

    解决方案:关闭浏览器窗口关闭时,停止调试 .就恢复正常,无异常

  9. NET MVC全局异常处理(一) 【转载】网站遭遇DDoS攻击怎么办 使用 HttpRequester 更方便的发起 HTTP 请求 C#文件流。 Url的Base64编码以及解码 C#计算字符串长度,汉字算两个字符 2019周笔记(2.18-2.23) Mysql语句中当前时间不能直接使用C#中的Date.Now传输 Mysql中Count函数的正确使用

    NET MVC全局异常处理(一)   目录 .NET MVC全局异常处理 IIS配置 静态错误页配置 .NET错误页配置 程序设置 全局异常配置 .NET MVC全局异常处理 一直知道有.NET有相关 ...

随机推荐

  1. Sketch教程

    去年夏天开始用Sketch,觉得它放Dock里闪亮亮的很好看,当时笑称是男盆友送我的第一颗小钻石噗哈哈.所以那段时间几乎刷遍了所有关于 Sketch 的网站.文章.教程,之后又在自学设计,因为想和更多 ...

  2. xman随机数相关题目

    参加xman夏令营,大佬给我们带来了密码学课程.其中随机数部分感受颇深,记录下几个脚本. 1. 以时间作为种子的随机数 https://www.jarvisoj.com/ 的[xman2019]bab ...

  3. Java core dump

    目录 生成Java core dump core dump分析 生成Java core dump 可以按照下面这个文章的指引来通过jni调用触发Java core dump Generating a ...

  4. EEPROM与FLASH

    最初的ROM rom最初不能编程,出厂什么内容就永远什么内容,不灵活.后来出现了prom,可以自己写入一次,要是写错了,只能换一片,自认倒霉. 人类文明不断进步,终于出现了可多次擦除写入的EPROM, ...

  5. linux下的什么工具能将DVI文件转换成PostScript文件?

    答: dvips,此工具能将由Latex或Tex生成的DVI文件转换成PostScript文件,官网在此

  6. MySQL ALTER命令-修改数据表名或者修改数据表字段

    需要修改数据表名或者修改数据表字段时,就需要使用到MySQL ALTER命令. 删除,添加或修改表字段 如下命令使用了 ALTER 命令及 DROP 子句来删除表的 i 字段: ALTER TABLE ...

  7. python3 枚举enum定义和使用

    两种方式定义枚举类: 1.直接使用Enum列出多个枚举值来创建枚举类. 2.通过集成Enum基类派生枚举类. 程序示范: 1.直接使用Enum列出多个枚举值来创建枚举类. from enum impo ...

  8. Linux运维常见面试题

    1.什么是运维?什么是游戏运维? 1)运维是指大型组织已经建立好的网络软硬件的维护,就是要保证业务的上线与运作的正常, 在他运转的过程中,对他进行维护,他集合了网络.系统.数据库.开发.安全.监控于一 ...

  9. 【Fiori系列】为什么SAP Fiori活的如此精致

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[Fiori系列]为什么SAP Fiori活的如 ...

  10. git命令自动补全

    git安装好后发现命令不能自动补全于是搜了很多方法,先按博客里面的方法试了下: 1.下载配置文件 git clone git://git.kernel.org/pub/scm/git/git.git ...