24.4.1图片探测
图片探测是利用<img>
标签实现跨域通信的最早的一种技术。任何页面都可以跨域加载图片而不
必担心限制,因此这也是在线广告跟踪的主要方式。可以动态创建图片,然后通过它们的 onload 和
onerror 事件处理程序得知何时收到响应。
这种动态创建图片的技术经常用于图片探测(image pings)。图片探测是与服务器之间简单、跨域、 单向的通信。数据通过查询字符串发送,响应可以随意设置,不过一般是位图图片或值为 204 的状态码。 浏览器通过图片探测拿不到任何数据,但可以通过监听 onload 和 onerror 事件知道什么时候能接收 到响应。下面看一个例子:
let img = new Image();
img.onload = img.onerror = function () {
alert("Done!");
};
img.src = "http://www.example.com/test?name=Nicholas";
这个例子创建了一个新的 Image 实例,然后为它的 onload 和 onerror 事件处理程序添加了同一 个函数。这样可以确保请求完成时无论什么响应都会收到通知。设置完 src 属性之后请求就开始了,这 个例子向服务器发送了一个 name 值。 图片探测频繁用于跟踪用户在页面上的点击操作或动态显示广告。当然,图片探测的缺点是只能发 送 GET 请求和无法获取服务器响应的内容。这也是只能利用图片探测实现浏览器与服务器单向通信的 原因。