I need to stop an AJAX processing and later redirect the page

Question

Hello, I have the following problem: I upload my homepage, and on this page is brought a select in the very heavy bd, so I made the page load, and then made an AJAX request to bring and display that table later, so that the user does not need to wait for this heavy select to be performed to access the home page.

However, as the AJAX request is in progress, I cannot access the menu and redirect to another page while AJAX does not end, I mean, I click on a link to change page and the redirect is only done after AJAX returns error or success.

I need a way to abort AJAX and redirect to another page instantly, I tried using the function. abort() and this function aborts loading the table on the screen but it waits for the request to finish. I need to kill this request to access the menu items quickly, can you help me? Below is the code performed.

<script>
        var progress;
        carregaEstatisticas();

        function carregaEstatisticas() {
            $('#divEstatisticas').html('<table class="col-lg-12 col-md-12 col-sm-12"><tr><td align="center"><img class="img-responsive" src="/Content/img/loading_laranja.gif" style="width: 20px; height: 20px;"></td></tr></table>');
            getEstatisticas();
        }

        function getEstatisticas() {
            progress = $.ajax({
                url: '/Home/Estatisticas',
                type: "POST",
                data: {
                    dataConsulta: $('#dataConsulta').val(),
                    empresa: $('#empresa').val()
                },
                success: function (data) {
                    $("#divEstatisticas").html(data);
                }
            });
        }

        $('a').on("click", function () {
            progress.onreadystatechange = null;
            progress.abort();
            progress = false;
        });
    </script>

Answer 1

Use Event.preventDefault();

You

    function getEstatisticas() {
        event.preventDefault();
        progress = $.ajax({
            url: '/Home/Estatisticas',
            type: "POST",
            data: {
                dataConsulta: $('#dataConsulta').val(),
                empresa: $('#empresa').val()
            },
            success: function (data) {
                $("#divEstatisticas").html(data);
            }
        });
    }