JavaScript---Beacons圖片信標(biāo)發(fā)送數(shù)據(jù)

簡(jiǎn)介

這項(xiàng)技術(shù)非常類(lèi)似動(dòng)態(tài)腳本注入. 使用JavaScript創(chuàng)建一個(gè)新的Image對(duì)象, 并把src屬性設(shè)置為服務(wù)器上的腳本URL. 該URL包含了我們要通過(guò)GET傳回的鍵值對(duì)數(shù)據(jù). 請(qǐng)注意并沒(méi)有創(chuàng)建img元素或把它插入DOM.

var url = '/status_tracker.php';var params = [ 
'step=2', 
'time=1248027314'
 ]
 (new Image()).src = url + '?' + params.join('&');

服務(wù)器會(huì)接收到數(shù)據(jù)并保存下來(lái), 它無(wú)需向客戶(hù)端發(fā)送任何回饋消息, 因此沒(méi)有圖片會(huì)實(shí)際顯示出來(lái). 這是給服務(wù)器回傳信息最有效的方式. 它的性能消耗很小, 并且服務(wù)端的錯(cuò)誤完全不會(huì)影響到客戶(hù)端.

圖片信標(biāo)很簡(jiǎn)單, 但也意味著它能做的事情是有限的. 你無(wú)法發(fā)送POST數(shù)據(jù), 而URL的長(zhǎng)度有最大值, 所以你可以發(fā)送的數(shù)據(jù)的長(zhǎng)度被限制得相當(dāng)小. 你可以接收服務(wù)器返回的數(shù)據(jù), 但只局限于非常少的幾種方式. 一種方式是監(jiān)聽(tīng)Image對(duì)象的load事件, 它會(huì)告訴你服務(wù)器是否成功接收數(shù)據(jù). 你還可以檢查服務(wù)器返回的圖片的寬度和高度(如果是圖片的話)并使用這些數(shù)字通知你服務(wù)器的狀態(tài). 舉個(gè)例子, 寬度為1表示”成功”, 為2表示”重試”.

如果你不需要在響應(yīng)中返回?cái)?shù)據(jù), 就應(yīng)該發(fā)送一個(gè)不帶消息正文的204 No Content狀態(tài)碼, 它將阻止客戶(hù)端繼續(xù)等待永遠(yuǎn)不會(huì)到來(lái)的消息正文.

例子

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() {
 //出錯(cuò)
}

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com