在Web關(guān)閉頁(yè)面時(shí)發(fā)送Ajax請(qǐng)求的實(shí)現(xiàn)方法
前言
有時(shí)候我們需要在用戶離開(kāi)頁(yè)面的時(shí)候,做一些上報(bào)來(lái)記錄用戶行為。又或者是發(fā)送服務(wù)器ajax請(qǐng)求,通知服務(wù)器用戶已經(jīng)離開(kāi),比如直播間內(nèi)的退房操作。
本文主要分兩部分來(lái)講解怎么完成退出行為的上報(bào)。
1.事件監(jiān)聽(tīng)
瀏覽器有兩個(gè)事件可以用來(lái)監(jiān)聽(tīng)頁(yè)面關(guān)閉,beforeunload和unload。
beforeunload是在文檔和資源將要關(guān)閉的時(shí)候調(diào)用的, 這時(shí)候文檔還是可見(jiàn)的,并且在這個(gè)關(guān)閉的事件還是可以取消的。比如下面這種寫法就會(huì)讓用戶導(dǎo)致在刷新或者關(guān)閉頁(yè)面時(shí)候,有個(gè)彈窗提醒用戶是否關(guān)閉。
window.addEventListener("beforeunload", function (event) { // Cancel the event as stated by the standard. event.preventDefault(); // Chrome requires returnValue to be set. event.returnValue = ''; });
unload則是在頁(yè)面已經(jīng)正在被卸載時(shí)發(fā)生,此時(shí)文檔所處的狀態(tài)是:1.所有資源仍存在(圖片,iframe等);2.對(duì)于用戶所有資源不可見(jiàn);3.界面交互無(wú)效(window.open, alert, confirm 等);4.錯(cuò)誤不會(huì)停止卸載文檔的過(guò)程。
基于以上兩個(gè)方法就可以實(shí)現(xiàn)對(duì)頁(yè)面關(guān)閉的事件監(jiān)聽(tīng)了,為了穩(wěn)妥,可以兩個(gè)事件都監(jiān)聽(tīng)。然后對(duì)監(jiān)聽(tīng)函數(shù)做處理,讓關(guān)閉事件只調(diào)用一次。
2.請(qǐng)求發(fā)送
有了上面的監(jiān)聽(tīng),事情只完成了一半,如果我們?cè)诒O(jiān)聽(tīng)中直接發(fā)送ajax請(qǐng)求,就會(huì)發(fā)現(xiàn)請(qǐng)求被瀏覽器abort了,無(wú)法發(fā)送出去。在頁(yè)面卸載的時(shí)候,瀏覽器并不能保證異步的請(qǐng)求能夠成功發(fā)出去。
我們有幾種方式可以解決這個(gè)問(wèn)題:
方案1: 發(fā)送同步的ajax請(qǐng)求
var oAjax = new XMLHttpRequest(); oAjax.open('POST', url + '/user/register', false);//false表示同步請(qǐng)求 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 { console.log(oAjax); } }; oAjax.send('a=1&b=2');
這種方式雖然有效,但是用戶需要等待請(qǐng)求結(jié)束才可以關(guān)閉頁(yè)面。對(duì)用戶的體驗(yàn)不好。
方案2:發(fā)送異步請(qǐng)求,并且在服務(wù)端忽略ajax的abort
雖然異步請(qǐng)求會(huì)被瀏覽器abort,但是如果服務(wù)端可以忽略abort,仍然正常執(zhí)行,也是可以的。比如PHP有ignore_user_abort函數(shù)可以忽略abort。這樣需要改造后臺(tái),一般不太可行..
方案3:使用navigator.sendBeacon發(fā)送異步請(qǐng)求
根據(jù)MDN的介紹:
這個(gè)方法主要用于滿足 統(tǒng)計(jì)和診斷代碼 的需要,這些代碼通常嘗試在卸載(unload)文檔之前向web服務(wù)器發(fā)送數(shù)據(jù)。過(guò)早的發(fā)送數(shù)據(jù)可能導(dǎo)致錯(cuò)過(guò)收集數(shù)據(jù)的機(jī)會(huì)。然而, 對(duì)于開(kāi)發(fā)者來(lái)說(shuō)保證在文檔卸載期間發(fā)送數(shù)據(jù)一直是一個(gè)困難。因?yàn)橛脩舸硗ǔ?huì)忽略在卸載事件處理器中產(chǎn)生的異步 XMLHttpRequest 。
從介紹上可以看出,這個(gè)方法就是用來(lái)在用戶離開(kāi)時(shí)發(fā)請(qǐng)求的。非常適合這種場(chǎng)景。
使用方式是這樣的:
navigator.sendBeacon(url [, data]);
sendBeacon支持發(fā)送的data可以是ArrayBufferView, Blob, DOMString, 或者 FormData 類型的數(shù)據(jù)。
下面是幾種使用sendBeacon發(fā)送請(qǐng)求的方式,可以修改header和內(nèi)容的格式,因?yàn)橐话愫头?wù)器的通信方式都是固定的,如果修改了header或者內(nèi)容,服務(wù)器就無(wú)法正常識(shí)別出來(lái)了。
(1)使用Blob來(lái)發(fā)送
使用blob發(fā)送的好處是可以自己定義內(nèi)容的格式和header。比如下面這種設(shè)置方式,就是可以設(shè)置content-type為application/x-
blob = new Blob([`room_id=123`], {type : 'application/x-www-form-urlencoded'}); navigator.sendBeacon("/cgi-bin/leave_room", blob);
(2)使用FormData對(duì)象,但是這時(shí)content-type會(huì)被設(shè)置成"multipart/form-data"。
var fd = new FormData(); fd.append('room_id', 123); navigator.sendBeacon("/cgi-bin/leave_room", fd);
(3)數(shù)據(jù)也可以使用URLSearchParams 對(duì)象,content-type會(huì)被設(shè)置成"text/plain;charset=UTF-8"
。
var params = new URLSearchParams({ room_id: 123 }) navigator.sendBeacon("/cgi-bin/leave_room", params);
通過(guò)嘗試,可以發(fā)現(xiàn)使用blob發(fā)送比較方便,內(nèi)容的設(shè)置也比較靈活,如果發(fā)送的消息抓包后發(fā)現(xiàn)后臺(tái)沒(méi)有識(shí)別出來(lái),可以嘗試修改內(nèi)容的string或者h(yuǎn)eader,來(lái)找到合適的方式發(fā)送請(qǐng)求。
參考鏈接:
- sendBeacon API not working temporarily due to security issue, any workaround?
- Sending AJAX Data when User Moves Away / Exits from Page
- Setting HTTP Headers in a Beacon Request
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法詳解【圓形情況】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法,結(jié)合實(shí)例形式詳細(xì)分析了圓形包盒情況下的碰撞檢測(cè)算法相關(guān)原理與實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-12-12使用JavaScript實(shí)現(xiàn)實(shí)時(shí)搜索建議功能
在我們的技術(shù)旅程中,JavaScript 無(wú)疑是一個(gè)不可或缺的伙伴,這篇文章主要為大家詳細(xì)介紹了如何使用 JavaScript 來(lái)實(shí)現(xiàn)一個(gè)復(fù)雜功能,即實(shí)時(shí)搜索建議,感興趣的可以了解下2024-02-02Javascript 代碼也可以變得優(yōu)美的實(shí)現(xiàn)方法
Javascript 代碼也可以變得優(yōu)美的一些經(jīng)驗(yàn)小結(jié)。2009-06-06微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)星級(jí)評(píng)價(jià)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12JS實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的示例代碼
本篇文章主要是對(duì)JS實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02