AJAX updating multiple div's

[pcw]

What's the easiest way to update multiple div's with AJAX?

Right now I'm using the following code to update one div, but right after I've updated that div I would need to update another div that is dependent on the first div that is updated.

function ajax(var) {
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser doesn't support AJAX.");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	var divId="var-" + var;
	ajaxRequest.onreadystatechange = function(){
		if(ajaxRequest.readyState == 4){
			var ajaxDisplay = document.getElementById(divId);
			ajaxDisplay.innerHTML = ajaxDisplay.innerHTML + ajaxRequest.responseText;
		}
	}
	
	var queryString = "?foo=" + var;
	ajaxRequest.open("GET", "ajax-functions.php" + queryString, true);
	ajaxRequest.send(null); 
}

[pcw]

Nobody?

[jimfraser]

Well there are a few ways to do that, here are a couple of options:

- Have your PHP page return XML or JSON that contains data for each div you want to change, and update each one in the onreadystatechange handler.

or

- From the onreadystatechange handler, call another ajax request for the next div once the first has completed.

I'd think that the best way is to let PHP handle the determination of what content to display and use simpler javascript to just get the data.