Invia AJAX al server prima di caricare

Quindi, presumibilmente, a partire da Firefox> 4 , il binding dell’object window jQuery a beforeunload non funziona più.

Quello che mi piacerebbe fare è inviare un post AJAX per eliminare i dati memcache del mio server.

Quando aggiorno l’unica scheda aperta, posso vedere che l’evento beforeunload viene chiamato sia in firefox che in chrome con il seguente codice, come evidenziato dal messaggio console.log, “firefox / NON-firefox delete”. Il problema è che non vedo mai il messaggio console.log “memcache delete” che indica che il mio server non ha mai visto la richiesta $.ajax .

Mi rendo conto che è male fare sniffing del browser e che non c’è differenza tra ciò che è incluso nelle istruzioni if ​​e else. Sto semplicemente mostrando il codice per quello che ho provato senza successo in Firefox.

Qualcuno ha qualche idea?

 $(window).bind('beforeunload', function(){ if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) { console.log('firefox delete'); memcacheDelete(); return null; } else { console.log('NON-firefox delete'); memcacheDelete(); return null; } }); function memcacheDelete() { $.ajax({ url: "/memcache/delete", type: "post", data:{}, success:function(){ console.log('memcache deleted'); }//success }); //ajax } 

Ajax è asincrono.

Quando si aggiorna (o si chiude) il browser, viene chiamato il beforeunload . E significa che non appena terminato l’esecuzione di beforeunload , la pagina si aggiornerà (o chiuderà).

Quando si esegue una richiesta Ajax, (dal suo asincrono) interprete javascript non attende l’esecuzione di un evento di success ajax e si sposta verso il basso terminando l’esecuzione di beforeunload .

success di ajax dovrebbe essere chiamato dopo pochi secondi, ma non lo vedi come la pagina è stata aggiornata / chiusa.

Nota a margine:

.success() metodo .success() è deprecato e viene sostituito dal metodo .done()

Riferimento

Solo per completezza, ecco cosa ho fatto, grazie a @Jashwant per la guida: ho notato che questa altra domanda e risposta SO suggeriva la stessa soluzione . Il KEY è il async:true(false) nella chiamata $.ajax seguito:

 $(window).bind('beforeunload', function(){ if(/Firefox[\/\s](\d+)/.test(navigator.userAgent) && new Number(RegExp.$1) >= 4) { console.log('firefox delete'); var data={async:false}; memcacheDelete(data); return null; } else { console.log('NON-firefox delete'); var data={async:true}; memcacheDelete(data); return null; } }); function memcacheDelete(data) { $.ajax({ url: "/memcache/delete", type: "post", data:{}, async:data.async, success:function(){ console.log('memcache deleted'); }//success }); //ajax }