AJAX calls immediately before leaving page

Question

I want to perform a simple AJAX get request when a user clicks a link to another page. Will the AJAX call complete or will it stop because the user is leaving the page that initiated the AJAX request? I don't really care about the response from the get request.

Any Thoughts or Ideas?

possible duplicate of [Ajax request with JQuery on page unload](http://stackoverflow.com/questions/1821625/ajax-request-with-jquery-on-page-unload) (though it's jQuery, premise is the same) — Brad Christie, Feb 07 '11 at 16:07
Accept some of your other answers before asking new questions. — George Johnston, Feb 07 '11 at 16:08
Add click event handler to external links, perform ajax request, on request success/failure redirect user to link href... — acm, Feb 07 '11 at 16:09

jAndy · Accepted Answer · 2011-02-07T16:20:19.147

12

If you just want to send data to your server and don't care about the resonse, you might want to try a beacon request. That basically is, a fire and forget thing which works like this:

function sendInfo(something) {
     var beacon = new Image();
         beacon.src = '/somepath/script.pl?info=' + something;
}

$('a[href^=http]').bind('click', function(e) {
    sendInfo(escape(e.href));
});

Well, this technique does not block so it might be a race condition whether or not the browser will fire the request (I didn't test it on this purpose). To be sure that the request will fire, invoke an ajax call like this:

$('a[href^=http]').bind('click', function(e) {
    $.get('/somepath/script.pl', {info: escape(e.href)}, function(data) {
        location.href = e.href;
    });

    return false;
});

edited Feb 07 '11 at 16:20

answered Feb 07 '11 at 16:12

jAndy

231,737
57
305
359

Thanks andy, this was really helpful. I ended yo using the beacon method. – Chuck D May 02 '11 at 20:11
1

I have tested the beacon solution for a similar need, and it works well for every browser except chrome (17.0.942.0 dev), in which the image is almost never loaded, even by randomizing the url to avoid cache hitting, so there must be an optimisation made to avoid loading "useless" images. – SirDarius Dec 05 '11 at 10:55

score 3 · Answer 2 · answered Jun 20 '12 at 03:50

I know that this question was asked, answered, and accepted a long time ago... but I just recently asked myself the same question, found jAndy's answer, and slightly improved upon it (regarding the Chrome compatibility issue) and thought I would post my findings.

Andy's beacon answer was nice and simple, but as SirDarius has mentioned, Chrome seems to be optimized to ignore it.

I modified jAndy's code to be as follows:

function sendInfo(something) {
     var beacon = new Image();
         beacon.src = '/somepath/script.pl?info=' + something;
}

$('a[href^=http]').bind('click', function(e) {
    sendInfo(escape(e.href));
    setTimeout(function() {window.location.href=e.href;},0); // change window location on timeout
    return false; // cancel current window location change
});

and this seemed to get rid of the issue.

Thanks Andy!

AJAX calls immediately before leaving page

2 Answers2