使用JavaScript的XMLHttpRequest定时刷新数据时遇空响应问题

核心问题 #

你的代码存在两个关键问题：

• 前端：XMLHttpRequest发起一次请求后只会获取单次响应，后续用setInterval重复读取xhr.responseText拿不到新数据；而且没处理请求的完成状态，可能请求还没结束就去读取内容，直接返回空字符串。
• 后端：当前路由是一次性返回var_that_changes的当前值，不是持续推送更新的流式响应，根本实现不了“可变变量内容实时同步”的需求。

前端代码修正 #

要正确获取数据并实现定时更新，需要监听XHR的load事件确保请求完成，同时每次间隔重新发起请求，不能复用同一个XHR实例：

var output = document.getElementById('messages');

function getLatestData() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', "/stream");
  xhr.onload = function() {
    if (xhr.status === 200) {
      output.innerHTML = xhr.responseText;
    }
  };
  xhr.send();
}

// 先获取一次初始数据，之后每10秒刷新
getLatestData();
setInterval(getLatestData, 10000);

后端代码修正 #

要返回可变变量的实时值，先确保后端能正确返回当前var_that_changes的内容；如果需要变量变化时主动推送给前端，可以用Flask的流式响应：

方案1：适配前端定时请求（简单版） #

@app.route('/stream')
def stream():
    # 确保var_that_changes是全局/可访问的变量，且有初始值
    return app.response_class(str(var_that_changes), mimetype='text/plain')

方案2：真正的流式推送（主动更新） #

如果要实现变量变化时立即推送到前端，后端用生成器实现流式响应：

from flask import Response
import time

@app.route('/stream')
def stream():
    def generate_updates():
        while True:
            # 发送当前变量值，结尾加换行符让前端识别新内容
            yield f"{var_that_changes}\n"
            time.sleep(1)  # 每秒检查一次变量变化
    return Response(generate_updates(), mimetype='text/plain')

对应的前端需要监听progress事件接收流式数据：

var output = document.getElementById('messages');

var xhr = new XMLHttpRequest();
xhr.open('GET', "/stream");
xhr.onprogress = function() {
  // 拆分响应文本，取最后一行最新值
  var lines = xhr.responseText.split('\n');
  output.innerHTML = lines[lines.length - 2] || '';
};
xhr.send();

额外排查点 #

• 检查var_that_changes是否有初始值，避免后端返回空字符串。
• 打开浏览器开发者工具的Network面板，查看/stream请求的响应内容，确认后端确实返回了数据。
• 如果前后端域名/端口不一致，需给Flask配置CORS，避免跨域拦截。

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