如何实现实时流式接收 AJAX 过程中 PHP 的逐段输出？-php教程-PHP中文网

如何实现实时流式接收 AJAX 过程中 PHP 的逐段输出？

本文介绍在 jQuery AJAX 请求期间，如何实时捕获并显示 PHP 脚本通过 echo 分阶段输出的内容（如 'abc' → 'def' → 'ghi'），无需依赖 Session、Cookie 或数据库，核心方案是采用服务端流式响应 + 前端轮询或 EventSource。

本文介绍在 jquery ajax 请求期间，如何实时捕获并显示 php 脚本通过 echo 分阶段输出的内容（如 'abc' → 'def' → 'ghi'），无需依赖 session、cookie 或数据库，核心方案是采用服务端流式响应 + 前端轮询或 eventsource。

默认情况下，jQuery 的 $.ajax() 是一次性等待完整响应的——它会阻塞直到 PHP 脚本完全执行完毕（包括所有 sleep() 和 echo），然后才触发 success 回调。因此，你无法在请求进行中直接“监听”PHP 的中间输出。这是因为 HTTP/1.1 协议本身不支持原生的“流式响应”语义（除非显式启用并正确配置）。

但有两类可行的前端主动拉取方案，均满足「不使用 Session/Cookie/DB」的要求：

✅ 方案一：轮询（Polling）——简单可靠，兼容性最佳

后端将每段输出写入一个临时文件（如 log_{$request_id}.txt），前端用 setInterval 定期读取该文件内容并追加到页面：

btpanel phpsite 宝塔面板PHP网站

宝塔面板 PHP 网站管理：站点创建、删除、启停、PHP 版本切换、域名管理、SSL证书管理、伪静态管理、数据库管理

下载

// add.php（简化示例，注意需生成唯一 request_id）
$request_id = uniqid('log_');
ob_implicit_flush(true);
ob_end_flush();

echo "abc\n"; flush();
sleep(5);
echo "def\n"; flush();
sleep(5);
echo "ghi\n"; flush();

// 最后将全部内容写入临时文件（供前端轮询）
file_put_contents(sys_get_temp_dir() . "/$request_id.txt", ob_get_contents());

// 前端：发起主请求获取 request_id，再启动轮询
let logId = null;

$.post(VIP_AJAX_URL + '/add', { slug: slug })
  .done(res => {
    logId = res.request_id; // 后端应返回生成的 log ID
    startLogPolling(logId);
  });

function startLogPolling(id) {
  const logEl = $('#log');
  const poll = setInterval(() => {
    $.get(`/temp-logs/${id}.txt`, (data) => {
      if (data) {
        // 只追加新增行（可配合 lastLineIndex 优化）
        logEl.append(`<div>${data.trim().split('\n').map(s => `<span>${s}</span><br>`).join('')}</div>`);
        if (data.includes('ghi')) clearInterval(poll); // 检测完成标识
      }
    }).fail(() => clearInterval(poll));
  }, 1000);
}

⚠️ 注意事项：

临时文件需设置合理过期策略（如 5 分钟后自动清理）；

路径 /temp-logs/ 需通过 Web 服务器（Nginx/Apache）映射到系统临时目录，并确保可公开读取（或走代理）；

生产环境建议添加 CSRF 校验与 ID 白名单校验，防止日志遍历攻击。

✅ 方案二：EventSource（Server-Sent Events）——更优雅的流式体验

若服务端支持 HTTP 流（且无代理截断缓冲），可改用 EventSource 实现真·实时推送：

// add-stream.php（关键：禁用缓冲、设置正确 header）
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('X-Accel-Buffering: no'); // Nginx 关键

echo "data: abc\n\n"; flush();
sleep(5);
echo "data: def\n\n"; flush();
sleep(5);
echo "data: ghi\n\n"; flush();

// 前端监听
const eventSource = new EventSource('/add-stream.php?slug=' + slug);
eventSource.onmessage = e => {
  $('#log').append(`<div>→ ${e.data}</div>`);
};
eventSource.addEventListener('error', () => eventSource.close());