AJAX是一種強大的技術(shù)，它可以使我們在不刷新整個頁面的情況下，從服務(wù)器端獲取并顯示數(shù)據(jù)。而在本文中，我們將討論如何使用AJAX從數(shù)據(jù)庫中讀取圖片，并將這些圖片展示在網(wǎng)頁上。通過這個例子，我們將學(xué)習(xí)如何使用AJAX發(fā)送請求、從數(shù)據(jù)庫中獲取圖片數(shù)據(jù)，并使用JavaScript將這些圖片顯示在網(wǎng)頁中。

假設(shè)我們有一個數(shù)據(jù)庫，其中包含很多圖片的URLs。我們希望從這個數(shù)據(jù)庫中獲取圖片，并將這些圖片展示在網(wǎng)頁上。首先，我們需要創(chuàng)建一個用于顯示圖片的HTML元素，例如一個div元素：

<div id="image-container"></div>

接下來，我們需要編寫一段JavaScript代碼，使用AJAX從數(shù)據(jù)庫中獲取圖片數(shù)據(jù)：

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var images = JSON.parse(this.responseText);
displayImages(images);
}
};
xmlhttp.open("GET", "get_images.php", true);
xmlhttp.send();

在上面的代碼中，我們創(chuàng)建了一個XMLHttpRequest對象，并定義了一個onreadystatechange事件處理程序。當(dāng)AJAX請求的狀態(tài)發(fā)生改變時，該事件處理程序會被觸發(fā)。在這個事件處理程序中，我們通過獲取服務(wù)器的響應(yīng)文本，將其解析為一個包含圖片URLs的JavaScript數(shù)組，并調(diào)用displayImages函數(shù)來顯示這些圖片。

現(xiàn)在，我們需要編寫displayImages函數(shù)來將這些圖片顯示在網(wǎng)頁上。我們可以通過修改image-container元素的innerHTML屬性來實現(xiàn)這個目的：

function displayImages(images) {
var imageContainer = document.getElementById("image-container");
var html = "";
for (var i = 0; i< images.length; i++) {
html += '<img src="' + images[i] + '" alt="Image" />';
}
imageContainer.innerHTML = html;
}

在上面的代碼中，我們通過循環(huán)遍歷圖片URLs的數(shù)組，并使用HTML的img元素來創(chuàng)建圖片標(biāo)簽。然后，將這些圖片標(biāo)簽的HTML代碼存儲在一個變量中，并將這個變量的值賦給imageContainer元素的innerHTML屬性。這樣，所有的圖片將會顯示在網(wǎng)頁上。

現(xiàn)在，我們需要創(chuàng)建服務(wù)器端的代碼來從數(shù)據(jù)庫中獲取圖片數(shù)據(jù)。我們可以使用PHP來完成這個任務(wù)。首先，我們創(chuàng)建一個get_images.php文件，并編寫以下代碼：

<?php
// 連接到數(shù)據(jù)庫
$conn = mysqli_connect("localhost", "username", "password", "database");
// 查詢圖片數(shù)據(jù)
$query = "SELECT image_url FROM images";
$result = mysqli_query($conn, $query);
// 創(chuàng)建一個數(shù)組來存儲圖片URLs
$images = array();
// 將查詢結(jié)果中的圖片URLs保存到數(shù)組中
while ($row = mysqli_fetch_assoc($result)) {
$images[] = $row['image_url'];
}
// 返回圖片URLs的JSON字符串
echo json_encode($images);
// 關(guān)閉數(shù)據(jù)庫連接
mysqli_close($conn);
?>

在上面的代碼中，我們首先連接到數(shù)據(jù)庫，并執(zhí)行一個查詢，以獲取圖片URLs的結(jié)果集。然后，我們創(chuàng)建一個空數(shù)組，并將查詢結(jié)果中的圖片URLs保存到這個數(shù)組中。最后，我們使用json_encode函數(shù)將數(shù)組轉(zhuǎn)換為JSON字符串，并將其輸出到客戶端。

通過以上的步驟，我們成功地使用AJAX從數(shù)據(jù)庫中讀取了圖片，并將這些圖片展示在網(wǎng)頁上。這個例子不僅幫助我們理解了AJAX的使用，還展示了如何在網(wǎng)頁上動態(tài)加載圖片，以及如何通過服務(wù)器端代碼來獲取數(shù)據(jù)庫中的數(shù)據(jù)。