AJAX（Asynchronous JavaScript and XML）是一種在Web頁面中實現異步數據交互的技術。它通過在不重新加載整個頁面的情況下，向服務器發送請求，獲取數據并更新頁面的部分內容。

在實際開發中，Ajax經常和數據庫連接一起使用，以實現動態更新頁面內容。下面將介紹如何使用Ajax與數據庫進行連接，并通過示例說明。

1. 連接數據庫

首先，我們需要連接到數據庫以獲取所需的數據。比如，我們要獲取一個電子商務網站的商品信息，我們可以使用以下PHP代碼連接到數據庫：

<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "ecommerce";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
?>

在上述代碼中，我們使用mysqli庫中的mysqli類進行數據庫連接，并通過提供的服務器名稱、用戶名、密碼和數據庫名稱實現連接。如果連接失敗，將輸出錯誤消息。

2. 發送Ajax請求

接下來，我們使用JavaScript中的AJAX對象發送異步請求以獲取數據。以下是一個示例，通過AJAX從服務器獲取產品信息：

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
// 使用返回的數據更新頁面內容
}
};
xhttp.open("GET", "get_products.php", true);
xhttp.send();

上述代碼中，我們創建了一個XMLHttpRequest對象，并通過onreadystatechange事件處理程序監聽狀態改變。當狀態為4且狀態碼為200時，表示響應已經接收完成。我們可以使用responseText屬性獲取服務器返回的數據，并進行進一步處理。

3. 處理服務器請求

服務器接收到來自Ajax的請求后，需要查詢數據庫并返回所需的數據。以下是一個示例PHP代碼，用于從數據庫中獲取產品信息：

<?php
$sql = "SELECT * FROM products";
$result = $conn->query($sql);
$products = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$products[] = $row;
}
}
echo json_encode($products);
?>

在上述代碼中，我們向數據庫發送了一個查詢語句，并通過fetch_assoc()方法獲取每一行數據，并將其存儲在一個數組中。最后，我們使用json_encode()方法將該數組轉換為JSON格式，并返回給Ajax請求。

4. 更新頁面內容

當Ajax請求完成，并從服務器接收到數據后，我們可以使用JavaScript來更新頁面的內容。例如，我們可以根據收到的產品信息，動態創建HTML元素，并將其添加到頁面中的適當位置。

var productsContainer = document.getElementById("products-container");
for (var i = 0; i < response.length; i++) {
var product = response[i];
var productDiv = document.createElement("div");
productDiv.innerHTML = product.name;
productsContainer.appendChild(productDiv);
}

上述代碼使用循環遍歷從服務器接收到的產品信息，并為每個產品創建一個div元素，并將其添加到名為"products-container"的容器中。

通過以上的示例，我們可以看到如何使用Ajax與數據庫進行連接，從而實現在不刷新整個頁面的情況下，獲取并更新頁面的內容。這樣可以提升用戶體驗，并減少頁面加載時間。