网站后台怎么转发网页内容( 有趣：既然Ajax不行，那就试试同步的吧！)

　　网站后台怎么转发网页内容(

有趣：既然Ajax不行，那就试试同步的吧！)

　　需要

　　这两天遇到一个需求：当用户刷新页面或者关闭页面时，前端不得不向后台发送请求释放页面的授权占用。

　　分析了一下，这不就是在页面卸载的时候发送一个请求，第一个版本是通过三倍五分实现的：

　　window.addEventListener("beforeunload", () => {

let oReq = new XMLHttpRequest();

oReq.open("POST", "http://127.0.0.1:1991/loginout");

oReq.send(JSON.stringify({name: "编程三昧"}));

　　测试发现：

　　由于异步ajax不行，试试同步的，结果报错：

　　我搜索了一下，解释如下：

　　当页面被用户导航离开或关闭时，Chrome 现在不允许在页面关闭期间同步 XHR。这涉及以下事件（在页面关闭路径上触发时）：beforeunload、unload、pagehide 和visibilitychange。

　　总结一下：对于当前的Chrome，当页面被用户导航离开或关闭时，不允许发送同步XHR请求。涉及的事件有：beforeunload、unload、pagehide、visibilitychange。

　　虽然问题没有解决，但是我长知识了，这一波不是亏！

　　navigator.sendBeacon()

　　经过搜索，我发现有一个专门用于此任务的接口，那就是navigator.sendBeacon()。

　　描述

　　这种方法主要用于满足统计和诊断代码的需要，通常在卸载文档之前尝试将数据发送到Web服务器。

　　语法

　　navigator.sendBeacon(url, data);

　　范围

　　返回值

　　当用户代理成功将数据添加到传输队列时，sendBeacon() 方法将返回true，否则返回false。

　　完成

　　既然有了接口，就很容易实现了。

　　代码

　　 window.addEventListener("beforeunload", (e) => {

const data = {name: "编程三昧"};

window.navigator.sendBeacon("http://127.0.0.1:1991/loginout", JSON.stringify(data));

});

　　影响

　　无论是刷新页面还是关闭页面，后台都能接收到前端发送的请求，完美满足需求。

　　总结

　　现在浏览器功能越来越强大，支持的API也越来越丰富。以前很难实现的功能放上去可能是轻而易举的事，还是要多关注技术动向。

　　~

　　~本文结束，感谢阅读！

　　~

　　学习有趣的知识，结识有趣的朋友，创造有趣的灵魂！

　　来吧，带着期待，我有墨香迎接你！你归来，无论得失，唯有余韵如礼！

　　知识与技能并重，内功与外功，理论与实践并重，双手都要用力！