Ajax（Asynchronous JavaScript and XML）是一種用于創建交互式和動態網頁的技術。它允許網頁在不需要重新加載整個頁面的情況下，通過與服務器進行異步通信來更新部分網頁內容。在本文中，我們將討論如何使用Ajax來周期性地每20秒調用一次接口，并通過例子來說明其優點和用途。

首先，我們需要使用JavaScript中的setInterval函數來實現循環調用。可以將setInterval函數視為一個定時器，它會在每20秒鐘觸發一次指定的函數。例如，以下代碼將每20秒調用一次名為"getData"的函數：

setInterval(getData, 20000);
function getData() {
// 執行需要的操作
}

接下來，讓我們考慮一個具體的例子來說明循環調用Ajax的用途。假設我們正在開發一個在線聊天應用程序。用戶登錄后，我們希望顯示他們的最新聊天消息。通過使用Ajax每20秒調用一次服務器端的接口，我們可以實時更新用戶的聊天消息，而無需用戶手動刷新頁面。

setInterval(getChatMessages, 20000);
function getChatMessages() {
// 通過Ajax請求服務器獲取最新的聊天消息
$.ajax({
url: "api/getMessages",
method: "GET",
success: function(response) {
// 更新聊天消息到頁面中的聊天窗口
$("#chatWindow").html(response.messages);
}
});
}

上面的代碼中，我們使用了jQuery庫提供的ajax函數來發送GET請求到服務器端的"api/getMessages"接口。在成功響應后，我們將服務器返回的最新聊天消息更新到頁面上的聊天窗口中。

通過循環調用Ajax每20秒，我們可以實現聊天應用程序的實時更新。這樣一來，當用戶登錄后，他們將看到最新的聊天消息，而不必手動刷新頁面。

此外，循環調用Ajax還可以用于其他場景，例如顯示股票價格。假設我們正在開發一個股票市場應用程序，我們希望在頁面上顯示特定股票的實時價格。我們可以通過每隔20秒調用一次服務器端的接口來獲取最新的股票價格，并將其更新到頁面上。

setInterval(getStockPrice, 20000);
function getStockPrice() {
// 通過Ajax請求服務器獲取特定股票的實時價格
$.ajax({
url: "api/getPrice?stock=XYZ",
method: "GET",
success: function(response) {
// 更新頁面上特定股票的價格
$("#stockPrice").text(response.price);
}
});
}

上面的代碼中，我們通過每20秒調用一次服務器端的"api/getPrice?stock=XYZ"接口來獲取股票"XYZ"的實時價格，并將其更新到頁面上相應的元素中。

總結來說，使用Ajax循環調用每20秒一次可以實現定時更新網頁內容的效果。無論是在線聊天應用程序還是股票市場應用程序，循環調用Ajax都可以使用戶實時獲取到最新的信息，而無需手動刷新頁面。這種方式極大地提升了用戶體驗和網頁的交互性。