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