AJAX（Asynchronous JavaScript and XML）是一種通過在后臺與服務器進行少量數據交換的方式，能夠在不需要刷新整個頁面的情況下更新部分網頁的技術。在前端開發中，常常會遇到一種需求：根據用戶的操作動態加載圖片，并將其賦值給元素的src屬性。通過使用AJAX異步獲取圖片并賦值給src，我們可以實現這一需求，提升用戶體驗。
假設我們有一個圖片庫，用戶在一個下拉菜單中選擇不同的圖片類別，然后會根據用戶選擇異步加載對應的圖片并更新頁面。下面是一個簡單的實現示例：
<html>
<head>
<script>
function loadImg() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'image.php?id=' + document.getElementById('imageType').value, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('image').src = xhr.responseText;
}
};
xhr.send();
}
</script>
</head>
<body>
<select id="imageType" onchange="loadImg()">
<option value="1">風景圖片</option>
<option value="2">動物圖片</option>
<option value="3">建筑圖片</option>
</select>
<img id="image" src="" alt="圖片">
</body>
</html>在以上示例中，我們首先在HTML代碼中創建了一個下拉菜單和一個元素。當用戶選擇不同的圖片類別時，調用loadImg()函數。在loadImg()函數中，我們創建了一個XMLHttpRequest對象xhr，并使用open()方法發起GET請求，請求的URL包含用戶選擇的圖片類別。通過onreadystatechange事件，監聽xhr對象的狀態變化。當xhr.readyState為4（即請求完成）且xhr.status為200（即請求成功）時，將xhr的響應文本賦值給
元素的src屬性，這樣就實現了異步加載圖片。
除了通過AJAX異步獲取圖片并賦值給src，我們還可以在用戶操作時顯示一個加載中的動畫，增加用戶的等待體驗。在下面的示例中，我們使用了一個gif動畫作為加載中效果：
<html>
<head>
<script>
function loadImg() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'image.php?id=' + document.getElementById('imageType').value, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
document.getElementById('loading').style.display = 'none';
if (xhr.status === 200) {
document.getElementById('image').src = xhr.responseText;
} else {
document.getElementById('image').src = 'error.jpg';
}
}
};
document.getElementById('loading').style.display = 'block';
xhr.send();
}
</script>
<style>
#loading {
display: none;
}
</style>
</head>
<body>
<select id="imageType" onchange="loadImg()">
<option value="1">風景圖片</option>
<option value="2">動物圖片</option>
<option value="3">建筑圖片</option>
</select>
<div id="loading">
<img src="loading.gif" alt="加載中">
</div>
<img id="image" src="" alt="圖片">
</body>
</html>在以上示例中，我們添加了一個id為"loading"的
元素，其中包含了一個loading.gif圖片。初始狀態下，
元素的display屬性值為"none"，不顯示在頁面中。當用戶選擇不同的圖片類別時，通過JavaScript設置
元素的display屬性值為"block"，顯示loading動畫。當請求完成后，無論請求成功還是失敗，都將隱藏loading動畫。若請求成功，將異步獲取到的圖片賦值給![]()
元素的src屬性；若請求失敗，將顯示一個error.jpg的默認圖片。
通過使用AJAX異步獲取圖片并賦值給src，我們可以提供用戶更好的瀏覽體驗。用戶無需等待整個頁面刷新，只需輕松選擇不同的圖片類別，即可獲取所需的圖片。同時，在展示圖片的同時，還可以通過一些加載中的動畫來給用戶一個良好的反饋，增加用戶等待的愉悅感。