Nasa's Space Shuttle Atlantis Transiting the SunReading Email with PHP and IMAP/POP3A Simple 2D Terrain ModelCompiling and Installing Freespace 2 on Ubuntu LinuxTank Wars in G3DCreamy Swiss-style (Vegan) Chicken and Mushroom Pepper Stew
Making Multiple Simultaneous Requests with AJAX in JavaScript
Having too many of these objects at once would slow down the browser, particularly on older slower machines. 10 is a fairly safe maximum; if you're working on an intranet where you know machines are fairly powerful, you can increase this accordingly.
After this loop completes, we'll know if we have got a free slot if index is below the maximum constant. If so, we can then instantiate a XMLHttpRequest object in that slot, using the normal methods:
For this particular application, XML would be unnecessarily cumbersome (it's mainly useful for applications where interoperability is a priority), and so the endpoint simply returns its information as plain text, each item on a new line. The first line is a word which details the result of the status query - AVAILABLE, UNAVAILABLE, or TIMEOUT. The next line simply repeats the information which was passed to the page via POST: ie the server address, which we need because it will also give us the ID of the <span> we want to update.
The only other thing left to look at is handleResponse(), which is the function which will be called whenever any of our XMLHttpRequest objects change their ready state, ie move to the next stage of the HTTP request.
First, it needs to determine which object has completed, which it does by iterating through the ajaxArray checking for any slot where the ready state is 4:
After this loop completes, we'll know if we have got a free slot if index is below the maximum constant. If so, we can then instantiate a XMLHttpRequest object in that slot, using the normal methods:
if (index < <?= MAX_SIMULTANEOUS_AJAX_REQUESTS; ?>) {
// We got one
try {
ajaxArray[index] = new XMLHttpRequest();
}
catch(e) {
try {
ajaxArray[index] = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e2) {
try {
ajaxArray[index] = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
// no AJAX support
}
}
}
Now, if we have managed to instantiate one successfully, we can prepare and initiate the request: if (ajaxArray[index]) {
params = "addr="+serverAddress;
ajaxArray[index].open('POST', 'server_check_ajax.php', true);
ajaxArray[index].onreadystatechange = handleResponse;
ajaxArray[index].setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
ajaxArray[index].setRequestHeader('Content-Length', params.length);
ajaxArray[index].send(params);
}
}
}
That's the end of the statusCheck() function. The status_check_ajax.php page which the AJAX objects all call is a simple page created as an AJAX endpoint specifically for this purpose. It gets the HTTP POST parameters we send over via the AJAX objects, and queries the server for a status report. In this case, we're only considering a simple online or offline response, but there's no limit to the sorts of data you can have your AJAX objects fetch. For this particular application, XML would be unnecessarily cumbersome (it's mainly useful for applications where interoperability is a priority), and so the endpoint simply returns its information as plain text, each item on a new line. The first line is a word which details the result of the status query - AVAILABLE, UNAVAILABLE, or TIMEOUT. The next line simply repeats the information which was passed to the page via POST: ie the server address, which we need because it will also give us the ID of the <span> we want to update.
The only other thing left to look at is handleResponse(), which is the function which will be called whenever any of our XMLHttpRequest objects change their ready state, ie move to the next stage of the HTTP request.
First, it needs to determine which object has completed, which it does by iterating through the ajaxArray checking for any slot where the ready state is 4:
function handleResponse() {
for (var index = 0; index < ajaxArray.length; index++) {
if (ajaxArray[index] && ajaxArray[index].readyState == 4) {
If the request was successful (ie it returned HTTP code 200), we can parse the response text. Because our endpoint adds each data item on its own line, this is simply achieved by splitting the response text on newline characters:
As mentioned, the first line of the response (now the first element of the bits array) determines the availability of the requested server, and the second is the server address, which we are now able to use in order to get the <span>'s ID. To reflect the current status, we can change the contents of the relevant <span>, or in this case change its appearance with CSS: switch (bits[0]) {
case 'AVAILABLE':
element = document.getElementById('check_'+bits[1]);
element.innerHTML = '<a href="server_admin.php?server='+bits[1]+'" style="color:green" title="Server Admin">'+element.innerHTML+'</a>';
break;
case 'UNAVAILABLE':
document.getElementById('check_'+bits[1]).style.color = 'red';
document.getElementById('check_'+bits[1]).title = 'Unavailable';
break;
case 'TIMEOUT':
document.getElementById('check_'+bits[1]).style.color = 'purple';
break;
}
That's pretty much all we need to do in this function.