Question

设定：

父目录中本地计算机上的

html文件

子目录中的js文件

sub dir＆＃34; Fotos＆＃34;

中的图像文件

在js文件中执行以下代码：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (true/*this.readyState == 4 && this.status == 200*/) {
        alert(this.responseText);
    }
};
xhttp.open("GET", "/Fotos", true);
xhttp.send();

这会导致两个警告弹出完全为空的消息框。我尝试使用目录路径，但没有任何改变，即使只是＆＃34; /＆＃34;。如果我删除了true并将其替换为/ *中的行，则根本不会生成消息框。

我希望从中获得某种形式的可解析图像文件列表。

我知道之前已经用jQuery解决了这个问题，但我想在没有这个的情况下解决这个问题，因为它应该足够简单。那么，为什么不呢？

Answer 1

如果/ Fotos文件夹不存在（或没有正确的权限），则会失败。

此外，要使XMLHttpRequest正常工作，它需要Web页面由Web服务器提供服务。必须使用http或https协议访问它（即使在localhost中）。例如。 http：//localhost/myfolder/pagewithcode.html然后，Fotos文件夹必须是＆＃34; myfolder＆＃34;的子文件夹。如果路由是http：//localhost/pagewithcode.html（并且Fotos是pagewithcode.html所在的子文件夹），代码也可以工作。

下面的代码（稍微修改一下）获取当前文件夹的内容（其中存储了包含JavaScript代码的html页面）。

请注意，responseText是HTML，包含所有标记，而不仅仅是文件列表，因此可以在浏览器中显示。

<html>
  <body>
  <script>
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        // enter here only when success
        console.log(this.readyState);
        console.log(this.responseText);
      }
      else {
        // enter here for all state changes except success
        console.log(this.readyState);
        console.log(this.responseText);
      }
    };
    xhttp.open("GET", ".", true);
    xhttp.send();
  </script>
  </body>
</html>

如果Fotos是html页面所在的子文件夹，那么您最好删除最初的＆＃39; /＆＃39;路径（否则，您将在服务器的 root 文件夹中获取Fotos文件夹）：

xhttp.open("GET", "Fotos", true);

使用Ajax WITOUT jquery读取文件夹的内容

1 个答案: