javascript - Run Ajax Request on Window Close - Stack Overflow

admin管理员组

文章数量:1023009

I am trying to submit some form data if a window is closed, but I can't even get the alert to work either while testing. I did read that I may need a server side alternative to do this?

Here is what I have:

//if window is closed send form data anyway
$(window).on('beforeunload', function() {
    $.ajax({
            type: 'POST',
            url: $(actualForm).attr('action'),
            data: formData,
            async: false
    });
    alert('something');
});

Am I doing something wrong, or is this just not a viable solution?

I am trying to submit some form data if a window is closed, but I can't even get the alert to work either while testing. I did read that I may need a server side alternative to do this?

Here is what I have:

//if window is closed send form data anyway
$(window).on('beforeunload', function() {
    $.ajax({
            type: 'POST',
            url: $(actualForm).attr('action'),
            data: formData,
            async: false
    });
    alert('something');
});

Am I doing something wrong, or is this just not a viable solution?

• javascript
• jquery
• ajax

Share Improve this question Follow asked Jul 10, 2016 at 4:16 Brian GarciaBrian Garcia 3511 silver badge88 bronze badges 3

• Like the answer below notes, beforeunload can't be counted on to execute an ajax request in time. If you want to go through with it, though, I'd remend making the code as performant as possible, so there's a better chance of pletion. In your case, this would mean caching $(actualForm) in a var, so jQuery doesn't have to construct the object before sending off the ajax request. In other words, at DOM ready, var cachedForm = $(actualForm)[0];, and in the request, url: cachedForm.getAttribute('action'),'. – jmealy Commented Jul 10, 2016 at 4:27
• Thanks @JohnAtNotion – Brian Garcia Commented Jul 10, 2016 at 18:08
• Consider using the Beacon API. – Sebastian Simon Commented Oct 31, 2022 at 16:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

This will not work reliably. You cannot fire off a network request on unload and expect it to finish before the context of the page is torn down. If you have data to send, it should be sent when this form isn't being interacted with. (Check the onblur events for when focus leaves the inputs.)

Generically speaking, if you need to know when someone closes the page, there are some crafty alternatives, each with their own caveats.

One classic method is the long poll resource. Basically, you rig your server to accept a connection and send headers, but do not send the actual data. The resource can be anything... image, js, media, doesn't matter. The idea here is that when the page context is destroyed, the browser will cancel any in-flight HTTP requests. When the connection is dropped, it's likely that the browser has closed. There are real problems with this approach. Proxy servers between you and the browser will do unpredictable things, killing connections early, leaving them open indefinitely, etc. The other issue is that you must remember that with HTTP/1.1 and HTTP/2, many requests can be sent down the same connection. The user may close the page but the underlying TCP connection might be kept active.

Web sockets can be used as a modern alternative. You can be reasonably certain that if you make a web socket connection, and it is closed, that the page is gone or the browser has otherwise lost its connectivity. Like with long polling, you will need to build a server to support this functionality. Also beware that some mobile networks really mess up web sockets. (Thanks for that, Sprint.) This is getting better though, as web sockets have been supported in browsers for several years at this point.

You could also do a repeated AJAX poll. Every 5 seconds or so, the client sends a request saying, "I'm still here!", and the server updates its database indicating so. If after 15 seconds you haven't heard from the browser, it's probably no longer open. Again there is no guarantee of this though... connectivity could have just been momentarily lost. The downside of this method is that there is overhead to each one of those requests. There is also a high latency of detection when the browser has closed because you have to set a fairly high poll interval. (I wouldn't go less than 5 seconds. You don't know what sort of client-side resource issues might slow down browser requests. Ever met anyone that used satellite internet?)

In summary, it's best not to have to do this at all. Work around the problem by saving early, if at all possible.

I am trying to submit some form data if a window is closed, but I can't even get the alert to work either while testing. I did read that I may need a server side alternative to do this?

Here is what I have:

//if window is closed send form data anyway
$(window).on('beforeunload', function() {
    $.ajax({
            type: 'POST',
            url: $(actualForm).attr('action'),
            data: formData,
            async: false
    });
    alert('something');
});

Am I doing something wrong, or is this just not a viable solution?

I am trying to submit some form data if a window is closed, but I can't even get the alert to work either while testing. I did read that I may need a server side alternative to do this?

Here is what I have:

//if window is closed send form data anyway
$(window).on('beforeunload', function() {
    $.ajax({
            type: 'POST',
            url: $(actualForm).attr('action'),
            data: formData,
            async: false
    });
    alert('something');
});

Am I doing something wrong, or is this just not a viable solution?

• javascript
• jquery
• ajax

Share Improve this question Follow asked Jul 10, 2016 at 4:16 Brian GarciaBrian Garcia 3511 silver badge88 bronze badges 3

• Like the answer below notes, beforeunload can't be counted on to execute an ajax request in time. If you want to go through with it, though, I'd remend making the code as performant as possible, so there's a better chance of pletion. In your case, this would mean caching $(actualForm) in a var, so jQuery doesn't have to construct the object before sending off the ajax request. In other words, at DOM ready, var cachedForm = $(actualForm)[0];, and in the request, url: cachedForm.getAttribute('action'),'. – jmealy Commented Jul 10, 2016 at 4:27
• Thanks @JohnAtNotion – Brian Garcia Commented Jul 10, 2016 at 18:08
• Consider using the Beacon API. – Sebastian Simon Commented Oct 31, 2022 at 16:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

This will not work reliably. You cannot fire off a network request on unload and expect it to finish before the context of the page is torn down. If you have data to send, it should be sent when this form isn't being interacted with. (Check the onblur events for when focus leaves the inputs.)

Generically speaking, if you need to know when someone closes the page, there are some crafty alternatives, each with their own caveats.

One classic method is the long poll resource. Basically, you rig your server to accept a connection and send headers, but do not send the actual data. The resource can be anything... image, js, media, doesn't matter. The idea here is that when the page context is destroyed, the browser will cancel any in-flight HTTP requests. When the connection is dropped, it's likely that the browser has closed. There are real problems with this approach. Proxy servers between you and the browser will do unpredictable things, killing connections early, leaving them open indefinitely, etc. The other issue is that you must remember that with HTTP/1.1 and HTTP/2, many requests can be sent down the same connection. The user may close the page but the underlying TCP connection might be kept active.

Web sockets can be used as a modern alternative. You can be reasonably certain that if you make a web socket connection, and it is closed, that the page is gone or the browser has otherwise lost its connectivity. Like with long polling, you will need to build a server to support this functionality. Also beware that some mobile networks really mess up web sockets. (Thanks for that, Sprint.) This is getting better though, as web sockets have been supported in browsers for several years at this point.

You could also do a repeated AJAX poll. Every 5 seconds or so, the client sends a request saying, "I'm still here!", and the server updates its database indicating so. If after 15 seconds you haven't heard from the browser, it's probably no longer open. Again there is no guarantee of this though... connectivity could have just been momentarily lost. The downside of this method is that there is overhead to each one of those requests. There is also a high latency of detection when the browser has closed because you have to set a fairly high poll interval. (I wouldn't go less than 5 seconds. You don't know what sort of client-side resource issues might slow down browser requests. Ever met anyone that used satellite internet?)

In summary, it's best not to have to do this at all. Work around the problem by saving early, if at all possible.

本文标签：