Question

我正在尝试使用AJAX请求（用于图像滑块）来获取文件夹中的所有图像。我发现this jQuery solution可以很好地工作，除了它使用jQuery。纯粹的JS等效是什么样子？（即XMLHttpRequest）

Answer 1

您可以不使用jQuery！也许需要更多代码，但这应该可以工作（改编自this post））：

    var folder = "images/";
    var ajax=new XMLHttpRequest()
    ajax.open("GET",folder,true)
    ajax.onload=function () {
        var elements=(new DOMParser()).parseFromString(ajax.responseText,"text/html").getElementsByTagname("A")
        for(x of elements){
            if(request.status[0]==2 && x.href.match(/\.(jpe?g|png|gif)$/)) { 
                let img=document.createElement("IMG")
                img.src=folder+x.href
                document.body.appendChild(img);
            } 
        };
    }
    ajax.send()

或者，您可以强制XMLHttpRequest来解析文档（来自@Rainman的comment的想法）：

ajax.responseType = "document"

因此代码变为以下内容：

    var folder = "images/";
    var ajax=new XMLHttpRequest()
    ajax.open("GET",folder,true)
    ajax.onload=function () {
        ajax.responseType="document"
        var elements=ajax.responseText.getElementsByTagname("A")
        for(x of elements){
            if(request.status[0]==2 && x.href.match(/\.(jpe?g|png|gif)$/)) { 
                let img=document.createElement("IMG")
                img.src=folder+x.href
                document.body.appendChild(img);
            } 
        };
    }
    ajax.send()

Answer 2

感谢@FZs的帮助，这就是我最终得到的结果。谢谢！

var xhr = new XMLHttpRequest();
xhr.open("GET", "/img", true);
xhr.responseType = 'document';
xhr.onload = () => {
  if (xhr.status === 200) {
    var elements = xhr.response.getElementsByTagName("a");
    for (x of elements) {
      if ( x.href.match(/\.(jpe?g|png|gif)$/) ) { 
          let img = document.createElement("img");
          img.src = x.href;
          document.body.appendChild(img);
      } 
    };
  } 
  else {
    alert('Request failed. Returned status of ' + xhr.status);
  }
}
xhr.send()

如何使用纯JS使用AJAX提取文件夹中的所有图像？

2 个答案: