How to avoid previous ajax response if interrupted by other page load in SPA(Single Page Application)?

Question

May I ask some concept about SPA? I developed client side web page using SPA. In menu A clicks it request some ajax calls and wait the response. During this time if I go to another page B, the A's ajax response is comes and it is trying to call the javascript code which already loaded because the browser does not perform refresh in SPA. How can I avoid this situation and ignore all the previous A's ajax response?

$.ajax({
      url: url,
      type: "GET",
      dataType: "json",
      headers: {"Authorization": 'Token ' + myToken},
      success: function(response) {
          my_callback(response); // <== I want to block this if leaves current page...
      },
      error: function(response) {
      },
      complete: function(response) {
      }
    });

Answer 1

You can abort the request.

The XMLHttpRequest.abort() method aborts the request if it has already been sent. When a request is aborted, its readyState is changed to XMLHttpRequest.UNSENT (0) and the request's status code is set to 0.

    var xhr = $.ajax({
        url: url,
        type: "GET",
        dataType: "json",
        headers: { "Authorization": 'Token ' + myToken },
        success: function (response) {
            my_callback(response); // <== I want to block this if leaves current page...
        },
        error: function (response) {
        },
        complete: function (response) {
        }
    });

if(pageNavigates){
    xhr.abort();
}