通过AJAX刷新表格

Question

I have a task to provide users a status of a backend process that runs in our application. To display this status we have created a Status table in the database that lists the tasks that have completed, failed, or are in progress, like so:

To get the most current status of this table, I am calling an .ajax() method every 3 seconds by wrapping the call within a setInterval() method. The refresh works as expected and grabs the most current status of the program, however this was my first approach at the issue and feels a little brute force-ish. I'm wondering if a better way to accomplish this exists (i.e., a cross-browser solution that mimics a live news feed with it's own API). Any thoughts?

Answer 1

Try this http://www.w3schools.com/html/html5_serversentevents.asp

sse is the best way to do it.

Try this code

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    //display data in event array.
};
} else {
//Use your old interval if SSE not support in browser
}
</script>

in your php code

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');//this is important

$arr=['status'=>1,'data'=>$some_array];

$retry="retry: 10000
";
echo $.retry."data: ".json_encode($arr)."

";
flush();
?>

you need to add "data:" in the start of you display to SSE know that is your data and " " the end of data.

and add retry, so it refresh every 10000=10 seconds