標題：使用Ajax給img的src賦值

簡介：在開發網頁時，有時候需要使用Ajax來動態改變圖片的顯示。本文將介紹如何使用Ajax給img的src屬性賦值，并提供一些實際的示例。

在網頁開發中，使用Ajax技術可以實現異步加載數據，從而提升用戶體驗。當需要動態改變圖片的顯示時，可以通過Ajax來完成。通常情況下，通過Ajax獲取數據后，需要將數據賦值給img標簽的src屬性，以更新圖片的顯示。

// HTML代碼
<img id="myImage" src="default.jpg" alt="默認圖片" />
// JavaScript代碼
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var imageUrl = this.responseText; // 獲取到動態圖片的URL
document.getElementById("myImage").src = imageUrl; // 將URL賦值給img的src屬性
}
};
xhttp.open("GET", "getImageUrl.php", true);
xhttp.send();

上述代碼中，首先定義了一個img標簽，其id為"myImage"，src屬性值為"default.jpg"，即默認顯示的圖片。然后使用JavaScript創建一個XMLHttpRequest對象，并設置其onreadystatechange屬性為一個回調函數。當Ajax請求的狀態發生變化時，該回調函數會被觸發。

當Ajax請求的狀態為4（即完成）且狀態碼為200（即成功）時，表示成功獲取到數據。此時，通過responseText屬性獲取到服務器返回的數據，即動態圖片的URL。然后，將獲取到的URL賦值給img標簽的src屬性，從而實現動態更新圖片的顯示。

以下是一個具體的示例，通過點擊按鈕來動態改變圖片的顯示：

// HTML代碼
<img id="myImage" src="default.jpg" alt="默認圖片" />
<button onclick="changeImage()">點擊切換圖片</button>
// JavaScript代碼
function changeImage() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var imageUrl = this.responseText; // 獲取到動態圖片的URL
document.getElementById("myImage").src = imageUrl; // 將URL賦值給img的src屬性
}
};
xhttp.open("GET", "getImageUrl.php", true);
xhttp.send();
}

在上述示例中，點擊按鈕后會調用changeImage函數。該函數與前面的代碼類似，發送一個Ajax請求，獲取到動態圖片的URL，并將其賦值給img標簽的src屬性。通過每次點擊按鈕，都會更新圖片的URL，從而實現圖片的切換。

總結：通過Ajax給img的src屬性賦值，可以實現動態更新圖片的顯示。通過獲取到動態圖片的URL，然后將其賦值給img標簽的src屬性，即可實現圖片的切換。這在開發中特別適用于需要動態加載不同圖片的情況，提升用戶體驗。