AJAX call inside a loop. Only one request gets completed

Question

So I am using AJAX to hit an url multiple times, the problem that I am facing is that only one AJAX request gets completed even though the code is supposed to complete multiple requests. I have run the following code in the terminal:

var item_arr = ['a','b'];

item_arr.forEach(function(item_name){

$.ajax({url:'https://example.com:port/',
type:'POST',
data:{ 'item':item_name },
    success:function(res){
    console.log(res);
    }
});

});

What I basically want to ask is:

Is there anything that is wrong with this code?
Or is there a limit to the number of parallel requests to a specific url (there are just two)?

Also, I am using NODEJS(request) to build the app, I just used jquery to check if it works in jquery but both of these technologies are performing similarly for this issue.

UPDATE: As Rion suggested suggested, I compared the curl request for both, successful and unsuccessful requests. The headers for successful hit look like :

'Origin: http://evil.com/'
'Accept-Encoding: gzip, deflate' -H 'Accept-Language: en-US,en;q=0.8'
'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/49.0.2623.87 Chrome/49.0.2623.87 Safari/537.36'
'Content-Type: application/x-www-form-urlencoded'
'Accept: */*'
'Referer: http://stackoverflow.com/questions/33243685/nodejs-a-better-way-to-handle-ajax-request-to-the-server'
'Connection: keep-alive'

whereas for unsuccessful request has following headers:

'Accept: */*' 
'Referer: http://stackoverflow.com/questions/33243685/nodejs-a-better-way-to-handle-ajax-request-to-the-server'
'Origin: http://stackoverflow.com'
'User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/49.0.2623.87 Chrome/49.0.2623.87 Safari/537.36'
'Content-Type: application/x-www-form-urlencoded'

Does Accept-Encoding make any difference?

score 0 · Answer 1 · answered Apr 19 '16 at 15:24

0

Is there anything that is wrong with this code?

There doesn't appear to be anything wrong with your actual code as an example that does the same exact thing can be seen in this example fiddle and works just fine :

// Define your values
var item_arr = ['a','b'];

$(function(){
    // Loop through them
    item_arr.forEach(function(item_name){
      // Post each one (JSFiddle URL for example purposes)
      $.post('/echo/html/', { 'item':item_name }, function(){
        alert(item_name);
      });
    });
});

If this isn't working, then I would be inclined to be believe that something is wrong with the URL that you are posting to (i.e. possibly the results are not coming back successfully).

Or is there a limit to the number of parallel requests to a specific url (there are just two)?

This can vary as some browsers / web-servers may limit the number of concurrent connections from the same hostname, however with the small number that you are making, this shouldn't really be an issue. You could check to see if it was a possible caching issue by explicitly disabling the cache for your AJAX calls using :

cache: false

You might want to consider using the Developer Tools (F12) within your browser to see what each of the requests / responses look like to ensure they are working properly :

answered Apr 19 '16 at 15:24

Rion Williams

74,820
37
200
327

Hi Rion, thanks for the quick response. I checked my server side as well and I noticed that when I run this code, my server side code displays 'sending some json' to the client side. But the client side doesn't seem to receive it all. Although, I tried running each of these requests individually and they worked just fine. Also, since I am using nodeJS, I don't think cache should be a problem? – Ankit Sharma Apr 19 '16 at 15:33
You could try placing a `debugger` within your success callbacks and keeping the developer tools open when they execute. This would allow you to drill into your response to see if you possibly need to pull your response data out differently (sometimes you have to use `res.d` to access the data). With regards to `cache`, it probably doesn't necessarily pertain to your case, but it is worth mentioning for scenarios that heavily use it. – Rion Williams Apr 19 '16 at 15:35
Rion, request you to take a look at the question description. I have updated the question a bit. Comment section doesn't allow too many characters. – Ankit Sharma Apr 19 '16 at 15:55
Also, I just used **Replay XHR** functionality for the failed request and it worked well. But it doesnt work when used inside a loop. – Ankit Sharma Apr 19 '16 at 16:00
You could *try* setting the `dataType` attribute to `json` via `dataType: 'json'` to see if that makes any difference in your AJAX calls. Additionally, have you tried seeing if the requests works as a querystring (i.e. appending `'?item=' + item_name` to your URLs to see if that works. – Rion Williams Apr 19 '16 at 16:05
Yes I tried that as well. But no use :( Do I need to change anything at the server side to allow multiple requests simultaneously ? – Ankit Sharma Apr 19 '16 at 16:13
IIRC, Node supports at least 5-6 open connections / sockets simultaneously, so I don't believe that this would be an issue. [This related discussion](http://stackoverflow.com/q/12060869/557445) covers some of these concepts, but I don't know if they are necessarily relevant here. – Rion Williams Apr 19 '16 at 16:16
UPDATE : This code seems to work well on mozilla, it is not working on Chrome and NodeJS request module. Is there anything else that I can test? – Ankit Sharma Apr 20 '16 at 10:29
That's strange. I tested it out using Chrome for the Fiddle example that I provided earlier. You may want to see if you can perform your calls against a test API like [this one](http://jsonplaceholder.typicode.com). It might help isolate if it's an issue with your server or not. – Rion Williams Apr 20 '16 at 12:10

AJAX call inside a loop. Only one request gets completed

1 Answers1