JavaScript---Beacons图片信标发送数据

简介

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

var url = '/status_tracker.php';
var params = [
'step=2',
'time=1248027314'
]
(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=1248027314'
]

var beacon =  new Image();
beacon.src = url + '?' + params.join('&');

beacon.onload = function( ) {
if (this.width == 1) {
//成功
} else if (this.width == 2) {
//失败
}
}

beacon.onerror = function() {
//出错
}