AJAX（Asynchronous JavaScript and XML） 是一種在Web頁(yè)面中無(wú)需刷新的情況下與服務(wù)器進(jìn)行數(shù)據(jù)交互的技術(shù)。它為開(kāi)發(fā)人員提供了一種便捷的方式來(lái)實(shí)現(xiàn)異步加載數(shù)據(jù)，提高網(wǎng)頁(yè)性能和用戶(hù)體驗(yàn)。在Web開(kāi)發(fā)中，經(jīng)常會(huì)遇到需要?jiǎng)討B(tài)加載圖片的情況，這時(shí)候就可以使用AJAX來(lái)改變圖片的src屬性，并實(shí)現(xiàn)圖片的動(dòng)態(tài)加載。

假設(shè)我們的頁(yè)面上有一個(gè)圖片標(biāo)簽，我們希望在用戶(hù)點(diǎn)擊按鈕之后，根據(jù)用戶(hù)的選擇動(dòng)態(tài)加載不同的圖片。綁定點(diǎn)擊事件的代碼如下：

var button = document.querySelector('button');
button.addEventListener('click', function() {
// AJAX代碼
});

在點(diǎn)擊事件的回調(diào)函數(shù)中，我們可以使用AJAX來(lái)請(qǐng)求資源并修改圖片的src屬性。下面是一個(gè)示例代碼，當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，將會(huì)異步加載一張圖片。

var button = document.querySelector('button');
button.addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'image.jpg', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var blob = new Blob([this.response], {type: 'image/jpeg'});
var url = URL.createObjectURL(blob);
var img = document.querySelector('img');
img.src = url;
}
};
xhr.send();
});

在上述代碼中，我們首先創(chuàng)建一個(gè)XMLHttpRequest對(duì)象，然后使用open方法指定請(qǐng)求的資源URL，并指定該請(qǐng)求為GET方式，第三個(gè)參數(shù)設(shè)置為true表示請(qǐng)求為異步請(qǐng)求。接著，我們?cè)O(shè)置了響應(yīng)類(lèi)型為 blob，這是因?yàn)槲覀冋?qǐng)求的是圖片資源。在加載事件中，我們檢查請(qǐng)求的狀態(tài)是否為200，如果是，則創(chuàng)建一個(gè)Blob對(duì)象，并使用URL.createObjectURL方法將其轉(zhuǎn)換成URL，然后將URL賦值給圖片的src屬性，這樣就實(shí)現(xiàn)了圖片的動(dòng)態(tài)加載。

除了動(dòng)態(tài)加載圖片，我們還可以根據(jù)用戶(hù)交互來(lái)修改圖片的src屬性。例如，當(dāng)用戶(hù)輸入搜索關(guān)鍵詞時(shí)，我們可以使用AJAX向服務(wù)器請(qǐng)求與關(guān)鍵詞相關(guān)的圖片，并將返回的圖片展示在頁(yè)面上。以下是一個(gè)示例代碼：

var input = document.querySelector('input');
input.addEventListener('input', function() {
var keyword = input.value;
var xhr = new XMLHttpRequest();
xhr.open('GET', 'search.php?keyword=' + keyword, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
var blob = new Blob([this.response], {type: 'image/jpeg'});
var url = URL.createObjectURL(blob);
var img = document.querySelector('img');
img.src = url;
}
};
xhr.send();
});

上述代碼中，我們監(jiān)聽(tīng)輸入框的input事件，在事件回調(diào)函數(shù)中獲取用戶(hù)輸入的關(guān)鍵詞，并根據(jù)關(guān)鍵詞向服務(wù)器發(fā)送AJAX請(qǐng)求。服務(wù)器返回與關(guān)鍵詞相關(guān)的圖片資源后，我們同樣使用Blob對(duì)象和URL.createObjectURL方法來(lái)將圖片顯示在頁(yè)面上。

總之，AJAX技術(shù)使得動(dòng)態(tài)加載圖片成為可能。借助AJAX，我們可以通過(guò)改變圖片的src屬性來(lái)實(shí)現(xiàn)圖片的異步加載，提高用戶(hù)體驗(yàn)和頁(yè)面性能。無(wú)論是根據(jù)用戶(hù)的選擇，還是根據(jù)用戶(hù)的交互，我們都可以利用AJAX技術(shù)來(lái)動(dòng)態(tài)加載不同的圖片資源。