Question

计划很简单，javascript将ajax GET请求发送到文件'localhost / test / php / test.php？a ='。 test.php文件简单地回显了$ _GET ['a']。然后将Ajax响应用作div的innerHTML。

这个工作很漂亮，就像在firefox上一样，但是在Chrome和IE11上，它只是在循环的最后一次迭代中加载页面：

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;
?>

我需要更改哪些内容才能在IE和Chrome上运行？

Answer 1

每次循环都应该创建一个新的XHR，而不是重复使用同一个。

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;
                }
            };
        }
    }
};

请注意，我还将ajax.responseText更改为this.responseText。在回调中，ajax将是最后创建的XHR，而不是此响应引用的XHR，因为Javascript infamous Loop issue?

ajax调用在IE11和chrome中无法正常工作

1 个答案: