计划很简单，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上运行？
每次循环时都应该创建一个新的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臭名昭著的循环问题？