如何用AJAX定时刷新PHP页面的SQL数据及多请求共用全局定时器

核心思路 #

完全可以用一个全局定时器处理多个数据的更新请求，这样既避免了多定时器的资源浪费，也能集中控制刷新逻辑，一次性获取所有需要更新的数据后，分别更新页面对应元素，完全满足你“局部刷新不重载页面”的需求。

具体实现步骤 #

1. 改造后端接口（合并多数据查询） #

把原来单独查温度的sql_nowTemp.php扩展成能返回温度、湿度等所有需要刷新的数据的接口，减少请求次数：

<?php
// 沿用你原有的SQL Server连接逻辑
$serverName = "你的服务器地址";
$connectionInfo = array( "Database"=>"目标数据库名", "UID"=>"账号", "PWD"=>"密码");
$conn = sqlsrv_connect( $serverName, $connectionInfo);

if( $conn === false ) {
    die( print_r( sqlsrv_errors(), true));
}

// 查询最新的温度、湿度数据（按需调整表名和排序字段）
$sql = "SELECT temperatur, humidity FROM 你的数据表 ORDER record_time DESC OFFSET 0 ROWS FETCH NEXT 1 ROW ONLY";
$stmt = sqlsrv_query( $conn, $sql);

if( $stmt === false ) {
    die( print_r( sqlsrv_errors(), true));
}

// 取数据并转成JSON格式返回
$data = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC);
echo json_encode($data);

// 清理资源
sqlsrv_free_stmt( $stmt);
sqlsrv_close( $conn);
?>

2. 前端页面修改（添加全局定时器与局部更新逻辑） #

给页面上的温度、湿度显示元素加上ID，方便JS定位，然后用全局定时器触发AJAX请求：

<!-- 原有显示区域，新增ID用于定位更新 -->
<div>
    当前温度：<span id="temp-display"><?php echo $初始温度值; ?></span>°C
</div>
<div>
    当前湿度：<span id="humidity-display"><?php echo $初始湿度值; ?></span>%
</div>

<script>
// 全局定时器变量，方便后续暂停/清除
let refreshTimer;

// 定义统一的数据刷新函数
function updateAllData() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'sql_nowData.php', true);
    xhr.onload = function() {
        if (this.status === 200) {
            try {
                const result = JSON.parse(this.responseText);
                // 仅更新温度数值
                document.getElementById('temp-display').textContent = result.temperatur;
                // 如需更新湿度，直接复用逻辑
                document.getElementById('humidity-display').textContent = result.humidity;
            } catch (err) {
                console.error('数据解析失败:', err);
            }
        } else {
            console.error('请求失败，状态码:', this.status);
        }
    };
    // 添加超时处理，避免请求卡住
    xhr.timeout = 5000;
    xhr.ontimeout = function() {
        console.warn('数据请求超时');
    };
    xhr.send();
}

// 页面加载完成后启动定时器
window.onload = function() {
    // 先执行一次，避免用户等待刷新间隔才看到最新数据
    updateAllData();
    // 设置刷新间隔，比如3分钟（180000毫秒）
    refreshTimer = setInterval(updateAllData, 180000);
};

// 页面关闭时清除定时器，避免内存泄漏
window.onbeforeunload = function() {
    clearInterval(refreshTimer);
};
</script>

关于全局定时器的说明 #

• 完全可行且推荐：如果多个数据的刷新间隔一致，用单定时器一次性获取所有数据是最优解，减少HTTP请求次数，逻辑更易维护。
• 特殊情况处理：如果不同数据需要不同刷新间隔，再考虑拆分多个定时器，但尽量保证定时器数量最少。

额外优化点 #

• 可以给显示元素添加加载状态（比如刷新时显示“更新中...”），提升用户体验；
• 后端可以加简单缓存逻辑，比如1分钟内重复请求直接返回缓存数据，减少数据库压力；
• 可以给AJAX请求加失败重试机制，避免单次请求失败导致数据长时间不更新。

内容的提问来源于stack exchange，提问作者Bluelight