I've got this sussed now
, based on a MultiAjax object and this code fragment:
Code:
var thisRun = new MultiAjax({
Page: 'createRandomNumber.php?rnd=',
StartAfter: 5,
Limit: 10,
Delays: 500,
Success: insertData
// Failure: insertData
});
thisRun.Go();
Limit is the total number of ajax requests, StartAfter the responses to await before starting to update the DOM (defaults to half of Limit), Delays the number of millisecs to pause between DOM updates.
Success is the callback to execute to update the DOM, receiving an index number (the requests' index) and the value returned. Failure is an alternative callback to handle failed requests (defaulting to the Success function).
A random number is appended to the request-page so that the same value is not returned each time.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
#theTable { outline: 1px solid gray; }
#theTable td {
width: 50px; height: 50px;
}
</style>
</head>
<body>
<h1>10 Asynchronous Ajax Requests</h1>
<p>Here come the 10 random numbers..</p>
<div id="theDiv">Wait..</div>
<table id="theTable">
<tr><td> </td><td> </td><td> </td><td> </td><td> </td>
<td> </td><td> </td><td> </td><td> </td><td> </td></tr>
</table>
<script type="text/javascript">
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g,'');
};
var insertData = function (index, value) {
insertData.tbl = insertData.tbl || document.getElementById('theTable');
insertData.tbl.rows[0].cells[index].firstChild.data = value;
}
var MultiAjax = function MultiAjax(obj) {
this.Page = obj.Page;
this.Limit = obj.Limit || 10;
this.StartAfter = obj.StartAfter || Math.floor(this.Limit % 2);
this.Success = obj.Success;
this.Failure = obj.Failure || this.Success;
this.Delays = obj.Delays || 500;
this.Results = [];
}
// instance methods
MultiAjax.prototype = {
Go: function () {
var i = 0, that = this;
while (i < this.Limit) {
(function (req) {
var thisOne = i++;
req.onreadystatechange = function () {
if (req.readyState == 4) {
if (req.status == 200) {
that.Results.push(thisOne, (req.responseText).trim() * 1);
if (thisOne == that.StartAfter) {
// start displaying in the table
updating = setInterval(function () {
if (that.Results.length > 0) {
that.Success(that.Results.shift(), that.Results.shift());
} else if (thisOne > that.Limit) {
clearInterval(updating);
}
}, that.Delays);
}
} else {
that.Failure(thisOne, "Err!" + req.status);
}
}
};
if (thisOne % 4) {
req.open("GET", that.Page + Math.random(), true);
} else {
req.open("GET", 'DoesNotExist.php?rnd=' + Math.random(), true);
}
req.send(null);
}) (new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP"));
}
}
};
var thisRun = new MultiAjax({
Page: 'createRandomNumber.php?rnd=',
StartAfter: 5,
Limit: 10,
Delays: 500,
Success: insertData
// Failure: insertData
});
thisRun.Go();
</script>
</body>
</html>
The only addition would be to allow Page to be an array of pages, but this is straight-forward to incorporate. Job done! Andy.