Ajax（Asynchronous JavaScript and XML）是一種在Web應用中進行異步通信的技術。通過Ajax，前端可以通過向后端發送請求獲取數據，并將數據實時地展示在頁面上，而無需重新加載整個頁面。本文將介紹如何使用Ajax向前端傳遞數據庫數據，并通過舉例說明其具體應用。

在一個網上商城的網站中，我們需要展示當前熱門的商品列表。這些商品的信息是存儲在后端數據庫中的。如果我們每次訪問網站時都重新加載整個頁面以獲取最新的商品數據，那將十分低效。而使用Ajax技術，我們可以通過向后端發送異步請求，僅獲取最新的商品數據，然后將其實時展示在頁面上。這樣，用戶無需刷新頁面，就能獲取到最新的熱門商品列表，提升了用戶體驗。

let xhr = new XMLHttpRequest();
xhr.open('GET', '/api/hotItems', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let items = JSON.parse(xhr.responseText);
let itemList = document.getElementById('itemList');
itemList.innerHTML = '';
for (let i = 0; i< items.length; i++) {
let item = document.createElement('li');
item.innerHTML = items[i].name;
itemList.appendChild(item);
}
}
};
xhr.send();

在上述代碼中，我們使用了XMLHttpRequest對象來發送GET請求，獲取后端返回的商品數據。通過設置onreadystatechange事件監聽器，我們可以在異步請求狀態改變時執行相應的操作。當請求完成且狀態為200時，我們將獲取到的數據進行解析，并將其展示在名為"itemList"的HTML元素中。

Ajax技術不僅可以用于獲取數據，還可以用于向數據庫中添加數據。以一個社交網絡應用為例，用戶可以通過點擊一個按鈕向自己的動態中添加一條新的狀態。在傳統的方式中，用戶需要進行頁面的刷新才能看到最新的狀態。而使用Ajax技術，我們可以通過異步請求將新的狀態數據發送給后端，并將其實時展示在用戶的動態中，使用戶能夠更及時地了解好友的最新動態。

let xhr = new XMLHttpRequest();
xhr.open('POST', '/api/addStatus', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let response = JSON.parse(xhr.responseText);
let statusList = document.getElementById('statusList');
let status = document.createElement('li');
status.innerHTML = response.message;
statusList.insertBefore(status, statusList.firstChild);
}
};
let newStatus = { content: '今天天氣真好！' };
xhr.send(JSON.stringify(newStatus));

在上述代碼中，我們使用了XMLHttpRequest對象來發送POST請求，將新的狀態數據添加到數據庫中。通過設置setRequestHeader方法，我們可以設置請求頭中的Content-type為"application/json"，表示我們將發送的內容為JSON格式的數據。在請求完成后，我們將獲取到的服務器響應解析為JSON對象，并將新的狀態以列表項的形式添加到名為"statusList"的HTML元素中。

總而言之，Ajax技術使得前端與后端之間的數據傳遞更加高效和實時。通過向后端發送異步請求，前端可以獲取數據庫中的數據，并將其動態地展示在頁面上。這為改善用戶體驗提供了良好的基礎，并延伸了Web應用的功能。