Executing multiple XMLHttp requests

[Brent]

I'm trying to figure out how to iterate over an array that would send
a series of XMLHttp requests. I'd like to have each request finish
before the next one begins, but I believe that this is not possible to
do in a straightforward fashion, given the normally asynchronous
method of XMLHttp. The (untested, pseudo) code below gives a little
idea of what the goal is, but I'm not really sure how to program it
elegantly.

One thought I had is to compare two arrays, one with the desired IDs
to be completed, and another with the IDs that have been completed.
The callback handler would add IDs as each request is completed, and
then restart the process until the two arrays match exactly.

Is there any more elegant way?

Thanks for any pointers.

--Brent

------------------------------------------------------------------------

function updateLists()
{
var listIds = "3,7,42,157";

var listArr = listIds.split(',');

for(i = 0; i < listArr.length; i++)
{
doUpdate(listArr); //<--How do I make the loop wait for
doUpdate() to complete before proceeding?
}
}


function doUpdate(listId)
{
//executes XMLHttp request on server and sets up callback
handler, showListStatus
}

function showListStatus(callbackResponse)
{
//Code that updates page with result from server.
//This could add to an array of finished IDs, and then call
updateLists() again, where
//the array of finished IDs would be compared to the array of
desired IDs
}

 

[Bjoern Hoehrmann]

* Brent wrote in comp.lang.javascript:

I'm trying to figure out how to iterate over an array that would send
a series of XMLHttp requests. I'd like to have each request finish
before the next one begins, but I believe that this is not possible to
do in a straightforward fashion, given the normally asynchronous
method of XMLHttp. The (untested, pseudo) code below gives a little
idea of what the goal is, but I'm not really sure how to program it
elegantly.

If you want to download the resources in parallel this is relatively
simple, just download the "next" one from the ready state change handler
when it's indicating that the download completed. Keep track of the
resources to download e.g. by an array that you pop from each time,
until it's empty. If you want to do something after all the downloads
are complete, do that too from there. This is pretty much the only way
since you cannot otherwise wait for an operation to complete.

 

[Une Bévue]

This is pretty much the only way
since you cannot otherwise wait for an operation to complete.

do you mean even with a "window.setTimeout" ? something like :

function everythingDownloaded(){
if(isEverythingDownloaded){
do next job
} else {
window.setTimeout(everythingDownloaded(),100)
}
}
???

 

[Tom de Neef]

I'm trying to figure out how to iterate over an array that would send
a series of XMLHttp requests. I'd like to have each request finish
before the next one begins, but I believe that this is not possible to
do in a straightforward fashion, given the normally asynchronous
method of XMLHttp. The (untested, pseudo) code below gives a little
idea of what the goal is, but I'm not really sure how to program it
elegantly.

One thought I had is to compare two arrays, one with the desired IDs
to be completed, and another with the IDs that have been completed.
The callback handler would add IDs as each request is completed, and
then restart the process until the two arrays match exactly.

Is there any more elegant way?

You can call XMLHttpRequest.open("GET",URL,false); the third argument says
'not asynchronous' and that seems to be just what you are trying to do.
Tom

 

[Bjoern Hoehrmann]

* Une Bévue wrote in comp.lang.javascript:

do you mean even with a "window.setTimeout" ? something like :

function everythingDownloaded(){
if(isEverythingDownloaded){
do next job
} else {
window.setTimeout(everythingDownloaded(),100)
}
}

That's not waiting, that's polling, and yes that would be possible but
rather ugly, you could just do the same you would do here in the ready
state change handler.

 

[Brent]

That's not waiting, that's polling, and yes that would be possible but

rather ugly, you could just do the same you would do here in the ready
state change handler.

Björn:

You wouldn't happen to have some example code, would you? I've looked
all over for ways to load up the ready state handler with responses
from multiple requests, but I'm coming up short.

Thanks in advance.

--Brent

 

[Bjoern Hoehrmann]

* Brent wrote in comp.lang.javascript:

You wouldn't happen to have some example code, would you? I've looked
all over for ways to load up the ready state handler with responses
from multiple requests, but I'm coming up short.

It would look like this:

var urls = [ 'c', 'b', 'a' ];
var xhro = new XMLHttpRequest();

xhro.onreadystatechange = function() {

// Do nothing while the object is downloading
if (xhro.readyState != XMLHttpRequest.UNSENT &&
xhro.readyState != XMLHttpRequest.DONE)
return;

if (urls.length == 0) {
// everything has been downloaded
return;
}

// Download the next document
xhro.open("GET", urls.pop(), false);
xhro.send();
}

// call it manually for the first url.
xhro.onreadystatechange();

Note that this is unlikely to work in current implementations. The key
idea is simply to check whether the previous request has finished, if
not you continue, otherwise you start a new one, until there is nothing
left to do.

 

[Todd Wade]

I'm trying to figure out how to iterate over an array that would send
a series of XMLHttp requests. I'd like to have each request finish
before the next one begins, but I believe that this is not possible to
do in a straightforward fashion, given the normally asynchronous
method of XMLHttp.

I didnt read through your code because I had to stop right here.

It is quite simple to execute synchronous http requests with
xmlhttprequest. From From http://ajaxpatterns.org/XMLHttpRequest_Call#Solution:

var xhReq = new XMLHttpRequest();
xhReq.open("GET", "sumGet.phtml?figure1=5&figure2=10", false);
xhReq.send(null);
var serverResponse = xhReq.responseText;
alert(serverResponse); // Shows "15"

The asynchronous version:

var xhReq = createXMLHttpRequest();
xhReq.open("GET", "sumGet.phtml?figure1=5&figure2=10", true);
xhReq.onreadystatechange = onSumResponse;
xhReq.send(null);
...
function onSumResponse() {
if (xhReq.readyState != 4) { return; }
var serverResponse = xhReq.responseText;
...
}

Todd W.