如何通过PHP脚本配合Ajax显示带步骤消息的进度？

当然可以！你之前用多次Ajax调用的方式虽然能实现，但确实有点繁琐——其实咱们可以通过PHP输出缓冲区控制配合Ajax的实时响应监听，用一次请求就搞定分步进度提示，逻辑更简洁，效率也更高。

核心原理 #

PHP脚本在执行每个步骤时，不等到全部执行完再返回结果，而是实时输出进度消息，并强制刷新输出缓冲区，让浏览器能逐步接收到响应；前端通过Ajax的readystatechange事件监听响应状态，当浏览器正在接收服务器返回的内容时，就把新收到的进度消息提取出来，更新页面显示。

完整代码示例 #

前端（HTML+JS）

<button id="startBtn">开始执行任务</button>
<div id="progress"></div>

<script>
document.getElementById('startBtn').addEventListener('click', function() {
    const progressEl = document.getElementById('progress');
    progressEl.innerHTML = '任务开始...<br>';
    
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'backend.php', true);
    
    // 记录上次已经读取的响应长度，避免重复显示
    let lastResponseLength = 0;
    
    xhr.onreadystatechange = function() {
        // readyState=3 表示浏览器正在接收服务器的响应数据
        if (xhr.readyState === 3) {
            // 获取当前已接收的全部响应文本
            const currentResponse = xhr.responseText;
            // 提取新增加的内容（上次没读取的部分）
            const newContent = currentResponse.substring(lastResponseLength);
            
            if (newContent) {
                progressEl.innerHTML += newContent + '<br>';
                lastResponseLength = currentResponse.length;
            }
        } else if (xhr.readyState === 4) {
            progressEl.innerHTML += '任务全部完成！';
        }
    };
    
    xhr.send();
});
</script>

后端（backend.php）

<?php
// 关闭PHP默认的输出缓冲，确保内容能实时输出
ob_end_clean();
// 设置响应头，禁止浏览器缓存，指定纯文本格式
header('Content-Type: text/plain; charset=utf-8');
header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');

// 模拟步骤1：执行耗时操作（比如数据库查询、文件处理）
sleep(1);
// 输出进度消息
echo 'loading step 1';
// 强制刷新输出缓冲区，让消息立即发送给浏览器
ob_flush();
flush();

// 模拟步骤2
sleep(1);
echo 'loading step 2';
ob_flush();
flush();

// 模拟步骤3
sleep(1);
echo 'loading step 3';
ob_flush();
flush();
?>

关键注意事项 #

1. 服务器配置问题：有些服务器（比如Apache）可能开启了mod_deflate压缩，或者有自己的输出缓冲机制，会导致PHP的flush()不生效。可以在后端开头加一句header('Content-Encoding: none');来禁用压缩，或者修改服务器配置关闭相关缓冲。
2. sleep的作用：示例里的sleep(1)是为了模拟真实场景中的耗时操作，实际项目中可以替换成你的业务逻辑（比如数据处理、API调用等）。
3. 响应内容处理：前端通过lastResponseLength记录已读取的内容长度，每次只处理新增的部分，避免重复显示相同的进度消息。

这种方式只需要一次HTTP请求，就能实现分步的进度反馈，比多次Ajax调用更高效，代码逻辑也更集中~

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