1

window.onbeforeunload event not sending ajax request on Server side

I want to logout the user when user closes the browser or tab. I have implemented the window.onbeforeunload event but on this method ajax request is not working.

window.onbeforeunload = function() {
  var d = {
    userid: 123
  };
  $.ajax({
    type: 'POST',
    url: 'https://example.com/api/logout',
    data: d,
    async: false
  });

  return null;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
need html perhaps
Community
  • 1
  • 1
Faisal
  • 81
  • 4
  • 2
    Does this get called, can you confirm that is the case? NOTE: typically I believe `window.addEventListener("beforeunload", function(event) { ... });` should be the preferred form of the event listener. You also may wish to have it return before you unload with `event.preventDefault();` – Mark Schultheiss Apr 16 '19 at 13:59
  • Add an `alert` to see if the code gets hit. – Wouter van Vegchel Apr 16 '19 at 14:01
  • NOTE: `async:false` is deprecated, please see https://stackoverflow.com/q/11448011/125981 and http://api.jquery.com/jQuery.ajax/ – Mark Schultheiss Apr 16 '19 at 14:04
  • What if the user has two browser windows/tabs open and logged in? that could present usability issues that you might handle. – Mark Schultheiss Apr 16 '19 at 14:08

2 Answers2

0

As you already thought of, your action is asynchronous and therefor not stopping the browser to be closed.

The async: false is not supported anymore. Not by jquery nor by browsers.

http://api.jquery.com/jquery.ajax/

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests

and therefor you must cancel the event until the success event as stated here.

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

bresleveloper
  • 5,940
  • 3
  • 33
  • 47
  • 1
    Deprecated, but still supported - which is a difference to me at least. "your action is asynchronous" - please clarify that as the ajax is NOT asynchronous as posted in the OP question. – Mark Schultheiss Apr 16 '19 at 14:21
  • i meant as in not supported, i've never managed to get the ajax actually sync, it always async. therefor the right approach would be to cancel the event, do the ajax, and by code close the window – bresleveloper Apr 17 '19 at 12:39
0

Still a number of questions around this (two browser windows, what happens next, what if it fails, 

function handleMyUnload(e) {
  // Cancel the event
  e.preventDefault();
  // Chrome requires returnValue to be set
  e.returnValue = '';

  var d = {
    userid: 123
  };
  $.ajax({
    type: 'POST',
    url: 'https://example.com/api/logout',
    data: d,
    async: false
  }).done(function(data, textStatus, jqXHR) {
    // ajax is done, so remove the handler
    window.removeEventListener("beforeunload", handleMyUnload, false);
    // leave it to you to determine what happens next (close, reload, navigate etc.) here
  }).fail(function(){
    // do what?
  });
  return null;
}
window.addEventListener("beforeunload", handleMyUnload, false);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
need html perhaps
georgeawg
  • 48,608
  • 13
  • 72
  • 95
Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
  • 1
    Synchronous XMLHttpRequest outside of workers is in the process of being removed from the web platform as it has detrimental effects to the end user’s experience. (This is a long process that takes many years.) Developers must not pass false for the async argument when current global object is a Window object. User agents are strongly encouraged to warn about such usage in developer tools and may experiment with throwing an "InvalidAccessError" DOMException when it occurs. See [WHATWG XHR Spec](https://xhr.spec.whatwg.org/#the-open()-method). – georgeawg Apr 16 '19 at 17:28