色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

ajax異步獲取圖片賦值是src

Ajax

AJAX（Asynchronous JavaScript and XML）是一種通過在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換的方式，能夠在不需要刷新整個(gè)頁面的情況下更新部分網(wǎng)頁的技術(shù)。在前端開發(fā)中，常常會(huì)遇到一種需求：根據(jù)用戶的操作動(dòng)態(tài)加載圖片，并將其賦值給元素的src屬性。通過使用AJAX異步獲取圖片并賦值給src，我們可以實(shí)現(xiàn)這一需求，提升用戶體驗(yàn)。

假設(shè)我們有一個(gè)圖片庫，用戶在一個(gè)下拉菜單中選擇不同的圖片類別，然后會(huì)根據(jù)用戶選擇異步加載對(duì)應(yīng)的圖片并更新頁面。下面是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)示例：

<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">風(fēng)景圖片</option>
<option value="2">動(dòng)物圖片</option>
<option value="3">建筑圖片</option>
</select>
<img id="image" src="" alt="圖片">
</body>
</html>

在以上示例中，我們首先在HTML代碼中創(chuàng)建了一個(gè)下拉菜單和一個(gè)元素。當(dāng)用戶選擇不同的圖片類別時(shí)，調(diào)用loadImg()函數(shù)。在loadImg()函數(shù)中，我們創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象xhr，并使用open()方法發(fā)起GET請(qǐng)求，請(qǐng)求的URL包含用戶選擇的圖片類別。通過onreadystatechange事件，監(jiān)聽xhr對(duì)象的狀態(tài)變化。當(dāng)xhr.readyState為4（即請(qǐng)求完成）且xhr.status為200（即請(qǐng)求成功）時(shí)，將xhr的響應(yīng)文本賦值給元素的src屬性，這樣就實(shí)現(xiàn)了異步加載圖片。

除了通過AJAX異步獲取圖片并賦值給src，我們還可以在用戶操作時(shí)顯示一個(gè)加載中的動(dòng)畫，增加用戶的等待體驗(yàn)。在下面的示例中，我們使用了一個(gè)gif動(dòng)畫作為加載中效果：

<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">風(fēng)景圖片</option>
<option value="2">動(dòng)物圖片</option>
<option value="3">建筑圖片</option>
</select>
<div id="loading">
<img src="loading.gif" alt="加載中">
</div>
<img id="image" src="" alt="圖片">
</body>
</html>

在以上示例中，我們添加了一個(gè)id為"loading"的

元素，其中包含了一個(gè)loading.gif圖片。初始狀態(tài)下，
元素的display屬性值為"none"，不顯示在頁面中。當(dāng)用戶選擇不同的圖片類別時(shí)，通過JavaScript設(shè)置
元素的display屬性值為"block"，顯示loading動(dòng)畫。當(dāng)請(qǐng)求完成后，無論請(qǐng)求成功還是失敗，都將隱藏loading動(dòng)畫。若請(qǐng)求成功，將異步獲取到的圖片賦值給元素的src屬性；若請(qǐng)求失敗，將顯示一個(gè)error.jpg的默認(rèn)圖片。

通過使用AJAX異步獲取圖片并賦值給src，我們可以提供用戶更好的瀏覽體驗(yàn)。用戶無需等待整個(gè)頁面刷新，只需輕松選擇不同的圖片類別，即可獲取所需的圖片。同時(shí)，在展示圖片的同時(shí)，還可以通過一些加載中的動(dòng)畫來給用戶一個(gè)良好的反饋，增加用戶等待的愉悅感。