Image beacon

转帖：http://www.denisdeng.com/?p=1143

 

不知道如何翻译它，只好直接用它作为标题。在《Hight Performance Javascript》一书中对此有过描述，详情可查看本书，这里只对此做一个简单描述。该技巧适用于以下场景：
只关注数据是否被发送到服务器，客户端对该请求是否做出响应无关紧要。在对站点数据进行分析时，这种技巧正可大行其道。即：

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

 同样，你可以监听Image的load事件来确定数据是否发送成功。

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) {
// Success.
}
else if (this.width == 2) {
// Failure; create another beacon and try again.
}
};
beacon.onerror = function() {
// Error; wait a bit, then create another beacon and try again.
};

 

这种方法的局限性在于只能以get的方式提交数据，这样提交的数据也就有了字节限制。故在真正用到该技巧的时候，还是根据具体的功能需求酌情使用。

在Minimize redirects一文中，在Track web traffic in the background一节中，你可以看到对该技巧类似的描述。