图像Ping技术

    在CORS出现之前，要实现跨域Ajax通讯颇费一些周折。开发人员想出了一些办法，利用DOM中可以执行跨域清求的功能，在不依赖XHR对象的状况下也能发送某种请求。虽然CORS技术已经无处不在，但开发人员本身发明的这些技术仍然被普遍使用，毕竞这样不须要修改服务器端代码。本文将详细介绍图像Ping

 

基础

　　图像Ping跨域请求技术是使用<img>标签。一个网页能够从任何网页中加载图像，不用担忧跨域不跨域。这也是在线广告跟踪浏览量的主要方式。也能够动态地建立图像，使用它们的 onload 和 onerror事件 处理程序来肯定是否接收到了响应

　　动态建立图像常常用于图像Ping：图像Ping是与服务器进行简单、单向的跨域通讯的一种方式。 请求的数据是经过査询字符串形式发送的，而响应能够是任意内容，但一般是像素图或204响应。经过图像Ping，浏览器得不到任何具体的数据，但经过侦听load和error事件，它能知道响应是何时接收到的

var img = new Image();
img.onload = img.onerror = function(){
    alert("Done!");
};
img.src = "test.html?sum=a";

　　这里建立了一个Image的实例，而后将onload和onerror事件处理程序指定为同一个函数。这样不管是什么响应，只要请求完成，就能获得通知。请求从设置src属性那一刻开始，而这个例子在请求中发送了一个sum参数

 

示例

　　图像Ping最经常使用于跟踪用户点击页面或动态广告曝光次数。图像Ping有两个主要的缺点，一是只能发送GET请求，二是没法访问服务器的响应文本。所以，图像Ping只能用于浏览器与服务器间的单向通讯

　　下面是一个图片Ping的示例

<input id="btn" type="button" value="跨域请求">
<div id="result"></div>
<script>
var add = (function(){
    var counter = 0;
    return function(){
        return ++counter;
    }
})();
btn.onclick = function(){
    var sum = add();
    var img = result.getElementsByTagName('img')[0];
    if(!img){
        var img = new Image();        
    }
    img.height="100";
    img.onload = img.onerror = function(){
        result.appendChild(img);
        var oSpan = document.getElementById('sum');
        if(!oSpan){
            oSpan = document.createElement('span');
            oSpan.id="sum";
        }
        oSpan.innerHTML = '发送请求的次数：' + sum;
        result.appendChild(oSpan);
    };    
    if(sum%2){
        img.src = "http://7xpdkf.com1.z0.glb.clouddn.com/eg_bulboff.gif?sum="+sum;    
    }else{
        img.src = "http://7xpdkf.com1.z0.glb.clouddn.com/eg_bulbon.gif?sum="+sum;    
    }
}
</script>