Javascript 如何在ajax中加载多个项目？

我试图在一个HTML页面中调用不同的外部SVG。如果我坚持一个，一切都会很完美。只要我想调用不同的SVG精灵，我就只需要加载一个。所以基本上，它只加载一个精灵而忽略其他精灵。这里的语法有什么遗漏吗

我正在使用以下ajax代码//我是个新手，所以我确信我在这里犯了一个可怕的错误：）

var ajax=new-XMLHttpRequest（）；
open（“GET”、“sprite1”、“sprite2”、“sprite3”，true）；
ajax.send（）；
ajax.onload=函数（e）{
var div=document.createElement（“div”）；
div.innerHtml=ajax.responseText；
document.body.insertBefore（div，document.body.childNodes[0]）；
}

然后在HTML中我使用这个

<svg class="sprite1">
    <use xlink:href="#icon-name">
</svg>

---

方法只能接受

XMLHttpRequest.open（）

，因此您需要为每个精灵单独请求。试着这样做：

var sprites = ["sprite1", "sprite2", "sprite3"];

sprites.foreach(function(sprite, index) {
   var ajax = new XMLHttpRequest();
   ajax.open("GET", sprite, true);
   ajax.send();
   ajax.onload = function(e) {
      var div = document.createElement("div");
      div.innerHtml = ajax.responseText;
      document.body.insertBefore(div, document.body.childNodes[0]);
   };
});

---

请注意，无法保证精灵返回的顺序，因此您可能希望将每个精灵加载到HTML中的特定元素中。在本例中，您可以使用

索引

来确定已加载的内容。

您可以在循环中执行request，以获取URL集合，然后在for循环中对其进行迭代。

var sprites = ["sprite1", "sprite2", "sprite3"];

sprites.foreach(function(sprite, index) {
   var ajax = new XMLHttpRequest();
   ajax.open("GET", sprite, true);
   ajax.send();
   ajax.onload = function(e) {
      var div = document.createElement("div");
      div.innerHtml = ajax.responseText;
      document.body.insertBefore(div, document.body.childNodes[0]);
   };
});