Al caricamento di un pagina lancio una chiamata ajax per caricare un div.
Questa chiamata esegue uno script in modo asincrono molto complesso che potrebbe richiedere molti secondi (anche minuti a volte).
Il problema è che quando l'utente non vuole aspettare il caricamento di quei dati e vuole cambiare pagina, ad esempio cliccando su un link, il browser non risponde fino a quando la chiamata ajax non viene conclusa.
Vorrei capire come abortire la chiamata.
Ho provato ad usare il metodo abort() ma non ho ottenuto i risultati voluti.
Questo è lo scripte che uso:

codice:
<script>
    // funzione per abortire la chiamata
    function abortAjax(xhr) {
        if(xhr && xhr.readystate != 4){
            xhr.abort();
            $("#divDati").html('Chiamata stoppata');
        }
    }
    


    $(document).ready(function(){
        xhr = $.ajax({
            url : "scriptPesante.php",
            data : { 'id1':'1', 'id2':'2' },
            type :  "GET",
            success : function (data,stato) {
                $("#divDati").html(data);
            },
            error : function (richiesta,stato,errori) {
                alert("Errore. Stato della chiamata: "+stato);
            }
        });
    
        // funzione per abortire la chiamata
        $("#btnAbort").click(function(){
            abortAjax(xhr);
        });


    });
</script>
Quando clicco sul bottone #btnAbort la chiamata sembra effettivamente abortita, infatti i dati non vengono caricati e appare la scritta "Chiamata stoppata", però se cerco di fare altre operazioni il browser rimane bloccato fino a quando probabilmente lato server la chiamata non è terminata.
Qualche idea?