Aborting / canceling running AJAX calls before execute new AJAX in JS

Question

I've never done this type of manipulation of AJAX calls (to stop/abort/cancel or ignore? already running AJAX calls before the execution of a new one) before so I really don't understand how to do that and would appreciate some direction.

I have a page in my app where I make a number of AJAX calls to fill dynamically the data in my table (Object Name, Object Fit, Object Progress) when the page loads. For example, there are 5 rows in the table. So I call

$.post("/getFit", {objectId: objectId}, function (result) { manipulation with result  }

and

$.post("/getProgress", {objectId: objectId}, function (result) { manipulation with result  }

5 times each in the loop -- one for each of the objects.

The first column of my table has links to more detail on the object, and clicking on them I call another AJAX:

 $(document).off('click', '.js_object').on('click', '.js_object', function (e) {
var objectId = $(this).attr("id")         
$.post("/viewObject", {objectId: objectId}, function (result) {document.getElementById("main_window_content").innerHTML = result;   });
    })

The problem is that the browser will not render the results of the last AJAX call (/viewObject) until it has received the results of all of the previous calls (/getFit x5 and /getProgress x5).

As a result, a user that wants to drill into the detail on an object needs to wait until the AJAX calls for the other objects are complete before they see anything.

So I struggle with how to stop/abort/cancel (or ignore?) "/getProgress" and "/getFit" so we can fully execute "/viewObject" and view the results of it.

I would very much appreciate your help.

Possible duplicate of [Abort Ajax requests using jQuery](https://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery) — Ahmed Masud, Sep 13 '17 at 19:27
Well the problem is that usually a browser will only handle 6 requests simultaneously, so your viewObject ajax call will be queued until there are only 5 remaining requests. Also, doing an ajax for every row of the table seems really bad design, why not make a single request with the list of object ids and retrieve it all at once? — juvian, Sep 13 '17 at 19:30
Found answer that works for me here: https://stackoverflow.com/a/11612641/5991985 — Мария, Sep 20 '17 at 18:56

score 0 · Answer 1 · answered Sep 13 '17 at 19:47

Use xhr.abort() to kill the xhr requests as shown in the below code in JS. I believe there is ajax.abort(); in JQuery

 var xhr = $.ajax({
    type: "POST",
    url: "XXX.php",
    data: "name=marry&location=London",
    success: function(msg){
       alert( "The Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

score 0 · Answer 2 · answered Sep 13 '17 at 20:02

If you want execute one ajax after another, and you need all requests to work to show the final result, you can use .done():

$.ajax({
    url:'/getFit',
    data:{objectId:objectId}
})
.done(function(data){
//do something with the results then call /getProgress

        $.ajax({
            url:'/getProgress',
            data:{objectId:objectId}
        })
        .done(function(data){
            //do something with the results then call /viewObject
            $.post("/viewObject"....
        })
});

That way you only show /viewObject if the others calls were successfull

Aborting / canceling running AJAX calls before execute new AJAX in JS

2 Answers2