圖片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>