解决AJAX长请求“Pending”状态：实现PHP后台任务实时进度更新的策略

<div id="container">
    <div id="progress">0%</div>
</div>
<button id="start">Start Task</button>

<script type="text/javascript">
    const progressBar = document.getElementById('progress');
    const startButton = document.getElementById('start');
    let currentStep = 0;
    const totalSteps = 10; // 假设任务分解为10步

    startButton.addEventListener('click', function() {
        startButton.disabled = true;
        currentStep = 0;
        executeNextStep();
    });

    function executeNextStep() {
        if (currentStep >= totalSteps) {
            progressBar.style.width = '100%';
            progressBar.innerHTML = '100% (Done!)';
            alert('Task completed!');
            startButton.disabled = false;
            return;
        }

        currentStep++;
        const xhr = new XMLHttpRequest();
        xhr.open("POST", "process_step.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        xhr.onload = function() {
            if (xhr.status === 200) {
                const response = JSON.parse(xhr.responseText);
                if (response.success) {
                    const progressPercentage = Math.round((currentStep / totalSteps) * 100);
                    progressBar.style.width = progressPercentage + "%";
                    progressBar.innerHTML = progressPercentage + "%";
                    executeNextStep(); // 递归调用执行下一步
                } else {
                    alert('Error at step ' + currentStep + ': ' + response.message);
                    startButton.disabled = false;
                }
            } else {
                alert('Network error or server issue at step ' + currentStep);
                startButton.disabled = false;
            }
        };

        xhr.onerror = function() {
            alert('Request failed for step ' + currentStep);
            startButton.disabled = false;
        };

        xhr.send("step=" + currentStep);
    }
</script>

<?php
// 确保只处理POST请求
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
    header('HTTP/1.1 405 Method Not Allowed');
    exit('Method Not Allowed');
}

header('Content-Type: application/json');

$step = isset($_POST['step']) ? (int)$_POST['step'] : 0;

if ($step <= 0 || $step > 10) { // 假设总共有10步
    echo json_encode(['success' => false, 'message' => 'Invalid step provided.']);
    exit();
}

// 模拟每一步的耗时操作
sleep(1); 

// 这里可以根据 $step 执行不同的任务逻辑
// 例如：
// if ($step === 1) { /* 处理第一步数据 */ }
// else if ($step === 2) { /* 处理第二步数据 */ }
// ...

// 返回成功响应
echo json_encode(['success' => true, 'current_step' => $step, 'message' => 'Step ' . $step . ' completed.']);
?>

<div id="container">
    <div id="progress">0%</div>
</div>
<button id="start-sse">Start SSE Task</button>
<div id="messages"></div>

<script type="text/javascript">
    const progressBarSSE = document.getElementById('progress');
    const startButtonSSE = document.getElementById('start-sse');
    const messagesDiv = document.getElementById('messages');
    let eventSource;

    startButtonSSE.addEventListener('click', function() {
        if (eventSource) {
            eventSource.close(); // 关闭之前的连接
        }
        startButtonSSE.disabled = true;
        progressBarSSE.style.width = '0%';
        progressBarSSE.innerHTML = '0%';
        messagesDiv.innerHTML = '';

        eventSource = new EventSource('sse_progress.php');

        eventSource.onmessage = function(event) {
            const data = JSON.parse(event.data);
            if (data.progress !== undefined) {
                progressBarSSE.style.width = data.progress + "%";
                progressBarSSE.innerHTML = data.progress + "%";
                messagesDiv.innerHTML += `<p>Progress: ${data.progress}% - ${data.message || ''}</p>`;
            }
            if (data.status === 'completed') {
                messagesDiv.innerHTML += '<p>Task Completed!</p>';
                eventSource.close();
                startButtonSSE.disabled = false;
            }
        };

        eventSource.onerror = function(err) {
            console.error("EventSource failed:", err);
            messagesDiv.innerHTML += '<p style="color: red;">Connection failed or closed.</p>';
            eventSource.close();
            startButtonSSE.disabled = false;
        };
    });
</script>

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive'); // 保持连接

// 如果使用了会话，为了避免会话锁，需要关闭会话
// session_write_close(); 

ob_implicit_flush(true); // 开启隐式刷新
ob_end_clean(); // 清除所有缓冲区

for ($i = 0; $i <= 10; $i++) {
    $progress = $i * 10;
    $message = "Processing step " . $i;

    // 模拟耗时操作
    sleep(1);

    // 发送事件数据
    echo "data: " . json_encode(['progress' => $progress, 'message' => $message]) . "\n\n";

    // 确保数据立即发送到客户端
    if (ob_get_level() > 0) {
        ob_flush();
    }
    flush();

    if ($i === 10) {
        echo "data: " . json_encode(['status' => 'completed', 'message' => 'Task finished.']) . "\n\n";
        if (ob_get_level() > 0) {
            ob_flush();
        }
        flush();
    }
}
?>

<?php
header('Content-Type: application/json');

// 1. 生成唯一的任务ID
$taskId = uniqid('task_');

// 2. 将任务信息初始化到数据库或Redis
// 示例：这里使用一个简单的文件来模拟存储
$taskFile = 'tasks/' . $taskId . '.json';
file_put_contents($taskFile, json_encode(['status' => 'pending', 'progress' => 0, 'message' => 'Task started.']));

// 3. 异步启动后台PHP进程
// 注意：在生产环境中，exec命令需要谨慎使用，并确保安全性。
// 更推荐使用消息队列 (如 RabbitMQ, Redis Queue) 配合 Worker 进程。
// 对于Linux系统，可以使用 nohup 和 & 将进程放到后台
$command = 'php /path/to/your/background_worker.php ' . $taskId . ' > /dev/null 2>&1 &';
exec($command);

// 4. 立即返回任务ID给客户端
echo json_encode(['success' => true, 'taskId' =>