IE8 won't render ajax responses 1 at a timr - Page 2

AndrewGSW · 12-15-2012, 12:22 PM

Waiting until all responses have been received:

Code:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
<style type="text/css">
    #theDiv {
        width: 500px; height: 50px;
        outline: 1px solid gray;
    }
</style>
<script type="text/javascript">
    
function fncTrim(str) {
	return str.replace(/^\s+|\s+$/g,'');
}

for (var i=0; i < 10; i++) {
    var counter = 1, vals = [];
    (function (req) {
        var thisone = i, complete = false;
        req.onreadystatechange = function () {
            if (req.readyState == 4 && req.status == 200) {
                var results = " " + (thisone+1) + ": " + fncTrim(req.responseText);
                vals.push(results);
                complete = (++counter == 10);
                if (complete) {
                    updating = setInterval(function () {
                        var theDiv = theDiv || document.getElementById('theDiv');
                        // or use table cells and their ids
                        if (vals.length > 0) {
                            theDiv.innerHTML = theDiv.innerHTML + vals.shift();
                        } else {
                            clearInterval(updating);
                        }
                    }, 500);
                }
            }
        };
        req.open("GET", 'createRandomNumber.php?rnd=' + Math.random(), true);
        req.send(null);
    }) (new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP"));
}

</script>
</head>
<body>
<h1>10 Asynchronous Ajax Requests</h1>
<p>Here come the 10 random numbers..</p>
<div id="theDiv">Wait..<br></div>

</body>
</html>

AndrewGSW · 12-15-2012, 04:40 PM

We could even trigger the (set)intervals before all the data has been retrieved:

Code:

complete = (++counter == 5);

..but we would need to ensure data is available (has been returned) before attempting to insert it in the DOM.

However, my code as written will just stop inserting if it runs out of retrieved values.

CMaso · 12-15-2012, 06:23 PM

Very nice! One interesting thing - I don't know if PHP does this, but Coldfusion generates random numbers based on a system timer, so any simultaneous requests will get the same random number. From the screen output, you can see how many requests are hitting the page at the same time:

Wait..
1: The random number is 0.361913578305
2: The random number is 0.361913578305
3: The random number is 0.363346901562
6: The random number is 0.363346901562
5: The random number is 0.363346901562
4: The random number is 0.363346901562
7: The random number is 0.640690712302
8: The random number is 0.640690712302
9: The random number is 0.636390802138
10: The random number is 0.636390802138

Of course, you could do the same thing just by returning the value of that system timer, which in CF is gotten by the getTickCount() function.

AndrewGSW · 12-15-2012, 06:40 PM

If you use RandRange you can specify which algorithm to use. Or use rand() with randomize() to seed the random number generator.

Quote:

RandRange(number1, number2[, algorithm])

History
ColdFusion MX 7: Added the algorithm parameter.

See also
Rand, Randomize

Parameters
number1, number2
Integer numbers. If the numbers are not in the range -2,147,483,648 - 2,147,483,647, ColdFusion generates an error.

algorithm
(Optional) The algorithm to use to generated the random number. ColdFusion installs a cryptography library with the following algorithms:

CFMX_COMPAT: the algorithm used in ColdFusion (default).
SHA1PRNG: generates a number using the Sun Java SHA1PRNG algorithm. This algorithm provides greater randomness than the default algorithm
IBMSecureRandom: for IBM WebSphere (IBM JVM does not support the SHA1PRNG algorithm.)

Presumably the querystring-parameter you are passing to the other page, which is not currently used, can be used as the seed.