本文將介紹如何使用Ajax技術從數據庫中獲取記錄。Ajax (Asynchronous JavaScript and XML) 是一種在不重新加載整個頁面的情況下更新部分頁面內容的技術。它通過與服務器進行異步通信，可以實現在不刷新頁面的情況下獲取最新的數據。

假設我們有一個在線商店網站，在后臺有一個數據庫存儲了所有商品的信息。為了提供更好的用戶體驗，我們希望在用戶瀏覽網站時動態地加載商品信息而不會導致頁面刷新。這時候，我們可以使用Ajax來實現這個功能。

首先，我們需要一個服務器端的腳本來處理Ajax請求，并從數據庫中獲取商品信息。例如，假設我們使用PHP作為服務器端腳本語言，可以創建一個名為get_products.php的文件來處理Ajax請求。

<?php
// 連接數據庫
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連接是否成功
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
}
// 獲取商品信息
$sql = "SELECT * FROM products";
$result = $conn->query($sql);
// 將查詢結果轉換為JSON格式并返回
$products = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$products[] = $row;
}
}
echo json_encode($products);
// 關閉數據庫連接
$conn->close();
?>

在使用Ajax時，我們需要在前端編寫JavaScript代碼來發送異步請求，并處理返回的數據。我們可以使用JavaScript內置的XMLHttpRequest對象來實現這個功能。以下是一個簡單的示例：

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 配置請求信息
xhr.open("GET", "get_products.php", true);
// 發送請求
xhr.send();
// 監聽請求狀態變化
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 請求成功，處理返回的數據
var products = JSON.parse(xhr.responseText);
// 在頁面上顯示商品信息
for (var i = 0; i < products.length; i++) {
var product = products[i];
var productId = product.id;
var productName = product.name;
var productPrice = product.price;
// 顯示商品信息的代碼...
}
}
};

在以上的JavaScript代碼中，我們首先創建了一個XMLHttpRequest對象，并使用open方法配置了請求信息，指定了服務器端的腳本地址。然后，我們使用send方法發送請求。接著，我們監聽了XMLHttpRequest對象的onreadystatechange事件，在事件回調函數中處理返回的數據。

返回的數據通過xhr.responseText屬性獲取，這里我們假設返回的數據是一個數組，其中每個元素都是一個表示商品信息的對象。我們可以使用JSON.parse方法將字符串解析為JavaScript對象數組，然后在頁面上根據數據顯示商品信息。

通過上述的示例，我們實現了使用Ajax技術從數據庫中獲取記錄的功能。通過在前端發送異步請求，并在后端處理請求并返回數據，我們可以在不刷新頁面的情況下動態地獲取最新的記錄。這大大提升了用戶體驗，使得網站更加流暢和實時。