网页关闭时发送Ajax请求的实现方法

前言

有时候我们需要做一些报表来记录用户离开页面时的行为。或者从服务器发送一个ajax请求，通知服务器用户已经离开，比如在直播室的退房操作。

本文主要分为两个部分来说明如何完成退出行为的报告。

1.事件监督

浏览器中有两个事件可用于监视页面关闭，即卸载前和卸载后。

当文档和资源将被关闭时，当文档仍然可见时，调用Beforeunload，并且这个关闭的事件仍然可以被取消。例如，下面的文字将导致用户有一个弹出窗口，提醒用户在刷新或关闭页面时是否关闭页面。

window . addeventlistener(' before unload '，function (event) { //按照标准说明取消事件。event . preventdefault()；//Chrome要求设置returnValue。event.returnValue=});卸载发生在页面已经被卸载的时候。此时，文档处于以下状态：1。所有资源仍然存在(图片、iframe等)。);2.用户的所有资源都是无形的；3.无效的界面交互(window.open、alert、confirm等));4.该错误不会停止卸载文档的过程。

基于以上两种方法，我们可以监控页面关闭事件。为了安全起见，我们可以监控这两个事件。然后，处理监听函数，使得关闭事件只被调用一次。

2.请求发送

有了上面的监控，事情才完成了一半。如果我们在监控中直接发送ajax请求，我们会发现请求已经被浏览器中止，无法发送出去。卸载页面时，浏览器无法保证异步请求能够成功发送。

我们有几种方法来解决这个问题：

场景1:发送同步ajax请求

var oAjax=new XMLHttpRequest()；oAjax.open('POST '，url '/user/register '，false)；//false表示同步请求oajax . setrequest header(' content-type '，' application/x-www-form-URL encoded ')；oajax . onreadystatechange=function(){ if(oajax . readystate==4 oajax . status==200){ var data=JSON . parse(oajax . responsetext)；} else { console . log(OAjax)；}};oajax . send(' a=1b=2 ')；虽然这种方法很有效，但是用户需要等待请求结束后才能关闭页面。用户体验不好。

方案2:发送异步请求并忽略服务器端的ajax中止

虽然异步请求会被浏览器中止，但如果服务器可以忽略中止，仍然正常执行，那也是可以的。例如，PHP有ignore_user_abort函数来忽略中止。这需要转换背景，这通常是不可行的.

场景3:使用导航器发送异步请求

根据医学发展网络：

这种方法主要用于满足统计和诊断代码的需求，通常在卸载文档之前尝试将数据发送到web服务器。过早发送数据可能会导致错过收集数据的机会。但是，开发人员始终很难确保在文档卸载过程中发送数据。因为用户代理通常会忽略卸载事件处理程序中生成的异步XMLHttpRequest。

从介绍中可以看出，这个方法是用来在用户离开时发送请求的。很适合这种场景。

用法如下：

navigator.sendBeacon(url [，数据])；发送信标支持发送可以是ArrayBufferView、Blob、DOMString或FormData的数据。

下面是几种使用sendmanage发送请求的方式，可以修改报头和内容的格式，因为与服务器的通信方式一般是固定的，如果报头或内容被修改，服务器就无法正常识别。

(1)使用Blob发送

使用blob发送的好处是您可以自己定义内容的格式和标题。例如，以下设置方法可以将内容类型设置为application/x-

blob=new Blob([`room_id=123`]，{ type : ' application/x-www-form-URL encoded ' })；navigator . SendBeacon('/CGI-bin/leave _ room '，blob)；

(2)使用FormData对象，但内容类型将设置为“多部分/表单数据”。

var FD=new FormData()；fd.append('room_id '，123)；navigator . SendBeacon('/CGI-bin/leave _ room '，FD)；

(3)数据也可以使用URLSearchParams对象，内容类型将设置为“文本/纯文本”；charset=UTF-8 ' .

var params=new urlsearchprams({ room _ id : 123 })navigator . send beacon('/CGI-bin/leave _ room '，params)；

通过尝试可以发现，使用blob发送很方便，内容的设置也很灵活。如果发送的消息被捕获，并且发现后台无法识别，您可以尝试修改内容的字符串或标题，以找到发送请求的合适方式。参考链接：

由于安全问题，发送信标应用编程接口暂时无法工作，有什么解决方法吗？当用户离开/退出信标请求摘要中的页面设置http头时发送Ajax数据

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。