Hey guys,

I've been having some trouble in a small little script I'm making. What it does is generate IPs, then query those IPs and return the result. Basically, it returns all the webservers found on your LAN.

However, I've added a 'SCAN COMPLETED' string at the end of the scan. The problem is though, although the IPs are generated with a loop, so they're perfectly in order, AJAX doesn't return the results in order. So my results end up looking like this (limited to 5 IPs):


*click for a bigger image*

As you can see, the IPs queried are not in order; going from 0,1,2,3,5 (complete),4. The 4 shows up after the scan says it's complete, and even though it is, the display isn't correct.

The script works fine, but the output for the user is messed up. I've looked into the matter, and I've found that it's the Asynchronous-ness of AJAX that's returning the results weirdly. Whatever returns first is returned first, if that makes sense.

I've tried setting the async="false" attribute (new in HTML5), but that doesn't nothing for me. I'd really appreciate if somebody could quickly look at my code and tell me what's wrong with it. It's probably something stupid anyway.

<?php

$ips='192.168.0.';
$limit=5;

if(isset($_GET['ip'])){
	$scan='http://'.$ips.$_GET['ip'];
	$s=@file_get_contents($scan);
	echo "trying <a href=\"$scan\">$scan</a>...";
	if($s!=null){echo " complete!";}
	else{echo " failed";}
	echo '<br/>';
	if($_GET['ip']==$limit){echo "SCAN COMPLETED";}
	exit;
}

?>
<script type="text/javascript">
function loadscan(scanip){
var xmlhttp;
if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
xmlhttp.onreadystatechange=function(){
  if(xmlhttp.readyState==4&&xmlhttp.status==200){
    document.getElementById("return").innerHTML=document.getElementById("return").innerHTML+xmlhttp.responseText;
  }
}
xmlhttp.open("GET","scanner.php?ip="+scanip,true);
xmlhttp.send();
}

function incel(){
	document.getElementById("el").innerHTML=parseInt(document.getElementById("el").innerHTML)+1;
}

function go(a){
	var complete=false;
	if(complete==false){
		setInterval("incel()",1000);
	}
	var i;
	for(i=0;i<=a;i++){
		loadscan(i);
	}
}

</script>
<button onclick="go(<?php echo $limit;?>);this.style.display='none';document.getElementById('ela2').style.display='block';">Scan</button><span id="ela2">Time Elapsed: <span id="el">0</span></span>
<div id="return"></div>

*Useless stuff removed*

You might notice that I am opening a new AJAX request each call. It's tedious, but it's one of the many attempts I've made to fix this small glitch that would otherwise make a perfectly working script.

Thanks!!

-PG

Reuse the request object that should stop the buffering

http://ajaxian.com/archives/reusing-...-without-abort

Thanks, Chris! It works perfectly

Here's my current code, if anybody's interested:

//synchronous (SJAX) call!
function loadscan(scanip){
var xmlhttp;
if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}
else{xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
  if(xmlhttp){
     xmlhttp.open("GET","<?php echo basename($_SERVER['SCRIPT_NAME']);?>?ip="+scanip,false);                             
     xmlhttp.send(null);
     document.getElementById("return").innerHTML=xmlhttp.responseText+document.getElementById("return").innerHTML;
  }
  else{return false;}  
}

Of course, in the receiving PHP script, I have a 0.5 sec timeout (the response I'm querying is very, very fast) so nothing hangs forever.