建站
咨詢
售后
建站咨詢
新聞中心
有時(shí)候我們需要在用戶離開(kāi)頁(yè)面的時(shí)候，做一些上報(bào)來(lái)記錄用戶行為或者埋點(diǎn)，又或者是發(fā)送到服務(wù)器的ajax請(qǐng)求。那如何保證請(qǐng)求能夠正確的送達(dá)就是一個(gè)很關(guān)鍵的點(diǎn)。下面我們就來(lái)介紹下應(yīng)該如何操作：
成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、龍子湖網(wǎng)絡(luò)推廣、微信小程序、龍子湖網(wǎng)絡(luò)營(yíng)銷、龍子湖企業(yè)策劃、龍子湖品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供龍子湖建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
首先，要做事件監(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)閉的事件還是可以取消的。比如下面這種寫(xiě)法就會(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)用一次，比如用變量控制請(qǐng)求發(fā)送的次數(shù)。
其次，發(fā)送請(qǐng)求
有了上面的監(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-www-form-urlencoded。
- 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)求。
分享文章：如何在頁(yè)面關(guān)閉或跳轉(zhuǎn)時(shí)優(yōu)雅的發(fā)送Ajax請(qǐng)求
分享網(wǎng)址：http://m.fisionsoft.com.cn/article/dpcidgc.html
