怎么在關(guān)閉Web頁面時(shí)發(fā)送Ajax請求

怎么在關(guān)閉Web頁面時(shí)發(fā)送Ajax請求？相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

1.事件監(jiān)聽

瀏覽器有兩個事件可以用來監(jiān)聽頁面關(guān)閉，beforeunload和unload。

beforeunload是在文檔和資源將要關(guān)閉的時(shí)候調(diào)用的， 這時(shí)候文檔還是可見的，并且在這個關(guān)閉的事件還是可以取消的。比如下面這種寫法就會讓用戶導(dǎo)致在刷新或者關(guān)閉頁面時(shí)候，有個彈窗提醒用戶是否關(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則是在頁面已經(jīng)正在被卸載時(shí)發(fā)生，此時(shí)文檔所處的狀態(tài)是：1.所有資源仍存在（圖片，iframe等）；2.對于用戶所有資源不可見；3.界面交互無效（window.open, alert, confirm 等）；4.錯誤不會停止卸載文檔的過程。

基于以上兩個方法就可以實(shí)現(xiàn)對頁面關(guān)閉的事件監(jiān)聽了，為了穩(wěn)妥，可以兩個事件都監(jiān)聽。然后對監(jiān)聽函數(shù)做處理，讓關(guān)閉事件只調(diào)用一次。

2.請求發(fā)送

有了上面的監(jiān)聽，事情只完成了一半，如果我們在監(jiān)聽中直接發(fā)送ajax請求，就會發(fā)現(xiàn)請求被瀏覽器abort了，無法發(fā)送出去。在頁面卸載的時(shí)候，瀏覽器并不能保證異步的請求能夠成功發(fā)出去。

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

方案1: 發(fā)送同步的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 {
 console.log(oAjax);
 }
};

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

這種方式雖然有效，但是用戶需要等待請求結(jié)束才可以關(guān)閉頁面。對用戶的體驗(yàn)不好。

方案2：發(fā)送異步請求，并且在服務(wù)端忽略ajax的abort

雖然異步請求會被瀏覽器abort，但是如果服務(wù)端可以忽略abort，仍然正常執(zhí)行，也是可以的。比如PHP有ignore_user_abort函數(shù)可以忽略abort。這樣需要改造后臺，一般不太可行..

方案3：使用navigator.sendBeacon發(fā)送異步請求

根據(jù)MDN的介紹：

這個方法主要用于滿足 統(tǒng)計(jì)和診斷代碼 的需要，這些代碼通常嘗試在卸載（unload）文檔之前向web服務(wù)器發(fā)送數(shù)據(jù)。過早的發(fā)送數(shù)據(jù)可能導(dǎo)致錯過收集數(shù)據(jù)的機(jī)會。然而， 對于開發(fā)者來說保證在文檔卸載期間發(fā)送數(shù)據(jù)一直是一個困難。因?yàn)橛脩舸硗ǔ雎栽谛遁d事件處理器中產(chǎn)生的異步 XMLHttpRequest 。

從介紹上可以看出，這個方法就是用來在用戶離開時(shí)發(fā)請求的。非常適合這種場景。

使用方式是這樣的：

navigator.sendBeacon(url [, data]);

sendBeacon支持發(fā)送的data可以是ArrayBufferView, Blob, DOMString, 或者 FormData 類型的數(shù)據(jù)。

下面是幾種使用sendBeacon發(fā)送請求的方式，可以修改header和內(nèi)容的格式，因?yàn)橐话愫头?wù)器的通信方式都是固定的，如果修改了header或者內(nèi)容，服務(wù)器就無法正常識別出來了。

（1）使用Blob來發(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對象，但是這時(shí)content-type會被設(shè)置成"multipart/form-data"。

var fd = new FormData();
fd.append('room_id', 123);
navigator.sendBeacon("/cgi-bin/leave_room", fd);

（3）數(shù)據(jù)也可以使用URLSearchParams 對象，content-type會被設(shè)置成"text/plain;charset=UTF-8" 。

var params = new URLSearchParams({ room_id: 123 })
navigator.sendBeacon("/cgi-bin/leave_room", params);

通過嘗試，可以發(fā)現(xiàn)使用blob發(fā)送比較方便，內(nèi)容的設(shè)置也比較靈活，如果發(fā)送的消息抓包后發(fā)現(xiàn)后臺沒有識別出來，可以嘗試修改內(nèi)容的string或者h(yuǎn)eader，來找到合適的方式發(fā)送請求。

看完上述內(nèi)容，你們掌握怎么在關(guān)閉Web頁面時(shí)發(fā)送Ajax請求的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！