javascript - API重复请求相同的信息

Question

代码: var j = 0;

  function loadDesigns(j){
  // Create XHR Object [dont forget to add 'new']
  var xhr = new XMLHttpRequest();
  xhr.open("GET", 'http://www.pat-cooney.com/gd.json', true);

  xhr.onload = function(){
    if (this.status == 200) {
      var designs = JSON.parse(this.responseText);
      var contentOutput = "";
      var contentImages = "";
      var galleryNavOutput = "";

      function addImageNav() {
        for (i = 0; i < 3; i++) {
          galleryNavOutput += '<img id="' + designs[i].classId + '"src="' + designs[i].thumbnail + '">'
        }
      };

      function addContentImages() {
          contentImages += '<img src="' + designs[j].images[0] + '">';
      };

      contentOutput +=
      '<div class="block2">' +
          '<div id="inner">'+
              addContentImages() +
          '</div>' +
      '</div>' +
      '<div class="row">' +
          '<div id="center">' +
              addImageNav() +
          '</div>' +
      '</div>';

      document.getElementById("content").innerHTML = contentOutput;
      document.getElementById("inner").innerHTML = contentImages;
      document.getElementById("center").innerHTML = galleryNavOutput;
    }
  }
  xhr.send();
}
loadDesigns(j);

//.3 sec delay to allow AJAX delivery
setTimeout(function() {
  document.getElementById("one").addEventListener("click", function(){
    setTimeout(function() {loadDesigns(0);},300);
  });
  document.getElementById("two").addEventListener("click", function(){
    setTimeout(function() {loadDesigns(1);},300);
  });
  document.getElementById("three").addEventListener("click", function(){
    setTimeout(function() {loadDesigns(2);},300);
  });
}, 300);

这是一个代码笔，其中包含正在使用的代码:https://codepen.io/Pcooney13/pen/wpXyvX请注意，由于有关 API 的 codepen 规则，它不会加载图像，因此这里是半工作代码:http://www.pat-cooney.com/example.html

在/example.html 中，我可以单击底部 3 个图像中的任何一个，它会更新顶部图像。我的问题是它只能运行一次，然后我必须刷新页面。

我多次对同一个小源使用相同的 xhr 请求，这很糟糕吗？我可以将此信息存储在第一个请求中，然后继续使用它，而不必在每次用户单击时调用它吗？ 2.使用底部图像的 ids 可能会干扰每个请求？

我正在使用 vanilla JS，任何帮助将不胜感激，并对弗兰肯斯坦采购表示歉意

Answer 1

这里的问题是这样的:您将点击处理程序附加到某些元素。然后，当您单击该元素时，您会将其从页面中删除，并添加具有相同 id 的另一个元素。这些具有相同 id 的新元素不再具有点击处理程序。更好的方法是将点击处理程序放在 body 上，然后查看被点击的元素的 id。如果它是您想要的元素之一，那么您将执行 ajax 调用。

这样做的原因是因为正文永远不会被删除并重新添加到页面中。另一种解决方案是将事件处理程序添加回新创建的元素上。

稍微重组你的代码(简化一些事情，尽管这可以进一步简化)并构建一个可行的解决方案将为你提供:

function loadDesigns(j){
  // Create XHR Object [dont forget to add 'new']
  var xhr = new XMLHttpRequest();
  xhr.open("GET", 'http://www.pat-cooney.com/gd.json', true);

  xhr.onload = function(){
  if (this.status == 200) {
      var designs = JSON.parse(this.responseText);

      function addImageNav() {
          var galleryNavOutput = "";
          for (i = 0; i < 3; i++) {
              galleryNavOutput += '<img id="' + designs[i].classId + '"src="' + designs[i].thumbnail + '">'
          }
          return galleryNavOutput;
      }

      function addContentImages() {
          return '<img src="' + designs[j].images[0] + '">';
      }

      contentOutput =
      '<div class="block2">' +
          '<div id="inner">'+
              addContentImages() +
          '</div>' +
      '</div>' +
      '<div class="row">' +
          '<div id="center">' +
              addImageNav() +
          '</div>' +
      '</div>';

      document.getElementById("content").innerHTML = contentOutput;
    }
  }
  xhr.send();
}
loadDesigns(0);

document.body.addEventListener('click', function(e) {
  switch (e.target.id) {
    case 'one':
      loadDesigns(0);
      break;
    case 'two':
      loadDesigns(1);
      break;
    case 'three':
      loadDesigns(2);
      break;
    default:
       return;
  }
});

我还应该注意到，这种连接字符串来构建 DOM 的模式是危险的，更好的方法是单独创建元素 (document.createElement) 并使用 getter 和 setter 添加属性。当您连接字符串来构建 DOM(特别是您无法控制的字符串 - 即用户输入)时，您将自己打开到 XSS攻击者可以在您的页面上运行他们自己的 JS。