beacons是一种向服务器回传数据的一种方式

这项技术非常类似动态脚本注入。使用Javascript创建一个新的Image对象，并把src属性设置为服务器上脚本的URL。该URL包含了我们要通过GET传回的键值对数据。请注意并没有创建Img元素或把它插入dom

var url = \'/status_tracker.php\';
var params = [\'step=2\',\'time=12345544\'];
(new Image()).src = url + "?" + params.join(\'&\');

服务器会接收到数据并保存下来，它无需向客户端发送任何回馈信息，因此没有图片会实际显示出来。这是给服务器回传信息最有效的方式。它的性能消耗很小，而且服务器的错误完全不会影响到客户端。

图片信标很简单，但也意味着它能做的事情是有限的。你无法发送POST数据，而URL的长度有最大值，所以你可以发送的数据的长度被限制得相当小。你可以接收服务器返回的数据，但只局限于非常小的几种方式。一种是监听Image对象的load事件，它会告诉你服务器是否成功接收数据。你还可以检查服务器返回的图片的宽度和高度（如果返回的是图片的话）并使用这些数字通知你服务器的状态。举个例子，宽度为1表示“成功”，为2表示“失败”。

如果你不需要再响应中返回数据，就应该发送一个不带消息正文的204 No Content状态码，它将阻止客户端继续等待永远不会到来的消息正文：

var url = \'/status_tracker.php\';
var params = [\'step=2\',\'time=12343434\'];
var beacon = new Image();
beacon.src = url + ‘？’ + params.join(\'&\');
beacon.onload = function(){
    if(this.width == 1){
       //成功
    }
    else if(this.width == 2){
       //失败，请重试并创建另一个信标
    }
};
beacon.onerror = function(){
   //出错，稍后重试并创建另一个信标
}

 

信标是向服务器回传数据最快且最有效的方式。服务器根本不需要发送任何响应正文，因此你也无须担心客户端下载数据。唯一的缺点是你能接收到的响应类型是有限的。如果你需要返回大量数据给客户端，那么请使用XHR。如果你只关心发送数据到服务器（可能需要极少的返回信息），那么请使用图片信标。

版权声明：本文为joyho原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/joyho/articles/3418809.html