zoukankan      html  css  js  c++  java
  • 怎样在页面关闭时发起HTTP请求

    比如有需求是要让页面关闭时, 在数据库中记录用户的一些数据或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请求, 且不能回调.

  • 相关阅读:
    leetcode Lowest Common Ancestor of a Binary Tree
    leetcode 141、Linked list cycle
    leetcode 136、Single Number
    tensorflow使用
    c++ priority_queue
    python语法
    CSS基础之选择器
    并发编程的一些理解
    封装的绑定与多态
    继承与派生
  • 原文地址:https://www.cnblogs.com/aisowe/p/11559839.html
Copyright © 2011-2022 走看看