這項技術(shù)非常類似動態(tài)腳本注入. 使用JavaScript創(chuàng)建一個新的Image對象, 并把src屬性設(shè)置為服務器上的腳本URL. 該URL包含了我們要通過GET傳回的鍵值對數(shù)據(jù). 請注意并沒有創(chuàng)建img元素或把它插入DOM.
var url = '/status_tracker.php';var params = [ 'step=2', 'time=1248027314' ] (new Image()).src = url + '?' + params.join('&');
服務器會接收到數(shù)據(jù)并保存下來, 它無需向客戶端發(fā)送任何回饋消息, 因此沒有圖片會實際顯示出來. 這是給服務器回傳信息最有效的方式. 它的性能消耗很小, 并且服務端的錯誤完全不會影響到客戶端.
圖片信標很簡單, 但也意味著它能做的事情是有限的. 你無法發(fā)送POST數(shù)據(jù), 而URL的長度有最大值, 所以你可以發(fā)送的數(shù)據(jù)的長度被限制得相當小. 你可以接收服務器返回的數(shù)據(jù), 但只局限于非常少的幾種方式. 一種方式是監(jiān)聽Image
對象的load
事件, 它會告訴你服務器是否成功接收數(shù)據(jù). 你還可以檢查服務器返回的圖片的寬度和高度(如果是圖片的話)并使用這些數(shù)字通知你服務器的狀態(tài). 舉個例子, 寬度為1表示”成功”, 為2表示”重試”.
如果你不需要在響應中返回數(shù)據(jù), 就應該發(fā)送一個不帶消息正文的204 No Content狀態(tài)碼, 它將阻止客戶端繼續(xù)等待永遠不會到來的消息正文.
var url = '/status_tracker.php';var params = [ 'step=2', 'time=1248027314' ] var beacon = new Image(); beacon.src = url + '?' + params.join('&'); beacon.onload = function( ) { if (this.width == 1) { //成功 } else if (this.width == 2) { //失敗 } } beacon.onerror = function() { //出錯 }
聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com