First, I want to let everyone know I've decided to get medieval on this problem and I've posted a job for it in Elance, so if anyone knows Coldfusion and Ajax and feels like making a little cash, the job's titled "Ajax + Coldfusion Problem - IE8 Delays Rendering Response Text".
Second, I've figured out I pretty much have to do this synchronously, so the main problem is that I need IE to do what FF is doing: a line for each request appears on the screen as soon as the response text is received.
I've posted the exact code I'm using below, because I've taken one of the recent examples and modified things just a bit. The called page no longer returns a random number; instead, I'm doing something closer to what I want to accomplish, which is pass an "ID" to the page via ajax, and have the page feed that ID to a function. In this case, the "function" simply adds 42 to it.
Synchronous vs. Asynchronous:
async: Both IE and FF render groups of lines, sporadically. That would be okay if the order in which the IDs are processed didn't matter. The user would still get to watch the progress, instead of staring at a blank screen until the whole batch is complete. It would also shorten the time it takes to do the whole batch, assuming the Coldfusion server could handle processing several IDs at a time; the real-life function I want to use is a good bit more involved. But in this case, the IDs will most likely need to be processed in a sequential order (and if not, I'm sure that a project with that requirement will eventually come up, so best to figure out the solution now).
sync: If sync, FF will immediately render a line for each ID as soon as it's been processed and the response text is received, which is the behavior I want. But again, IE instead waits until all requests have been processed, and only then renders all the lines, at once. So the user is left staring at a blank screen until all the IDs have been processed, and that's exactly what I don't want.
CallAjax6.cfm:
Code:
<script>
function fncTrim(str) {
str = str.replace(/^\s+|\s+$/g,'');
return str;
}
</script>
<div id="theDiv">Now Processing IDs...<br><br></div>
<cfloop from="1" to="10" index="i">
<script>
(function (req) {
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
var results = fncTrim(req.responseText);
var theDiv = document.getElementById('theDiv');
theDiv.innerHTML = theDiv.innerHTML + results;
}
};
req.open("GET", 'processID.cfm?id=<cfoutput>#i#</cfoutput>', true);
req.send(null);
}) (new XMLHttpRequest());
</script>
</cfloop>
ProcessID.cfm:
Code:
<cfsetting enablecfoutputonly="yes">
<cfheader name="expires" value="-1">
<cfheader name="pragma" value="no-cache">
<cfheader name="cache-control" value="no-cache, no-store, must-revalidate">
<cfparam name="url.id" default="0">
<!--- not sure if these cfheaders are necessary --->
<cfscript>
sleep(2000);//delay by 2 seconds to simulate a longer-running process.
processID = url.id + 42;
</cfscript>
<cfoutput>ID #url.id# has been processed. The returned value is #processID#<br></cfoutput>