Nested AJAX requests without a callback success function

Question

After reading this thread jQuery Ajax Request inside Ajax Request

Hi everyone I need to have explanations about such a situation. I've just been working on the code of a former member of my development team and found many parts of the code where he makes asynchronous ajax calls within other ajax calls.

My question is: can anyone explain the advantages and disadvantages of this practice and whether it is a good or bad practice?

Here is an example of code:

// first ajax (starting ajax call)
$.ajax({
    url: "script1.php", 
    type: "POST", 
    data: {paramFisrtAjax: "first-ajax"},
    success: function(response) {
       alert(response);
    }
});

script1.php

<script>    
// second ajax
$.ajax({
    url: "script2.php", 
    type: "POST", 
    data: {paramFirstAjax: "<?= $_POST['paramFisrtAjax'] ?>", paramSecondAjax: "second-ajax"},
    success: function(response) {
        alert(response);
    }
});
</script>
<?php 
// some operations on database server
echo "page2 operations with param: paramFirstAjax-> {$_POST['paramFirstAjax']}"; 
?>

script2.php

<?php 
// some operations on database server
echo "page3 operations with params: firstParam -> {$_POST['paramFisrtAjax']} and secondParam-> {$_POST['paramSecondAjax']}";
?>

Something tells me it's not a good thing becouse i think the correct way is use the callback function success. Like this: jquery nested ajax calls formatting

That depends on the case, is the second ajax call depending on the conclusion of the first one? — Claudio, Nov 20 '17 at 10:57
There are two jQuery Ajax calls here, but no context. No variables are set, there is no code in the callbacks. Without context this question cannot be answered. — Tomalak, Nov 20 '17 at 10:57
if he's not using "success", then how else is he doing it "within" another ajax call, exactly? Is it using the alternative promise-based syntax (e.g. ".done()2 method?). You haven't shown how the two calls are being nested. There are just two near-identical code samples shown out of context. Without knowing how the actual, real code fits together it's not really possible to answer. — ADyson, Nov 20 '17 at 10:57
Yes, but you cut it down too much, to something which no longer demonstrates the issue. — ADyson, Nov 20 '17 at 10:59
This is a pretty messy approach in my opinion. Never seen it done like that before. It seems a bit unnecessary and even over-complicated really. The link you gave at https://stackoverflow.com/questions/22233650/jquery-nested-ajax-calls-formatting is much neater - assuming you want to wait for the previous call to finish before starting the next one? Is that what you're aiming for? It's still the case that the code for those calls don't have to be in the same file - they can be in different .js files which you include in the page up-front, as long as they're all there when it runs. — ADyson, Nov 20 '17 at 13:17
I'm perfectly in agreement with you. Question to have some other opinion. — Alberto Favaro, Nov 20 '17 at 13:26
Stack Overflow is not to collect people's opinion. Please ask an answerable question, not a poll. [help/on-topic] — Tomalak, Nov 20 '17 at 15:50

score 2 · Accepted Answer · answered Nov 20 '17 at 11:18

There is an advantage and a disadvantage here.

The Advantages are:

1) You make an async call, making the request a lot faster. You do not wait for the callback function, thus do not wait for your response which might take time to return. You do everything on the background rather then 'straight forward'. This is understandable when you call multiple methods and you do not want the delay in waiting for the callback.

2) You are able to fetch a far greater amount data through your call while minimizing the need of the end client to wait. This is useful when you have a big amount of data to display and you want to make it with minimal effort.

The Disadvantages:

1) Error handling is a pain. If something fails within the inner calls, it takes time to detect were the failure occurred and on which method. When waiting for the callback, you can detect right away where the error occurred, as it will return a response of success or error,

2) if there is a mismatch on the data, it is hard to track back and see where the missing part took place, you will have to go through each request one by one to detect and use developer tools and/or fiddler as well, since those are async calls at the end.

3) it is easy to put too much effort on the client, since maintaining this kind of technique might result in calling multiple methods that will work together at the same time, thus creating overload on the client, locks on the threads or DB when working with server side code and more.

This explained, you can now decide for yourself with which type of method you would like to continue further in your code.

Nested AJAX requests without a callback success function

1 Answers1