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

简介

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

1
2
3
4
5
6
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状态码, 它将阻止客户端继续等待永远不会到来的消息正文.

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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() {
//出错
}
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!