AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個頁面的情況下，通過后臺與服務器進行數據交互的技術。在Web開發中，經常使用AJAX技術來實現頁面的異步加載、無刷新更新頁面內容等功能。本文將重點介紹如何使用AJAX來獲取數據庫中保存的圖片路徑，并在前端頁面上通過路徑來展示圖片。

在前端開發中，經常會遇到需要從數據庫中獲取圖片路徑的需求。比如，在一個電子商務網站上，我們可能需要展示商品的圖片，這些圖片的路徑通常都保存在后臺的數據庫中。使用AJAX技術可以方便地從數據庫中獲取這些圖片路徑，并在頁面上展示出來。

假設我們有一個商品管理系統的后臺，后臺數據庫中有一張名為"products"的表，其中一列是圖片路徑"imagePath"?，F在我們希望在前端頁面上展示出數據庫中所有商品的圖片，以下是實現該功能的代碼：

// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 使用AJAX異步請求數據
xhr.open('GET', 'get_product_images.php', true);
xhr.responseType = 'json';
xhr.onload = function() {
if (xhr.status === 200) {
var products = xhr.response;
// 遍歷商品數據
for (var i = 0; i < products.length; i++) {
var product = products[i];
// 創建圖片元素
var img = document.createElement('img');
img.src = product.imagePath;
// 添加到容器中
document.getElementById('product-container').appendChild(img);
}
}
};
// 發送AJAX請求
xhr.send();

通過以上代碼，我們可以從名為"get_product_images.php"的后臺接口中獲取商品的圖片數據，并將每個商品的圖片路徑逐個展示在頁面上。比如，我們從數據庫中獲取了2個商品的圖片路徑，那么頁面上就會展示出這2個商品的圖片。

需要注意的是，上述代碼中使用了XMLHttpRequest對象來發送AJAX請求。我們首先創建了一個XMLHttpRequest對象xhr，并使用open()方法指定后臺接口的URL和請求方式。然后通過設置onload事件來處理服務器返回的響應數據，并將響應數據轉換為JSON格式。最后，我們使用send()方法來發送AJAX請求。

另外，需要在后臺編寫名為"get_product_images.php"的接口，該接口負責從數據庫中查詢商品圖片數據，并將數據以JSON格式返回給前端。以下是一個簡單的示例代碼：

// 連接數據庫
$conn = new mysqli('localhost', 'username', 'password', 'database_name');
// 查詢商品圖片數據
$result = $conn->query('SELECT * FROM products');
// 將結果轉換為數組
$products = array();
while ($row = $result->fetch_assoc()) {
$products[] = $row;
}
// 返回JSON數據
header('Content-Type: application/json');
echo json_encode($products);

在上述示例代碼中，我們使用mysqli擴展連接到數據庫，并執行SELECT語句來查詢商品圖片數據。然后，我們將查詢結果轉換為數組，并使用json_encode()函數將結果以JSON格式輸出。最后，我們設置響應頭的Content-Type為application/json，確保前端可以正確解析返回的數據。

綜上所述，通過使用AJAX技術從數據庫中獲取圖片路徑，我們可以在前端頁面上展示出數據庫中保存的圖片。AJAX的異步交互方式使得頁面內容無需刷新就能實時更新，為用戶提供了更好的交互體驗。