現今互聯網發展迅速，越來越多的網站采用了AJAX（Asynchronous JavaScript and XML）技術來提升用戶體驗。其中，通過AJAX技術加載數據并顯示圖片是一種常見的應用。通過異步加載數據，用戶可以更快地獲取所需的信息，而不需要等待整個頁面加載完畢。本文將詳細介紹如何使用AJAX加載數據顯示圖片，并通過舉例來說明其實際應用。

首先，為了使用AJAX加載數據顯示圖片，我們需要準備一些基本的HTML和CSS代碼。我們可以創建一個包含兩個按鈕和一個圖片容器的頁面，并設置相關的CSS樣式。具體代碼如下：

<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 500px;
width: 500px;
border: 1px solid #ccc;
background-color: #f5f5f5;
}
.image-container {
display: none;
max-width: 100%;
max-height: 100%;
}
</style>
<div class="container">
<img id="image" class="image-container" src="#" alt="Image">
</div>
<button id="load-image" onclick="loadImage()">加載圖片</button>
<button id="clear-image" onclick="clearImage()">清除圖片</button>

以上代碼中，我們創建了一個名為"container"的容器，用于展示圖片。在默認情況下，"image"的顯示狀態被設置為"none"，以隱藏圖片。此外，我們還添加了兩個按鈕，一個用于加載圖片，另一個用于清除圖片。

接下來，我們需要使用JavaScript來實現AJAX加載數據顯示圖片的功能。具體實現步驟如下：

1. 創建一個函數"loadImage"，用于加載圖片。
2. 在該函數中，首先獲取到"image"元素和圖片容器"container"。
3. 使用AJAX技術發送異步請求，并在成功回調函數中獲取到返回的圖片URL。
4. 將獲取到的圖片URL賦值給"image"的"src"屬性，并將"container"的顯示狀態設置為"block"。

具體實現代碼如下：

function loadImage() {
var image = document.getElementById('image');
var container = document.querySelector('.container');
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/image_url', true);
xhr.onload = function() {
if (xhr.status === 200) {
image.src = xhr.responseText;
container.style.display = 'block';
} else {
console.log('Error: ' + xhr.status);
}
};
xhr.send();
}

通過以上代碼，當用戶點擊"加載圖片"按鈕時，將發送AJAX請求獲取到圖片URL，并將圖片顯示在頁面上。

另外，我們還可以添加一個"clearImage"函數用于清除已加載的圖片，并隱藏圖片容器。具體實現代碼如下：

function clearImage() {
var image = document.getElementById('image');
var container = document.querySelector('.container');
image.src = '#';
container.style.display = 'none';
}

通過以上代碼，當用戶點擊"清除圖片"按鈕時，將清除已加載的圖片，并隱藏圖片容器。

綜上所述，通過AJAX加載數據顯示圖片是一種提升用戶體驗的有效方式。用戶可以通過異步請求更快地獲取到所需的圖片，并在頁面上進行展示。通過本文的詳細介紹和示例代碼，相信讀者對使用AJAX加載數據顯示圖片有了更清晰的理解。