AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個頁面的情況下，通過異步方式與服務器進行數據交互的技術。通過使用AJAX，我們可以在不干擾用戶體驗的情況下，修改和更新數據庫中的數據。本文將介紹如何使用AJAX來更新數據庫數據，并通過舉例來說明其實際應用。

在一個網上書店的網站中，用戶可以添加書籍到購物車，并實時更新購物車中商品的數量。當用戶點擊“添加到購物車”按鈕時，AJAX可以被用來將該書籍的數量添加到數據庫中，并在頁面上實時更新購物車的數量。

function addToCart(bookId) {
// 使用AJAX發送請求到服務器
var xhr = new XMLHttpRequest();
xhr.open('POST', '/addToCart', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 更新購物車數量
var cartCount = document.getElementById('cart-count');
cartCount.innerText = xhr.responseText;
}
};
xhr.send(JSON.stringify({ bookId: bookId }));
}

上述代碼是在用戶點擊“添加到購物車”按鈕時觸發的JavaScript函數。該函數使用AJAX發送一個POST請求到服務器的`/addToCart`路徑，并在請求的正文中發送書籍的ID。服務器端的代碼將會接收到這個請求，然后將書籍ID對應的數量添加到購物車中，并返回購物車中商品的總數。當AJAX收到服務器的響應后，它會將返回的商品總數顯示在頁面上，并更新購物車數量的DOM元素中的內容。

使用AJAX更新數據庫數據的另一個常見示例是在一個在線社交網站中，用戶可以點贊或取消贊一個帖子。當用戶點擊“點贊”按鈕時，AJAX可以被用來將點贊的狀態更新到數據庫中，并在頁面上實時顯示點贊的總數。

function toggleLike(postId) {
// 使用AJAX發送請求到服務器
var xhr = new XMLHttpRequest();
xhr.open('POST', '/toggleLike', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 更新點贊總數
var likeCount = document.getElementById('like-count');
likeCount.innerText = xhr.responseText;
// 更新點贊按鈕的樣式
var likeButton = document.getElementById('like-button');
var isLiked = JSON.parse(xhr.responseText).isLiked;
if (isLiked) {
likeButton.classList.add('liked');
} else {
likeButton.classList.remove('liked');
}
}
};
xhr.send(JSON.stringify({ postId: postId }));
}

上面的代碼通過使用AJAX發送一個POST請求來實現點贊和取消贊的功能。當用戶點擊“點贊”或“取消贊”按鈕時，該函數會將帖子ID發送給服務器。服務器接收到請求后，將更新帖子的點贊狀態，并返回帖子的點贊總數和當前用戶是否已經點贊的狀態。AJAX在收到服務器響應后，將會更新頁面上顯示點贊總數的DOM元素，并根據服務器返回的是否點贊狀態來更新點贊按鈕的樣式。

以上示例展示了如何使用AJAX來更新數據庫數據。通過使用AJAX，我們能夠在不刷新整個頁面的情況下與服務器進行數據交互，從而提高用戶體驗。無論是在網上書店還是社交網站中，AJAX都是一種非常有用的工具，可以幫助我們實現數據的實時更新。