I have been tinkering with AJAX as of late and have come across a frustrating issue.

My goal is to returns list of users details built up in PHP and echo'ed back to my javascript. Initially i built up my return xml as follows:

$xml = '<?xml version="1.0" encoding="ISO-8859-1"?><root>';

	$sql = "select username, total_points, team_name from winter_dream_team_entries order by total_points desc";
		
	$message_query = db_query($sql);
	
	$i=1;

	//Loop through each message and create an XML message node for each.
	
	while($message_array = db_fetch_array($message_query)) {
		
		$xml .= "<entry>";
		$xml .= '<user>' . htmlspecialchars($message_array['username']) . '</user>';
		$xml .= '<team>' . htmlspecialchars($message_array['team_name']) . '</team>';
		$xml .= '<points>' . $message_array['total_points'] . '</points>';
		$xml .= '</entry>';
		$i++;
	}

$xml .= '</root>';
echo $xml;

And I catch this in my javascript as

function handleReceive() {
 	
 	var div = document.getElementById('div_output');

 	if(receiveReq.readyState < 4){
 		div.innerHTML = '<tr><td>Loading...</td></tr>';
 	}

 	else if (receiveReq.readyState > 2) {
 		div.innerHTML = '<tr><td>Loaded</td></tr>';
 		var xmldoc = receiveReq.responseText;

 		var message_nodes = receiveReq.responseXML.getElementsByTagName("entry");
 		var n_messages = message_nodes.length

 		chat_div.innerHTML = "<tr><th>User</th><th>Team Name</th><th>Points</th></tr>";

		for (i = 0; i < n_messages; i++) {
 			var user_node = message_nodes[i].getElementsByTagName("user");
 			var team_node = message_nodes[i].getElementsByTagName("team");
 			var points_node = message_nodes[i].getElementsByTagName("points");
 			div.innerHTML += "<tr><td>" + user_node[0].firstChild.nodeValue + '</td><td>' + team_node[0].firstChild.nodeValue + '</td><td>' + points_node[0].firstChild.nodeValue + '</td></tr>';

 		}
 	}
 }

Which is fine BUT it takes an age to return which to my understanding is not what AJAX is about. Especially when just calling a php script to return the data fetches it in a fraction of the time.

Now I swapped responseXML for responseText and found some amazing results.

while($message_array = db_fetch_array($message_query)) {
	echo "<tr><td>".$message_array['username']."</td><td>".$message_array['team_name']."</td><td>". $message_array['total_points']."</td></tr>";
		
}

Which simply takes each row and echo's it back. which I can then catch easily with

div.innerHTML = "<tr><th>User</th><th>Team Name</th><th>Points</th></tr>";
div.innerHTML += receiveReq.responseText;

Which uses responseText.

It takes a second perhaps two using responseText which is pretty fast considering responseXML is taking ten seconds plus.

The problem with this is that my response requires to be pre-formatted upon response so that I can display it with some clarity. responseXML allows me to use javascript to build up a list of details but as mentioned this method takes an age to perform.

If that has to be the case then is their any method of dispalying the data as it comes instead of waiting for all of it to be delivered before output?

Thanks,
Ibbo

Instead of returning pre-formatted HTML or XML, how about returning JSON?

That way, you can work with real Javascript objects instead of parsing incoming XML or being tied down with pre-formatted HTML.

Nice one Chroder, I bookmarked that.