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

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

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

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

原生 jQuery 的 $.ajax() 默认等待整个响应体完成才触发 success 回调，因此无法捕获 PHP 中 echo + sleep() 产生的渐进式输出（即 HTTP 流式响应）。这是因为浏览器和 jQuery 会缓冲完整响应，直到连接关闭。要实现“边执行边推送”，需满足两个前提：

服务端支持流式输出：禁用输出缓冲，逐段发送并刷新；
前端支持流式读取：不能依赖传统 AJAX，而应使用 fetch() 配合 ReadableStream，或采用 Server-Sent Events（SSE），或退而求其次使用轻量轮询。

✅ 推荐方案：PHP 启用流式输出 + 前端 Fetch 流式读取（现代、高效、无轮询延迟）

PHP 端（/add.php）需做以下关键处理：

<?php // 必须关闭所有输出缓冲
if (ob_get_level()) ob_end_clean();
@apache_setenv('no-gzip', 1);
@ini_set('zlib.output_compression', 0);
@ini_set('implicit_flush', 1);

// 发送必要头信息，声明为流式文本
header('Content-Type: text/plain; charset=utf-8');
header('Cache-Control: no-cache');
header('X-Accel-Buffering: no'); // Nginx 关键

// 逐段输出并立即刷新
echo "abc\n";
flush(); // 强制输出到客户端
sleep(5);

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

echo "ghi\n";
flush();
?>

⚠️ 注意：flush() 是否生效取决于 Web 服务器配置（Apache/Nginx）、PHP SAPI 模式（CLI 不适用）及 output_buffering 设置。建议在 php.ini 中设 output_buffering = Off，或运行时调用 ob_end_flush()。

btpanel phpsite 宝塔面板PHP网站

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

下载

✅ 前端 JavaScript（使用 fetch + ReadableStream 实时解析）：

async function streamAjaxProgress(slug) {
  const response = await fetch(VIP_AJAX_URL + '/add?slug=' + encodeURIComponent(slug), {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
  });

  if (!response.body) throw new Error('Streaming not supported');

  const reader = response.body.getReader();
  const decoder = new TextDecoder('utf-8');
  let buffer = '';

  Swal.fire({
    title: 'Processing...',
    html: '<div id="stream-log" style="text-align:left; max-height:200px; overflow-y:auto; font-family:monospace; font-size:14px;"></div>',
    allowOutsideClick: false,
    didOpen: () => Swal.showLoading()
  });

  const logEl = document.getElementById('stream-log');

  try {
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      buffer += decoder.decode(value, { stream: true });
      // 按换行符分割新到达的行
      const lines = buffer.split('\n');
      buffer = lines.pop(); // 保留未结束的行
      lines.forEach(line => {
        if (line.trim()) {
          const div = document.createElement('div');
          div.textContent = `[${new Date().toLocaleTimeString()}] ${line}`;
          logEl.appendChild(div);
          logEl.scrollTop = logEl.scrollHeight; // 自动滚动到底部
        }
      });
    }
    // 全部完成
    Swal.close();
    Swal.fire('Success!', 'All steps completed.', 'success');
  } catch (err) {
    console.error('Stream error:', err);
    Swal.fire('Error', 'Failed to receive progress.', 'error');
  }
}

// 调用示例
streamAjaxProgress('my-slug');

? 替代方案（兼容性更强但有延迟）：轮询日志接口
若因环境限制无法启用流式响应，可将 PHP 输出写入临时内存（如 APCu 或 Redis），再由独立 /log?token=xxx 接口提供轮询读取——但题目明确要求不使用 Session/DB/Cache，故该方案不推荐。

? 总结：