首页 > web前端 > js教程 > 正文

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

一个新手
发布: 2017-09-09 10:33:24
原创
1632 人浏览过


简介

这项技术非常类似动态脚本注入. 使用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() {
    //出错
}
登录后复制

以上是JavaScript---Beacons图片信标发送数据 的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!