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

有時候咱們須要在用戶離開頁面的時候,作一些上報來記錄用戶行爲。又或者是發送服務器ajax請求,通知服務器用戶已經離開,好比直播間內的退房操做。javascript

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

1.事件監聽

瀏覽器有兩個事件能夠用來監聽頁面關閉,beforeunloadunloadbeforeunload是在文檔和資源將要關閉的時候調用的, 這時候文檔仍是可見的,而且在這個關閉的事件仍是能夠取消的。好比下面這種寫法就會讓用戶致使在刷新或者關閉頁面時候,有個彈窗提醒用戶是否關閉。java

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.錯誤不會中止卸載文檔的過程。git

基於以上兩個方法就能夠實現對頁面關閉的事件監聽了,爲了穩妥,能夠兩個事件都監聽。而後對監聽函數作處理,讓關閉事件只調用一次。github

2.請求發送

有了上面的監聽,事情只完成了一半,若是咱們在監聽中直接發送ajax請求,就會發現請求被瀏覽器abort了,沒法發送出去。在頁面卸載的時候,瀏覽器並不能保證異步的請求可以成功發出去。web

咱們有幾種方式能夠解決這個問題:ajax

方案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');
複製代碼

這種方式雖然有效,可是用戶須要等待請求結束才能夠關閉頁面。對用戶的體驗很差。api

方案2:發送異步請求,而且在服務端忽略ajax的abort

雖然異步請求會被瀏覽器abort,可是若是服務端能夠忽略abort,仍然正常執行,也是能夠的。好比PHP有ignore_user_abort函數能夠忽略abort。這樣須要改造後臺,通常不太可行..瀏覽器

方案3:使用navigator.sendBeacon發送異步請求

根據MDN的介紹:bash

這個方法主要用於知足 統計和診斷代碼 的須要,這些代碼一般嘗試在卸載(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);
複製代碼

image-20190211094506994

(2)使用FormData對象,可是這時content-type會被設置成"multipart/form-data"。

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

image-20190211094625904

(3)數據也可使用URLSearchParams 對象,content-type會被設置成"text/plain;charset=UTF-8" 。

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

image-20190211095036518

經過嘗試,能夠發現使用blob發送比較方便,內容的設置也比較靈活,若是發送的消息抓包後發現後臺沒有識別出來,能夠嘗試修改內容的string或者header,來找到合適的方式發送請求。

參考連接:

  1. sendBeacon API not working temporarily due to security issue, any workaround?

  2. Sending AJAX Data when User Moves Away / Exits from Page

  3. Setting HTTP Headers in a Beacon Request


《IVWEB 技術週刊》 震撼上線了,關注公衆號:IVWEB社區,每週定時推送優質文章。

相關文章
相關標籤/搜索