如何将XMLHttpRequest请求结果存入变量并展示在HTML body中

问题核心原因 #

1. 执行顺序问题：XMLHttpRequest是异步请求，页面加载时body内的script会先执行，此时请求还没返回，result根本没有值。你代码里最后一行console先打印就是最直观的证明，异步逻辑永远会晚于同步代码执行。
2. 作用域问题：回调函数里的result是函数内部的局部参数，外部作用域根本访问不到，你直接在body的script里调用肯定报错。

修改方案 #

第一步：调整HTML结构

不用内嵌script写document.write，给要展示内容的位置加一个带唯一id的标签作为容器：

<body>
    <h1>文件内容为：
        <span id="fileContent"></span>
    </h1>
</body>

第二步：调整JS逻辑

拿到请求结果之后直接把内容插入到上面的容器里即可：

const url = 'https://12Me21.github.io/test.txt';

function asynchronousCall(callback) {
    const request = new XMLHttpRequest();
    request.open('GET', url);
    request.send();
    request.onload = function() {
        // 加状态码判断，避免请求失败拿到错误内容
        if (request.readyState === request.DONE && request.status === 200) {
            console.log('请求完成，执行回调');
            callback(request.responseText);
        }
    }
    // 可选：添加请求异常处理
    request.onerror = function() {
        callback('文件加载失败，请检查地址或网络');
    }
}
asynchronousCall(function(result) {
    // 直接将结果插入到页面容器中
    document.getElementById('fileContent').textContent = result;
    // 如果需要保留文本中的换行格式，可以用下面的写法替换
    // document.getElementById('fileContent').innerHTML = result.replaceAll('\n', '<br>');
});

可选：把内容存到全局变量 #

如果你确实需要把内容存到变量后续使用，可以在全局作用域声明变量，不过依然要注意只有在异步请求回调执行之后，变量才会有值：

// 全局声明变量
let globalFileContent = '';

asynchronousCall(function(result) {
    globalFileContent = result;
    // 只有这个位置之后，globalFileContent才是有效值，提前访问都是空字符串
    console.log('全局变量已赋值：', globalFileContent);
});

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