ajax call not working propely in IE11 and chrome

Question

The plan is simple, javascript sends ajax GET request to file 'localhost/test/php/test.php?a=' . The test.php file simply echos the $_GET['a'] back. Ajax response is then used as some div's innerHTML.

This workfs beautifully and as expected on firefox, but on Chrome and IE11 it just loads the page on the last iteration of the loop:

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
        <meta charset="UTF-8"> 
        <link rel="stylesheet" href="css/style.css" />
    </head>
    <body>
        Text will appear here:
        <div></div>
        <script src="js/script.js"></script>
    </body>
</html>

Javascript

window.onload = function () {
    test.init();
};

var test = {
    init: function () {
        var ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        for ( var a = 0 ; a < 100 ; a++) {
            ajax.open('GET','php/test.php?a='+a,false);
            ajax.send();
            ajax.onreadystatechange = function () {
                if (this.status == 200 && this.readyState == 4) {
                    var div = document.getElementsByTagName('div');
                    div[0].innerHTML = ajax.responseText;
                }
            };
        }
    }
};

PHP

<?php
$a = $_GET['a'];

echo $a;
?>

What do i need to change to make this work on IE and Chrome as well?

I don't think you can use the same `XMLHttpRequest` object for multiple outstanding requests. You need to make a new XHR each time through the loop. — Barmar, Feb 07 '15 at 01:19
just put the the ajax var inside the loop but still no deal, in fact, now it doesn't even display the ajax response. @LG_PDX for some reason i just don't like jQuery :) — brunobliss, Feb 07 '15 at 01:22

score 1 · Answer 1 · edited May 23 '17 at 11:57

You should create a new XHR each time through the loop, not reuse the same one.

var test = {
    init: function () {

        for ( var a = 0 ; a < 100 ; a++) {
            var ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            ajax.open('GET','php/test.php?a='+a,false);
            ajax.send();
            ajax.onreadystatechange = function () {
                if (this.status == 200 && this.readyState == 4) {
                    var div = document.getElementsByTagName('div');
                    div[0].innerHTML = this.responseText;
                }
            };
        }
    }
};

Note that I also changed ajax.responseText to this.responseText. In the callback, ajax will be the last XHR created, not the one that this response refers to, because of the Javascript infamous Loop issue?

alright! That did the trick for CHROME (IE11 is still broken ... *sigh*) But i also removed the false in the ajax call. I thought i'd have to wait for the request to finish to see the numbers changing, it just so happens that this totally went the other way :D — brunobliss, Feb 07 '15 at 01:28

ajax call not working propely in IE11 and chrome

1 Answers1