Don't have time to send get request on window unload

Question

I want to notify the server on user closes browser window.

I tried all of the

$(window).bind("beforeunload", function() {
    $.get("${contextPath}/notify?direction=logout");
});

and

$(window).unload( function() {
    $.get("${contextPath}/notify?direction=logout");
});

and

$(window).unload(function() {
    $.ajax({
      url: "${contextPath}/notify?direction=logout"
    });
});

but neither work well, despite the fact, that it is said in manual that it probably should.

In Firefox I have no notifications only on window close, but have ones on page refresh. In Chrome I have neither.

I tried to trace this script in Firebug or Chrome Developer Tools and found, that it is starting to work if traced! So I think it does not work normally because it has no time to send request before window closed or navigated.

Is this true? How to accomplish my task?

Answer 1

The other answers are out of date, and cause other issues, such as unreliable signalling or delaying the load of the next page.

The best solution is to use navigator.sendBeacon: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

window.addEventListener("unload", logData, false);

function logData() {
  navigator.sendBeacon("/log", analyticsData);
}

This method is intended for analytics and diagnostics code to send data to a server.

A problem with sending analytics is that a site often wants to send analytics when the user has finished with a page: for example, when the user navigates to another page. In this situation the browser may be about to unload the page, and in that case the browser may choose not to send asynchronous XMLHttpRequest requests.

In the past, web pages have tried to delay page unload long enough to send data. To do this they have used workarounds such as:

• Submitting the data with a blocking synchronous XMLHttpRequest call.
• Creating an element and setting its src. Most user agents will delay the unload to load the image.
• Creating a no-op loop for several seconds.

All these methods block unloading the document, which slows down navigation to the next page. There's nothing the next page can do to avoid this, so the new page seems slow, even though it's the fault of the previous page.

With the sendBeacon() method, the data is transmitted asynchronously when the user agent has an opportunity to do so, without delaying unload or the next navigation. This means:

• The data is sent reliably
• It's sent asynchronously
• It doesn't impact the loading of the next page

Answer 2

It is very tricky because the browser will not wait untill the response comes so the ajax request might get aborted.

You can try something like this in beforeunload event.

$(window).bind("beforeunload", function() {
    $.ajax({
        async: false,//This will make sure the browser waits until request completes
        url: "${contextPath}/notify?direction=logout"
    });
});