如何使用AJAX获取Web服务端指定目录的文件与文件夹列表

你当前遇到的问题根因有两点：

1. AJAX代码的回调逻辑存在错误，没有等待请求完成就读取返回内容，所以拿到空字符串
2. 直接向目录路径发起GET请求，默认返回的是服务器生成的目录浏览HTML页面（如果开启了目录索引功能），如果没有开启该功能，服务器会返回空内容或者403错误，无法直接拿到结构化的文件列表。

首先修正你现有代码的回调逻辑错误：你写的httpRequest.onreadystatechange = console.log(httpRequest)是错误写法，这里直接执行了console.log并把返回值（undefined）赋值给了回调函数，不会在请求状态变化时触发。修正后的XHR代码如下：

function getDirContent() {
    const httpRequest = new XMLHttpRequest();
    if (!httpRequest) {
        alert("Giving up :( Cannot create an XMLHTTP instance");
        return false;
    }
    httpRequest.onreadystatechange = function() {
        // 只有请求完成且状态码为200时才处理返回
        if (httpRequest.readyState === XMLHttpRequest.DONE) {
            if (httpRequest.status === 200) {
                console.log(httpRequest.responseText);
            } else {
                console.error('请求错误，状态码：', httpRequest.status);
            }
        }
    };
    httpRequest.open('GET', '/testing/');
    httpRequest.send();
}

运行上述代码即可正常拿到服务器返回的目录页面内容。

以下是两种可直接落地的实现方案： #

方案1：解析目录索引HTML（快速测试用） #

如果你的本地服务器已经开启了目录浏览功能（比如用python -m http.server启动的本地服务默认开启），可以直接解析返回的HTML提取文件列表，示例用更简洁的fetch实现：

async function glob(pattern = '/testing/') {
    const res = await fetch(pattern);
    const htmlText = await res.text();
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlText, 'text/html');
    // 提取所有链接，过滤掉上级目录等非目标链接
    const fileList = Array.from(doc.querySelectorAll('a'))
        .map(a => a.getAttribute('href'))
        .filter(href => !href.startsWith('/') && !href.startsWith('?') && href !== '../');
    console.log(fileList);
    return fileList;
}
// 调用即可拿到和Python glob一致的结果
glob();

方案2：后端接口返回结构化数据（生产/通用场景） #

第一种方案依赖服务器的目录索引页面样式，不同服务器返回的HTML结构不一样，稳定性差。更可靠的方式是在后端加一个专用接口，直接返回JSON格式的文件列表。
举个极简的Python Flask后端接口示例：

from flask import Flask, jsonify
import glob

app = Flask(__name__)

@app.route('/api/glob')
def get_glob():
    # 这里可以按需求传入匹配规则，默认取testing目录下所有内容
    return jsonify(glob.glob('./testing/*'))

if __name__ == '__main__':
    app.run(debug=True)

前端直接请求这个接口即可拿到现成的数组，不需要额外解析：

async function glob() {
    const res = await fetch('/api/glob');
    const fileList = await res.json();
    console.log(fileList);
    return fileList;
}

内容的提问来源于stack exchange，提问作者Person Meetup