How to send an AJAX PUT request on page unload without it cancelling?
All you need to do is make the ajax call synchronous. That way the browser will wait for the response before closing the window/tab and it will not be cancelled.
$(window).unload(function(){
$.ajax({
type: 'PUT',
url: '/your_url.php',
async:false, //IMPORTANT, the call will be synchronous
data: {}
}).done(function(data) {
console.log('complete');
});
});
Doing standard ajax calls in a page unload handler is being actively disabled by browsers, because waiting for it to complete delays the next thing happening in the window (for instance, loading a new page). Although you can't do PUT with it, the replacement for synchronous ajax in unload handlers is sendBeacon
. sendBeacon
lets you send data to your server without holding up the page you're doing it in:
window.addEventListener("unload", function() {
navigator.sendBeacon("/log", yourDataHere);
});
The browser will send the data without preventing / delaying whatever is happening in the window (closing it, moving to a new paeg, etc.).
Beacons are POSTs, not PUTs, but other than that it's exactly what you're looking for.