Beacons

最新推荐文章于 2024-11-04 16:17:23 发布

weixin_30949361

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量176

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/joyho/articles/3418809.html

版权

这项技术非常类似动态脚本注入。使用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(){
   //出错，稍后重试并创建另一个信标
}