Synchronizing multiple AJAX calls in window.onload() event

[steve.chambers]

I'm sure this q must have been asked before but I'm really struggling
to find the answer anywhere so have finally given up and will consult
the usenet community - hopefully there's someone out there who's seen
it all before and can help me out! I have a webpage which needs to
make some function calls after the page has loaded - won't go into
details surfice to say here is a code fragment:

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload == 'function') {
window.onload = function() {
oldonload();
func();
}
} else {
window.onload = func;
}
}

addLoadEvent(myFunction1);
addLoadEvent(myFunction2);
addLoadEvent(myFunction3);
...etc...

My problem is that some of these myFunction#s include AJAX calls but
the calls depend on each other in such a way that myFunction2 will not
work unless myFunction1 has completed. So what is the "nicest" way to
make sure of this? I've considered putting a hidden element in the
HTML and then changing it at the end of each function call and have
the onchange event trigger the next function call. But this seems very
hacky and overcomplicated - surely there must be a simpler and better
way....?

Cheers for any advice / suggestions,

Steve

 

[charles]

I'm sure this q must have been asked before but I'm really struggling
to find the answer anywhere so have finally given up and will consult
the usenet community - hopefully there's someone out there who's seen
it all before and can help me out! I have a webpage which needs to
make some function calls after the page has loaded - won't go into
details surfice to say here is a code fragment:

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload == 'function') {
window.onload = function() {
oldonload();
func();
}
} else {
window.onload = func;
}
}

addLoadEvent(myFunction1);
addLoadEvent(myFunction2);
addLoadEvent(myFunction3);
...etc...

My problem is that some of these myFunction#s include AJAX calls but
the calls depend on each other in such a way that myFunction2 will not
work unless myFunction1 has completed. So what is the "nicest" way to
make sure of this? I've considered putting a hidden element in the
HTML and then changing it at the end of each function call and have
the onchange event trigger the next function call. But this seems very
hacky and overcomplicated - surely there must be a simpler and better
way....?

Cheers for any advice / suggestions,

Steve

Could you use the readyState of one AJAX request to control the next
function?

 

[steve.chambers]

Could you use the readyState of one AJAX request to control the next
function?

I don't think so, you're right in that the readyState tells me when
the AJAX call has completed but my problem is I need to know when the
resulting funcion has completed its processing (e.g. one of my
functions writes information to a database, which takes time. As
always, probably some more example code will help explain what I mean:

function function1() {
var ajax_connection = createRequest();
ajax_connection.open('get', 'getinfofromserver.php');
ajax_connection.onreadystatechange = function() {
doSomeDatabaseStuff(ajax_connection);
}
ajax_connection.send(null);
}

function doSomeDatabaseStuff(ajax_connection) {
// Only proceed if the state change is a completion
if (ajax_connection.readyState == ReadyStateEnum.COMPLETE) {
// Do some database stuff here
...
}
}

 

[charles]

I don't think so, you're right in that the readyState tells me when
the AJAX call has completed but my problem is I need to know when the
resulting funcion has completed its processing (e.g. one of my
functions writes information to a database, which takes time. As
always, probably some more example code will help explain what I mean:

function function1() {
var ajax_connection = createRequest();
ajax_connection.open('get', 'getinfofromserver.php');
ajax_connection.onreadystatechange = function() {
doSomeDatabaseStuff(ajax_connection);
}
ajax_connection.send(null);
}

function doSomeDatabaseStuff(ajax_connection) {
// Only proceed if the state change is a completion
if (ajax_connection.readyState == ReadyStateEnum.COMPLETE) {
// Do some database stuff here
...
}
}

In that case could you use the server response to control the timing?
Write the getinfofromserver.php script so that when ajax_connection is
complete, you know all the processing on the server is complete. Then
you can call doSomeDatabaseStuff safely.

Maybe I'm missing something simple, because I don't see how using a
form and onChange() would solve the problem.

 

[Skye Shaw!@#$]

//Maybe something like (untested):

var set1 = new Array({url:'bs.pl',fx:function1},
{url:'morebs.pl',fx:function2});
var set2 = new Array({url:'foo.pl',fx:function3},
{url:'bass.pl',fx:function4});
var actions = new Array(set1,set2);

for(var i in fx) {
requestChain(fx)
}


function requestChain(chain) {

var set = chain.shift();
var req = AJAXRequest();

req.onreadystatechanged = function () {
//AJAX state checks...
if( set.fx() ) {
if(chain.length > 0) new requestChain(chain);
}
};

req.open('get',set.url);
//etc....
}

 

[Skye Shaw!@#$]

//Maybe something like (untested):

var actions = new Array(set1,set2);

for(var i in fx) {
requestChain(fx)

}

oops, should be: for(var i in actions) {}

function requestChain(chain) {
if( set.fx() ) {
if(chain.length > 0) new requestChain(chain);

new isn't necessary. Sorry, was a tad sleepy