在現代的網頁開發中，很多時候我們需要從數據庫中獲取數據，并將數據實時地展示在頁面上。為了實現這一功能，我們通常會使用AJAX技術。AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個頁面的情況下，通過后臺與服務器進行數據交互的技術。本文將簡要介紹如何使用AJAX從數據庫中獲取數據，并將其展示在網頁上。
AJAX的工作原理如下：當發送數據請求時，JavaScript會創建一個XMLHttpRequest對象，并將請求發送到服務器。服務器收到請求后，會根據請求的參數進行處理，并將數據返回給前端。JavaScript在收到數據后，可以通過回調函數將數據展示在網頁上。
舉個例子來說明：假設我們有一個網站，用戶可以在頁面上搜索并顯示相關的商品信息。當用戶輸入關鍵詞并點擊搜索按鈕后，頁面會通過AJAX技術將關鍵詞發送給服務器，服務器會根據關鍵詞從數據庫中查詢相關的商品信息，并將查詢結果返回給前端。前端再利用JavaScript將查詢結果展示在網頁上，用戶可以直接看到相關的商品信息。
現在讓我們來看一下實現這個功能的具體步驟。首先，在頁面中添加一個搜索框和一個搜索按鈕，用戶可以輸入關鍵詞并點擊按鈕來觸發搜索操作。例如：

<input type="text" id="keyword" placeholder="請輸入關鍵詞">
<button onclick="search()">搜索</button>
<div id="result"></div>

然后，在JavaScript中定義一個名為search的函數，用于處理搜索操作。函數內部首先獲取輸入框中的關鍵詞，并將其發送到服務器。例如：

function search() {
var keyword = document.getElementById("keyword").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "/search?keyword=" + keyword, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var resultDiv = document.getElementById("result");
resultDiv.innerHTML = "";
for (var i = 0; i < response.length; i++) {
var product = response[i];
var pTag = document.createElement("p");
pTag.innerHTML = "商品名：" + product.name + " 價格：" + product.price;
resultDiv.appendChild(pTag);
}
}
};
xhr.send();
}

在函數內部，我們首先獲取輸入框中的關鍵詞，然后創建一個XMLHttpRequest對象，打開與服務器的連接，并將關鍵詞作為查詢參數附加在URL中。接下來，我們定義一個回調函數，當XMLHttpRequest對象的狀態發生變化時會被觸發。在回調函數中，我們首先檢查請求是否成功，然后將從服務器返回的數據解析成JSON格式，并將查詢結果展示在頁面上。
在服務器端，我們需要相應地處理搜索請求，并從數據庫中獲取相關的數據。以Node.js為例，我們可以使用Express框架來實現這個功能。首先，在后端代碼中引入相關的庫：

const express = require("express");
const app = express();
const mysql = require("mysql");

然后，創建一個與數據庫的連接，并定義一個用于處理搜索請求的路由。例如：

const connection = mysql.createConnection({
host: "localhost",
user: "root",
password: "password",
database: "mydb"
});
app.get("/search", function(req, res) {
var keyword = req.query.keyword;
connection.query("SELECT * FROM products WHERE name LIKE ?",
["%" + keyword + "%"],
function(err, results, fields) {
if (err) throw err;
res.json(results);
});
});
app.listen(3000, function() {
console.log("Server is running on port 3000");
});

在路由中，我們首先從請求中獲取關鍵詞，然后使用MySQL查詢語句從數據庫中查詢相關的商品信息。查詢結果以JSON格式返回給前端。
綜上所述，通過AJAX技術我們可以輕松地從數據庫中獲取數據，并將數據實時地展示在網頁上。無論是搜索功能還是其他類似的實時數據展示功能，AJAX都是一個非常有用的技術。希望本文的內容可以對大家有所幫助。