如何在 ajax 中加載多個項目？

Question

我試圖在單個 HTML 頁面中調用不同的外部 SVG 。 如果我堅持一個，一切都會完美無缺。 一旦我想調用不同的 SVG 精靈，我最終只加載了一個。 所以基本上，它只加載一個精靈而忽略其他精靈。 我在這里的語法中遺漏了什么嗎？

我正在使用以下 ajax 代碼 //我是新手，所以我確定我在這里犯了一個可怕的錯誤:)

<script>
var ajax = new XMLHttpRequest();
ajax.open("GET", "sprite1", "sprite2", "sprite3", true);
ajax.send();
ajax.onload = function(e) {
var div = document.createElement("div");
div.innerHtml = ajax.responseText;
document.body.insertBefore(div, document.body.childNodes[0]);
}
</script>

然后在 HTML 我正在使用這個

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

Answer 1

XMLHttpRequest.open()方法只能接受一個 URL ，因此您需要為每個精靈單獨請求。 試試這樣：

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 中的特定元素。 您可以使用示例中的index來確定已加載的內容。