Ajax function throws empty error when a button is clicked to perform another action

This ajax is called on $(document).ready() when the page loads. It executes successfully but for some reason when I click or trigger another action without waiting for the ajax call to finish it will throw an empty error.

$.ajax({
        type: 'POST',
        url: url,
       async:true,
        data: sampledata,
        beforeSend: function () {
            loader.show();
        },
        success: function (data) {
            loader.remove();
            Display(data);
        },
        error: function (xml, status, error) {
           alert(error );
        }
    });

The ajax function is called to get and display data on a page. But when I click a button to go to another page, the error throws. It works fine when the ajax call is finished before clicking a button to go to another page.