現代網頁開發中，經常需要實現實時刷新數據的功能。一種常見的實現方式是使用Ajax定時刷新。Ajax是一種前端技術，可以在不刷新整個網頁的情況下，實現與服務器交互并更新部分內容。通過定時刷新的方式，可以定期向服務器發送請求，獲取最新的數據并顯示在網頁上。本文將介紹如何使用Ajax實現定時刷新的功能，并提供相應的示例代碼。

1. Ajax定時刷新的基本原理

要實現Ajax定時刷新，首先需要使用JavaScript的定時器函數setInterval()來定時執行Ajax請求。在每次定時器觸發時，我們創建一個Ajax請求對象，使用該對象向服務器發送請求，并在請求成功后更新頁面的指定部分內容。具體的步驟如下：

// 設置定時器，每隔一定時間執行一次Ajax請求
var timer = setInterval(function() {
// 創建Ajax請求對象
var xhr = new XMLHttpRequest();
// 向服務器發送請求
xhr.open('GET', 'http://example.com/data.php', true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
// 請求成功，更新頁面
document.getElementById('result').innerHTML = xhr.responseText;
}
};
xhr.send();
}, 5000); // 每5秒發送一次請求
// 停止定時器
clearInterval(timer);

2. 示例：實時顯示在線人數

假設我們需要在網頁上實時顯示當前的在線人數。我們可以將服務器端的在線人數存儲在一個數據庫或文件中，并提供一個接口來獲取當前的在線人數。然后，使用Ajax定時刷新的方式，每隔一段時間向服務器發送請求，獲取最新的在線人數，并將其顯示在網頁上。

// HTML代碼
0人在線
// JavaScript代碼

3. 停止Ajax定時刷新

有時候，我們需要在特定情況下停止Ajax定時刷新。比如，在用戶點擊某個按鈕后停止刷新，或者在滿足某個條件時停止刷新。我們可以使用 clearInterval() 函數來停止定時器，從而停止Ajax定時刷新。示例如下：

// 創建一個全局變量來存儲定時器
var timer;
// 啟動Ajax定時刷新
function startRefresh() {
// 設置定時器，每隔一定時間執行一次Ajax請求
timer = setInterval(function() {
// 創建Ajax請求對象
var xhr = new XMLHttpRequest();
// 向服務器發送請求
xhr.open('GET', 'http://example.com/data.php', true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
// 請求成功，更新頁面
document.getElementById('result').innerHTML = xhr.responseText;
}
};
xhr.send();
}, 5000); // 每5秒發送一次請求
}
// 停止Ajax定時刷新
function stopRefresh() {
// 停止定時器
clearInterval(timer);
}

通過以上的例子，我們了解了如何使用Ajax定時刷新來實現實時更新數據的功能，并且學會了如何停止刷新。在實際應用中，我們可以根據自己的需求和業務場景，靈活運用這一技術。