Javascript 使用AJAX使用另一个文件的内容填充div

我有一个创建div的for循环。我想将外部SVG文件中的内容放入创建的每个div中。所以我使用了一个AJAX请求：

for (var i=0; i<12; i++) {
  var newTile = document.createElement('div');

  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { newTile.innerHTML = xmlhttp.responseText; }
  }
  xmlhttp.open('GET','assets/svg/1001-1001.svg',true);
  xmlhttp.send();

  document.getElementById('myDiv').appendChild(newTile);
}

---

for（var i=0；i您应该重写它以处理异步请求，或者将第三个参数更改为false以使其同步

xmlhttp.open('GET','assets/svg/1001-1001.svg',false);

异步的

for (var i=0; i<12; i++) {


  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        var newTile = document.createElement('div');
        newTile.innerHTML = xmlhttp.responseText; 
        document.getElementById('myDiv').appendChild(newTile);
    }
  };
  xmlhttp.open('GET','assets/svg/1001-1001.svg',true);
  xmlhttp.send();


}

for（var i=0；i试试这个：

    var tiles = [];
    for (var i=0; i<12; i++) {
      tile[i] = document.createElement('div');

      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
         if (xmlhttp.readyState==4 && xmlhttp.status==200) { tile[i].innerHTML = xmlhttp.responseText; }
      }
      xmlhttp.open('GET','assets/svg/1001-1001.svg',true);
      xmlhttp.send();

      document.getElementById('myDiv').appendChild(tile[i]);
}

var tiles=[]；
对于（var i=0；i我认为将所有div创建代码移到AJAX返回函数中应该可以解决这个问题

for (var i=0; i<12; i++) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {

    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
        var newTile = document.createElement('div');
        newTile.innerHTML = xmlhttp.responseText;
        document.getElementById('myDiv').appendChild(newTile); }
    }

    xmlhttp.open('GET','assets/svg/1001-1001.svg',true);
    xmlhttp.send();
}

for（var i=0；i这是因为newfile变量被过度写入而没有被重新声明。该变量属于for循环所在函数的范围。
这在javascript中是不同的

试试下面的方法

for (var i=0; i<12; i++) {
  (function (){
  var newTile = document.createElement('div');

  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) { newTile.innerHTML = xmlhttp.responseText; }
  }
  xmlhttp.open('GET','assets/svg/1001-1001.svg',true);
  xmlhttp.send();

  document.getElementById('myDiv').appendChild(newTile);
  })();
}

用于（变量i=0；i而不是：

document.getElementById('myDiv').appendChild(newTile);

尝试：

xmlhttp.onreadystatechange
何时启动？如果您尝试
var newfile=[]
使
newfile[i]=document.createElement（'div'）；
然后
newfile[i]怎么样.innerHTML=
等等。AJAX请求将异步运行，因此在请求从服务器返回之前，它不会设置innerHTML属性。这意味着在第一个值从服务器返回之前，for循环将运行所有12个值。@daniellepelley感谢这一点。您能用解决方案建议一个答案吗n请？您可以创建一个闭包，以便为每个匿名函数捕获xmlhttp。这似乎并没有将svg内容加载到每个div for meth同步方法对我来说很好，但异步方法不会在所有div中加载svg
document.getElementById('myDiv').innerHTML = xmlhttp.responseText