用隐藏的img，通过src的调用后台逻辑有什么好处？

Question

发现有些web程序中会在页面中放置一个隐藏的img，然后把它的src设置为调用后台业务逻辑的url。这样做有什么好处？和加载页面后通过javascript发起一个ajax请求有什么区别吗？

Answer 1

英文术语叫：image beacon
在Google 的 Make the Web Faster 的 #Track web traffic in the background 中有提到。

主要应用于只需要向服务器发送数据(日志数据)的场合，且无需服务器有消息体回应。比如收集访问者的统计信息。

一般做法是服务器用一个1x1的gif图片来作为响应，当然这有点浪费服务器资源。因此用header来响应比较合适，目前比较合适的做法是服务器发送"204 No Content"，即“服务器成功处理了请求，但不需要返回任何实体内容”。

另外该脚本的位置一般放在页面最后以免阻塞页面渲染,并且一般情况下也不需要append到DOM中。通过它的onerror和onload事件来检测发送状态。

<script type="text/javascript">
 var thisPage = location.href;
 var referringPage = (document.referrer) ? document.referrer : "none";
 var beacon = new Image();
 beacon.src = "http://www.example.com/logger/beacon.gif?page=" + encodeURI(thisPage)
 + "&ref=" + encodeURI(referringPage);
</script>

这样做和ajax请求的区别在于：
1.只能是get请求，因此可发送的数据量有限。
2.只关心数据是否发送到服务器，服务器不需要做出消息体响应。并且一般客户端也不需要做出响应。
3.实现了跨域。

Answer 2

img标签可以跨域

附一篇说的很详细的实例分析
http://www.codinglabs.org/html/how-we...

Answer 3

需要注意的是，此类请求只能是GET，所以只适合统计等用途，不能用于触发发表评论、删除文件等操作。

Answer 4

主要是用来进行用户统计。
img后面可以加上参数。
有一部分会屏蔽掉JS的运行，这种情况下，要进行访问统计，只能通过img标签发出一个请求。
好处有几点：
1、img标签的解析不受浏览器的限制：所有浏览器，不管是否屏蔽JS必然都会发出这样一个请求；
2、标签可以不必像Ajax一样在同一个域下；
3、img标签的参数可以随意拼接，如<img src="//google.com/ja.img?page=http://sf.com/q/100110011001&t=20121204102836&from=http://sf.com/"/>
4、并行加载，不影响页面速度
以上，都是瞎猜的

Answer 5

方便收集信息，以及塞信息，简单说，每个请求，都可以收集到cookie，也可以放cookie到客户浏览器中

Answer 6

不阻塞页面加载，出错也不影响页面显示。

Answer 7

主要用来做blink打点，记录用户行为的。