在Web開發中，使用AJAX（Asynchronous JavaScript and XML）是一種常見的技術，它可以實現頁面與服務器之間的異步通信，無需刷新整個頁面即可更新部分內容。其中，改變圖片的src是一項基本的功能需求。本文將介紹如何通過AJAX來改變圖片的src，以及一些實際應用的舉例。

首先，我們可以通過AJAX發送一個HTTP請求到服務器，獲取新的圖片地址。然后，使用JavaScript將這個新的圖片地址賦值給標簽的src屬性，即可改變圖片的展示。下面是一個簡單的示例：

1. HTML部分：
<img id="image" src="default.jpg" alt="default image">
<button onclick="changeImage()">更換圖片</button>
2. JavaScript部分：
function changeImage() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var newImageSrc = xhr.responseText;  // 假設服務器返回的是圖片URL
document.getElementById("image").src = newImageSrc;
}
};
xhr.open("GET", "get_new_image.php", true);  // 假設有個get_new_image.php文件處理請求
xhr.send();
}

以上代碼中，當點擊按鈕時，會調用changeImage()函數。該函數使用AJAX發送一個GET請求到服務器，并在返回響應后將新的圖片地址賦值給標簽的src屬性。這樣，圖片就會重新加載，展示為服務器返回的新圖片。

除了簡單地更換圖片，我們還可以根據一些條件或事件來動態改變圖片的src。例如，根據用戶的選擇來展示不同的圖片。下面是一個示例：

1. HTML部分：
<select id="imageSelector" onchange="changeImage()">
<option value="image1.jpg">圖片1</option>
<option value="image2.jpg">圖片2</option>
<option value="image3.jpg">圖片3</option>
</select>
<img id="dynamicImage" src="default.jpg" alt="default image">
2. JavaScript部分：
function changeImage() {
var selector = document.getElementById("imageSelector");
var selectedImage = selector.options[selector.selectedIndex].value;
document.getElementById("dynamicImage").src = selectedImage;
}

上述示例中，當用戶選擇下拉列表中的一個選項時，會調用changeImage()函數。該函數通過獲取選中選項的值，將對應的圖片地址賦值給標簽的src屬性。這樣，圖片就會根據用戶的選擇動態改變。

綜上所述，通過AJAX可以很方便地改變圖片的src，只需發送HTTP請求并在返回響應后更新圖片標簽的src屬性即可。通過這種方式，我們可以實現圖片的動態加載和展示，提升用戶體驗。