Multiple Ajax Requests

[zabmilenko]

OK! I need some help with some Javascript logic here.

I have five "databoxes" that each hold different information. The user can have only one or two open at a time (enforced server side). Since they can open them on the client side, I won't know which two are open right away. This part is ok though.

Every 3 seconds, an ajax request is made for each open databox. The problem I am having is that only one request can be running at a time in my implementation. As soon as I make the second request (since it occurs while the first is processing) the whole thing craps out on me.

I tried solving it using tricks outlined in the 2nd and 4th code boxes below. It works in my head, but not in the page.

The code works perfectly with one box open (any of them).

HERE IS WHAT HAPPENS:

Box 1 and 2 are open

After three seconds, Box 2 takes on the data intended for Box 1

After a half second longer, Box 1 takes on the data intended for Box 2

They refresh correctly in each others' positions (with no more swapping).

Now, while the page is loading, each box calls the script:

var databoxes = Array;
var curbox = '';

function databox_status(databox, dbs)
{
	if (dbs == 1)
	{
		databoxes[databox] = 1;
	}
	else
	{
		databoxes[databox] = 0;
	}
}

The above block works fine. :-)

function databox_update()
{
	if (curbox == '') { /* do nothing */ } else 
	{
		// we are already loading a box, so come back later
		setTimeout('databox_update()', 500);
	}


for (var theName in databoxes)
{
	if (databoxes[theName] == 1)
	{
		curbox = theName;
		fetch_xml_data('databox_' + theName, '', document.getElementById('databox_' + theName));
		setTimeout('databox_update()', 500);
		return;
		// Leave on the first databox that equals 1
	}
}


// If we got here, all the databoxes have been loaded (right?)
for (var theName in databoxes)
{
	if (databoxes[theName] == 2)
	{
		databoxes[theName] = 1;
	}
}


setTimeout('databox_update()', 3000);
}

The above block loops through each databox and makes a request using fetch_xml_data (in the next block). If the box value is 1 (need a request) one is made and the function is exited. Subsequent calls to the function will leave until curbox has been reset to blank (in block 4 below).

function fetch_xml_data(data_word, param_string, targetdiv)
{	
	xmlhttp.onreadystatechange = process_xml_data(targetdiv);

xmlhttp.open('GET', 'index.php?frame=xml&src=' + data_word, true);

xmlhttp.setRequestHeader('frame','xml');
xmlhttp.setRequestHeader('data',data_word);
xmlhttp.setRequestHeader('param',param_string);

xmlhttp.send(null);
}

The above block works ok.

function process_xml_data(targetdiv)
{
	if (xmlhttp.readyState == 4)
	{
		if (xmlhttp.status == 200)
		{
			targetdiv.innerHTML = xmlhttp.responseText;
		}
		else
		{
			alert('Problem retrieving data: ' + xmlhttp.statusText);
		}
	}

if (curbox == '') { /* do nothing */ } else
{
	databoxes[curbox] = 2;
	// Set to 2 so it won't rerun this box in databox_update();

	curbox = '';
	// blank out curbox so databox_update() will run again.
}

}

The above block populates the div. If curbox is non-empty, it will empty it and set the databox value to 2 in order to keep it from running again in the loop until all the databoxes are done.

My first thought was a timing issue, but with two boxes open the maximum delay is 2 seconds (1 second lag added to estimate). This is fine on the three-second time limit.

Anyways, I hope I gave enough information. Since I may decide to add several more "databoxes" later on, an array of objects does not seem to be an ideal method of handling this.

Thanks in advance.