在現代Web開發中，頁面與服務器之間的實時通信變得越來越重要。一種實現實時通信的技術是AJAX（Asynchronous JavaScript and XML）。AJAX可以在頁面無需刷新的情況下與服務器進行數據交互，給用戶帶來流暢的使用體驗。本文將介紹AJAX技術如何實現頁面刷新數據庫的功能。

AJAX通過使用JavaScript來向服務器發送請求，并在后臺與服務器進行異步交互，從而實現頁面數據的動態刷新。在一個常見的場景中，當用戶在網頁上提交一個表單時，AJAX技術可以在后臺將表單數據發送給服務器，并將服務器返回的數據實時更新到頁面上，而無需整個頁面的刷新。

假設有一個任務列表，用戶可以在任務列表上添加、編輯和刪除任務。當用戶添加一個新任務時，可以使用AJAX技術將新任務的信息發送給服務器，服務器將其保存在數據庫中。然后，服務器會返回一個成功添加任務的響應。接下來，通過AJAX技術，可以將服務器返回的數據實時地更新到任務列表中，而無需刷新整個頁面。

// 使用AJAX發送新任務到服務器
function addTask(taskName) {
var request = new XMLHttpRequest();
request.open("POST", "addTask.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.onreadystatechange = function() {
if (request.readyState === 4 && request.status === 200) {
var responseData = JSON.parse(request.responseText);
// 在任務列表中添加新任務
var taskList = document.getElementById("taskList");
var newTask = document.createElement("li");
newTask.textContent = responseData.taskName;
taskList.appendChild(newTask);
}
};
var requestData = "taskName=" + encodeURIComponent(taskName);
request.send(requestData);
}
// 在頁面上添加新任務的按鈕點擊事件
var addButton = document.getElementById("addButton");
addButton.addEventListener("click", function() {
var taskNameInput = document.getElementById("taskNameInput");
var taskName = taskNameInput.value.trim();
if (taskName !== "") {
addTask(taskName);
taskNameInput.value = "";
}
});

在以上的代碼中，首先通過AJAX技術將新任務的信息發送給服務器。服務器將新任務保存在數據庫中，并返回一個成功添加任務的響應。在JavaScript中，通過監聽AJAX請求的狀態和響應，當收到服務器返回的成功添加任務的響應時，將新任務創建為一個