科技

如何在 Web 關閉頁面時傳送 Ajax 請求

有時候我們需要在使用者離開頁面的時候,做一些上報來記錄使用者行為。又或者是傳送伺服器ajax請求,通知伺服器使用者已經離開,比如直播間內的退房操作。

本文主要分兩部分來講解怎麼完成退出行為的上報。

1.事件監聽

瀏覽器有兩個事件可以用來監聽頁面關閉,beforeunload和unload。 beforeunload是在文件和資源將要關閉的時候呼叫的, 這時候文件還是可見的,並且在這個關閉的事件還是可以取消的。比如下面這種寫法就會讓使用者導致在重新整理或者關閉頁面時候,有個彈窗提醒使用者是否關閉。

window.addEventListener("beforeunload", function (event) {

// Cancel the event as stated by the standard.

event.preventDefault();

// Chrome requires returnValue to be set.

event.returnValue = '';

});

複製程式碼

unload則是在頁面已經正在被解除安裝時發生,此時文件所處的狀態是:1.所有資源仍存在(圖片,iframe等);2.對於使用者所有資源不可見;3.介面互動無效(window.open, alert, confirm 等);4.錯誤不會停止解除安裝文件的過程。

基於以上兩個方法就可以實現對頁面關閉的事件監聽了,為了穩妥,可以兩個事件都監聽。然後對監聽函式做處理,讓關閉事件只調用一次。

2.請求傳送

有了上面的監聽,事情只完成了一半,如果我們在監聽中直接傳送ajax請求,就會發現請求被瀏覽器abort了,無法傳送出去。在頁面解除安裝的時候,瀏覽器並不能保證非同步的請求能夠成功發出去。

我們有幾種方式可以解決這個問題:

方案1: 傳送同步的ajax請求

var oAjax = new XMLHttpRequest();

oAjax.open('POST', url + '/user/register', false);//false表示同步請求

oAjax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

oAjax.onreadystatechange = function() {

if (oAjax.readyState == 4 && oAjax.status == 200) {

var data = JSON.parse(oAjax.responseText);

} else ;

oAjax.send('a=1&b=2');

複製程式碼

這種方式雖然有效,但是使用者需要等待請求結束才可以關閉頁面。對使用者的體驗不好。

方案2:傳送非同步請求,並且在服務端忽略ajax的abort

雖然非同步請求會被瀏覽器abort,但是如果服務端可以忽略abort,仍然正常執行,也是可以的。比如PHP有ignore_user_abort函式可以忽略abort。這樣需要改造後臺,一般不太可行..

方案3:使用navigator.sendBeacon傳送非同步請求

根據MDN的介紹:

這個方法主要用於滿足 統計和診斷程式碼 的需要,這些程式碼通常嘗試在解除安裝(unload)文件之前向web伺服器傳送資料。過早的傳送資料可能導致錯過收集資料的機會。然而, 對於開發者來說保證在文件解除安裝期間傳送資料一直是一個困難。因為使用者代理通常會忽略在解除安裝事件處理器中產生的非同步 XMLHttpRequest 。

從介紹上可以看出,這個方法就是用來在使用者離開時發請求的。非常適合這種場景。 使用方式是這樣的:

navigator.sendBeacon(url [, data]);

複製程式碼

sendBeacon支援傳送的data可以是ArrayBufferView, Blob, DOMString, 或者 FormData 型別的資料。

下面是幾種使用sendBeacon傳送請求的方式,可以修改header和內容的格式,因為一般和伺服器的通訊方式都是固定的,如果修改了header或者內容,伺服器就無法正常識別出來了。

(1)使用Blob來發送 使用blob傳送的好處是可以自己定義內容的格式和header。比如下面這種設定方式,就是可以設定content-type為application/x-www-form-urlencoded。

blob = new Blob([`room_id=123`], {type : 'application/x-www-form-urlencoded'});

navigator.sendBeacon("/cgi-bin/leave_room", blob);

複製程式碼

(2)使用FormData物件,但是這時content-type會被設定成"multipart/form-data"。

var fd = new FormData();

fd.append('room_id', 123);

navigator.sendBeacon("/cgi-bin/leave_room", fd);

複製程式碼

(3)資料也可以使用URLSearchParams 物件,content-type會被設定成"text/plain;charset=UTF-8" 。

var params = new URLSearchParams({ room_id: 123 })

navigator.sendBeacon("/cgi-bin/leave_room", params);

複製程式碼

通過嘗試,可以發現使用blob傳送比較方便,內容的設定也比較靈活,如果傳送的訊息抓包後發現後臺沒有識別出來,可以嘗試修改內容的string或者header,來找到合適的方式傳送請求。

作者:騰訊IVWEB團隊

連結:https://juejin.im/post/5c7e541b6fb9a049e06415a5

來源:掘金

Reference:科技日報

看更多!請加入我們的粉絲團

轉載請附文章網址

不可錯過的話題