AJAX 长耗时任务进度监听：解决“Pending”阻塞问题

<?php
// 确保会话已启动，但要避免长时间锁定
session_start();

// 获取当前步骤和总步数
$currentStep = isset($_POST['step']) ? (int)$_POST['step'] : 0;
$totalSteps = 10; // 假设总共有10个步骤

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

// 执行当前步骤的逻辑
// 这里可以是你实际的业务逻辑，例如处理一部分数据
// ...

$currentStep++; // 增加步骤计数

// 计算进度百分比
$progress = min(100, ($currentStep / $totalSteps) * 100);

// 将进度和下一个步骤信息返回给客户端
echo json_encode([
    'progress' => $progress,
    'currentStep' => $currentStep,
    'totalSteps' => $totalSteps,
    'status' => ($currentStep > $totalSteps) ? 'done' : 'continue'
]);

// 确保会话写入并解锁，以便其他请求可以访问
session_write_close();
?>

<style type="text/css">
    #container{
        width: 300px;
        height: 20px;
        border: solid thin #aaa;
    }
    #progress{
        background-color: lightblue;
        height: 100%;
        width: 0%; /* 初始宽度为0 */
        color: grey;
        text-align: center;
        line-height: 20px; /* 使文字垂直居中 */
    }
</style>

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

<script type="text/javascript">
    var prog = document.getElementById('progress');
    var startButton = document.getElementById('start');
    var currentStep = 0; // 初始化步骤计数

    startButton.onclick = function() {
        startButton.disabled = true; // 禁用按钮防止重复点击
        currentStep = 0; // 重置步骤计数
        prog.style.width = '0%';
        prog.innerHTML = '0%';

        // 启动第一个步骤
        executeNextStep(currentStep);
    };

    function executeNextStep(step) {
        var 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) {
                try {
                    var response = JSON.parse(xhr.responseText);
                    prog.style.width = response.progress + "%";
                    prog.innerHTML = Math.round(response.progress) + "%"; // 显示整数百分比

                    if (response.status === 'continue') {
                        // 如果任务未完成，继续执行下一个步骤
                        executeNextStep(response.currentStep);
                    } else if (response.status === 'done') {
                        // 任务完成
                        alert("Process completed!");
                        startButton.disabled = false; // 启用按钮
                    }
                } catch (e) {
                    console.error("Error parsing JSON response:", e);
                    alert("An error occurred during processing.");
                    startButton.disabled = false;
                }
            } else {
                alert("Server error: " + xhr.status);
                startButton.disabled = false;
            }
        };

        xhr.onerror = function() {
            alert("Network error occurred.");
            startButton.disabled = false;
        };

        // 发送当前步骤参数
        xhr.send("step=" + step);
    }
</script>