我有一个网页，其中包含两个表格、一个图表和一些文本，每个表格都会定期更新，而不会出现通常的 HTML 刷新“闪烁”情况。我的（工作）示例包括以下内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Active chats</title>
<meta charset="utf-8">
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#concurrentChart').load('myscript?update=graph').fadeIn("slow") ;
$('#chats').load('myscript?update=chat').fadeIn('slow') ;
$('#watchers').load('myscript?update=watchers').fadeIn('slow') ;
$('#currentTime').load('myscript?update=time').fadeIn('slow') ;
}, 10000); // refresh every 10 seconds
</script>
<style>
...
</style>
</head>
<body>
...
...
<div id='concurrentChart'> ... </div>
<div id='chats'> ... </div>
<div id='watchers'> ... </div>
<div id='currentTime'> ... </div>
</body>
</html>
...以及解释刷新请求的 PHP 代码...
if ($_SERVER['REQUEST_METHOD'] == 'GET') {
....
if (array_key_exists('query', $urlParts)) {
$query = $urlParts['query'] ;
if (preg_match('/^update=(graph|watchers|chat|time)$/', $query, $matches)) {
$updateWhat = $matches[1] ;
$dbCriteria = [ 'minimumEpoch' => $_SESSION['minimumEpoch']
, 'livestreamId' => null
] ;
switch($updateWhat) {
case 'graph':
echo latestChatViewerCountGraph() ;
break ;
case 'watchers':
echo latestChatsGetWatchersHTML( $dbCriteria ) ;
break ;
case 'chat':
echo latestChatsGetChatTable($dbCriteria) ;
break ;
case 'time':
echo latestChatCurrentTimeImage($ChrisTime) ;
break ;
} // switch
exit() ;
} // $query is update=something
} // $url exists in array
} // GET request
正如我所指出的，该页面可以工作，但一个问题是每个 DIV 都必须在每个“周期”上更新，即使数据没有更改（因为我有无条件 $(#section).load(. ..)
我觉得最好是有条件地重新加载，但我不知道足够的 javascript 来知道如何实现这一点（更不用说 PHP 和 javascript 之间的相互作用让我头脑混乱！）。我知道确定数据是否发生变化的有效方法。我正在寻找一种有效的方法来满足实际刷新的需要。
理想情况下，每个函数（例如latestChatsGetWatchersHTML）实际上都会更新表，但前提是数据已更改。
所以我认为刷新需要看起来更像这样：
<script type="text/javascript">
var auto_refresh = setInterval(
function () {
call_url('myscript?update=graph') ;
call_url('myscript?update=chat')
call_url('myscript?update=watchers')
call_url'myscript?update=time')
}, 10000); // refresh every 10 seconds
</script>
但是我不确定用什么替换“call_url”（可能是 AJAX - 但这是另一个学习曲线），然后每个重建函数都必须更新它们各自的 DIV，我不知道如何实现这一点...
我不是在寻找有人为我编写代码，而是寻找可能符合要求的方法的技术细节。
指示上次更改时间的时间戳怎么样？ AJAX 调用会发送该信息；如果响应为空，则不必费心重新绘制页面。您甚至可以缩短 10 秒的间隔。
此外，在单个请求中要求更新所有 4 个内容。也许返回应该是一个 JSON 关联数组，自提到的时间戳以来，4 个事物（如果有）中的一个已发生更改。然后淡入 JSON 中显示的每个事物。
UI 警告...当更新一个区域时，是否会将其下方的内容向上或向下移动（在屏幕上）？如果是这样，这是否会导致糟糕的用户体验，因为用户在阅读和/或用鼠标触及某些内容（例如，URL 链接）时内容会跳来跳去，并意外地落在错误的位置？