如何在頁面關閉或跳轉時優雅的發送Ajax請求

有時候我們需要在使用者離開頁面的時候，做一些上報來記錄使用者行為或者埋點，又或者是發送到伺服器的ajax請求。那如何保證請求能夠正确的送達就是一個很關鍵的點。下面我們就來介紹下應該如何操作：

首先，要做事件監聽

浏覽器有兩個事件可以用來監聽頁面關閉，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.錯誤不會停止解除安裝文檔的過程。

基于以上兩個方法就可以實作對頁面關閉的事件監聽了，為了穩妥，可以兩個事件都監聽。然後對監聽函數做處理，讓關閉事件隻調用一次，比如用變量控制請求發送的次數。

其次，發送請求

有了上面的監聽，事情隻完成了一半，如果我們在監聽中直接發送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 {
 console.log(oAjax);
 }
};

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，來找到合适的方式發送請求。