[CMaso]

I created a simple AJAX model of something I'm trying to do, which is loop through a list of numbers, sending an AJAX request with each iteration, and displaying the response text of each request as they complete. As though going through a bulk process, and keeping the user informed on what numbers have been processed so far.

It works fine in Firefox, but not in IE8. In IE8, instead of displaying the lines of text one at a time as each item is completed, the page continues working for several seconds, and then when it's done renders all 10 lines of text at once. (Also IE8 seems to cache the page sometimes - can I prevent that somehow?) I'm using Coldfusion, but it's easy to interpret what it's doing. Below is the code for my page, callAjax.cfm:

<script>

function ajax(url, n) {
  // native XMLHttpRequest object
  var objDiv = document.getElementById('myDiv');
  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    req.onreadystatechange = function() {ajaxDone(objDiv, n);};
    req.open("GET", url, false);
    req.send(null);
    // IE/Windows ActiveX version
  } else if (window.ActiveXObject) {
   		req = new ActiveXObject("Microsoft.XMLHTTP");
    	req.onreadystatechange = function() {ajaxDone(objDiv, n);};
    	req.open("GET", url, false);
    	req.send(null);
    }
}

function ajaxDone(objDiv, n) {
  // only if req is "loaded"
  if (req.readyState == 4) {
    // only if "OK"
    if (req.status == 200) {
      results = req.responseText;
	  //alert(req.responseText);
	  if (n == 1) {
	  	objDiv.innerHTML = '';
	  }
     objDiv.innerHTML = objDiv.innerHTML + results + '<br>';
	 if (n == 10) {
	 	objDiv.innerHTML = objDiv.innerHTML + '<br> All done.';
	 }
    } 
  }
}
</script>

<cfoutput>
<!--- the div is created. IE8 wants it to be populated with something, else the div object will be null, hence the nbsp --->
<div id="myDiv">&nbsp;</div>

<!--- then populated via 10 ajax requests--->
	<script>
	<cfloop from="1" to="10" index="n">
		ajax('ajaxPage.cfm?rnd=' + Math.random() + '&n=#n#', #n#);
	</cfloop>
	</script>
</cfoutput>

and this is the page that is called via ajax (ajaxpage.cfm)):

<!--- make it wait a little bit... --->
<cfloop index="randomindex" from="1" to="200000" step="1">
    <cfset random=rand()>
</cfloop>
<!--- then output the text --->
<cfoutput>Line #url.n# ---- random number is: #random#</cfoutput>

Notice the commented out alert in the js on callAjax.cfm. I was using it to see what the response text is at that point in the function. In IE8, the alert box always comes up blank, except for a triangle icon with a "!" inside it. Which makes no sense to me - the readyState is 4, the status is 200, so the responseText should be there. And in any case, all 10 lines are rendered correctly, so it's receiving the responseText at some point.

Is there something I have to do to my js code to make IE8 render each line one at a time, instead of waiting to render all of them all at once?