javascript - 如何在未完成的情况下从 ajax 触发的 PHP 调用获取更新？

Question

有没有办法在 PHP 进程未完成且已被 ajax 调用时从该进程获取更新？我所说的更新是指刷新 PHP 脚本的输出。

var proc;
$('#start').click(function () {
    proc = $.ajax({
        type: 'POST',
        url: 'execute.php',
        // getData function that will get me updated data
        getData: function (update){
            alert(update);
        }
    });
});

更新:假设我们想在结束之前得到 echo 。

执行.php

<?php
$progress = 0;
while(1){
    $progress++;
    echo $progress;
    flush();
    sleep(5);
    if($progress == 100){
        break;
    }
}
?>

最终:

myScript.js

var strongcalcs;
var source;
$('#start').click(function () {
    strongcalcs = $.ajax({
        type: 'POST',
        url: 'execute.php',
        beforeSend: function () {
            rpm_percent();
        },
        success: function(result){
            source.close();
        },
        complete: function () {
            source.close();
        },
        error: function () {
            source.close();
        }
    });
});

function rpm_percent() {
    source = new EventSource("execute.php");
    if(typeof(EventSource) !== "undefined") {
        source.onmessage = function(event) {
            console.log(event.data);
        };
    } else {
        alert("nono");
    }
}

execute.php

<?php
$coco = 0;
function sendMsg($msg, &$coco) {
    echo "id: " . $coco . "\n";
    echo "data: " . $msg;
    echo "\n";
    echo "\n";
    ob_flush();
    flush();
    $coco++;
}

header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
$progress = 0;
while(1){
    sendMsg($progress++, $coco);
    ob_flush();
    flush();
    sleep(5);
    if($progress == 100){
        break;
    }
}
?>

Answer 1

我过去曾为此使用过服务器发送事件 ( https://www.w3schools.com/html/html5_serversentevents.asp )。 Internet Explorer 不受开箱即用的支持，但有一些可以解决该问题的 Polyfill。

我认为 Websockets 做了类似的事情，但我自己没有这些经验。