making multiple HTTP GET requests with javascript

Question

I am attempting to make multiple http get requests in js. but I'm a total noob. I would not be opposed to jQuery either. The idea is I make a call to my server so I can populate a js chart.

var client;
function handler() { 
    if(client.readyState == 4 && client.status == 200) { 
        // make a chart
    }
} 

window.onload = function() { 
    client = new XMLHttpRequest(); 
    client.onreadystatechanged = handler; 
    client.open("GET", "http://someurl/stuff"); 
    client.send();
}

so the above is the basic idea of a web request. It seems that the handler acts a callback or event. this works when creating one get request. but if I make two or more, then I get mixed results. sometimes all requests will work, other times none, or just one. the error that occurs is the connection has not been closed.

Does [**my answer here**](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call/16825593#16825593) help? — Benjamin Gruenbaum, Nov 13 '13 at 23:25
I think it does Benji.... I think it does. (but we will let OP comment and not some random lurker) — rlemon, Nov 13 '13 at 23:25
Hi Benjamin, yes your answer is what I was looking for! thanks! — Matthew Knudsen, Nov 14 '13 at 02:42

user2864740 · Answer 1 · 2013-11-13T23:34:07.047

0

The primary issue with this code is that it uses the same global variables (e.g. client) which will just fail for multiple requests as they become clobbered.

(The issue that the order of the handler invocations is undefined due to the asynchronous nature of the requests is only secondary to the lack of re-entrancy of creating/using the XHR object in the given code - there is no way that the handler is guaranteed the correct XHR object when it access the client variable!)

Closures and objects avoid this issue but .. just use jQuery (or whatever library you prefer that provides a nice XHR interface, preferably with Promises).

Since you "would not be opposed to jquery", then use it. Take care to only do work from within the callbacks (or promise handlers) using the returned data they provide - this is because the requests are, well, asynchronous.

edited Nov 13 '13 at 23:34

answered Nov 13 '13 at 23:22

user2864740

60,010
15
145
220

This a) doesn't answer the question and b) suggests using an 80KB library with thousands of lines of code that's focused on DOM manipulation for simple AJAX. The problem with the code above is that OP doesn't know how concurrency works in JS yet so he's having trouble returning from an AJAX call. – Benjamin Gruenbaum Nov 13 '13 at 23:26
1

@BenjaminGruenbaum "or whatever library you prefer", and especially considering that the OP is "not be opposed to jquery", then yes. There are some within 4kb. As for your answer .. it's not related to the issue of clobbering at all. – user2864740 Nov 13 '13 at 23:27
Who said anything about clobbering? That's not the issue OP is having at all. His problem is with returning from AJAX . The issue of suggesting libraries blindly for problems easily solvable otherwise has been discussed in meta several times. – Benjamin Gruenbaum Nov 13 '13 at 23:28
1

@BenjaminGruenbaum It's *all* related to clobbering. His global data is only designed for one request. The order of handlers being called is only secondary (if all the data was bound in a closure it would suffice). – user2864740 Nov 13 '13 at 23:29
"There is _also_ an issue that the order of the handler invoked is undefined due to the asynchronous nature of the requests" - That __is__ the issue here. – Benjamin Gruenbaum Nov 13 '13 at 23:29
1

@BenjaminGruenbaum Which is the *primary issue* here. – user2864740 Nov 13 '13 at 23:31

making multiple HTTP GET requests with javascript

1 Answers1