AJAX（Asynchronous JavaScript and XML），是一种用于在 Web 页面上实现异步通信的技术。它的主要优势在于可以在不刷新整个页面的情况下更新部分页面内容，从而提高用户的交互体验。在本文中，我们将探讨如何利用 AJAX 和定时器来查询数据库，以实现实时的数据更新。

假设我们正在开发一个在线聊天应用，我们希望能够实时地显示当前在线用户的数量。为了实现这个功能，我们需要不断地查询数据库，以获取最新的在线用户数，而不需用户手动刷新页面。

首先，我们需要创建一个定时器，使用 setInterval() 方法每隔一定的时间就发送一个 AJAX 请求，并更新页面中的在线用户数。

setInterval(function(){
// 创建 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 发送 AJAX 请求
xhr.open('GET', 'getOnlineUsers.php', true);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200) {
// 更新页面中的在线用户数
document.getElementById('onlineUsers').innerText = xhr.responseText;
}
};
xhr.send();
}, 5000); // 每隔 5 秒发送一次请求

上述代码使用 setInterval() 方法创建了一个定时器，并在每个时间间隔内发送一个 AJAX 请求。在 AJAX 请求中，我们使用了 XMLHttpRequest 对象来创建一个异步请求，发送到服务器上的 getOnlineUsers.php 文件。当服务器返回响应后，我们可以通过 readyState 和 status 属性来判断请求是否成功。如果请求成功，我们将获取的在线用户数更新到页面中的相应元素上。

在服务器端，getOnlineUsers.php 文件应该实现相应的逻辑来查询并返回数据库中的在线用户数量。

query($sql);
if ($result->num_rows >0) {
$row = $result->fetch_assoc();
echo $row["onlineUsers"];
}
$conn->close();
?>

上述代码通过连接到数据库并查询 users 表中 online 字段为 1 的记录数量，然后将结果返回给发送 AJAX 请求的客户端。在客户端接收到响应后，我们将获取的在线用户数更新到页面中。

通过结合使用 AJAX 和定时器，我们可以实现定时查询数据库并实时更新页面的功能。这在许多场景下非常有用，比如在线聊天应用、显示在线访客数等。