从介绍上可以看出,这个方法就是用来在用户离开时发请求的。非常适合这种场景。
使用方式是这样的:
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);
(2)使用FormData对象,但是这时content-type会被设置成"multipart/form-data"。
var fd = new FormData(); fd.append('room_id', 123); navigator.sendBeacon("/cgi-bin/leave_room", fd);
(3)数据也可以使用URLSearchParams 对象,content-type会被设置成"text/plain;charset=UTF-8"
。
var params = new URLSearchParams({ room_id: 123 }) navigator.sendBeacon("/cgi-bin/leave_room", params);
通过尝试,可以发现使用blob发送比较方便,内容的设置也比较灵活,如果发送的消息抓包后发现后台没有识别出来,可以尝试修改内容的string或者header,来找到合适的方式发送请求。
参考链接:
总结
声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com