AJAX（Asynchronous JavaScript and XML）是一種基于 Web 技術(shù)的應(yīng)用程序設(shè)計(jì)模式，它可以實(shí)現(xiàn)無刷新加載圖片。通過使用 AJAX，網(wǎng)頁可以異步地從服務(wù)器加載圖片，并將其插入到頁面中的指定位置，而不需要刷新整個(gè)頁面。這種無刷新加載圖片的方式給用戶帶來了更好的體驗(yàn)，同時(shí)也減輕了服務(wù)器的負(fù)擔(dān)。

舉個(gè)例子來說明，假設(shè)我們正在開發(fā)一個(gè)在線相冊的網(wǎng)站。當(dāng)用戶瀏覽相冊時(shí)，我們希望能夠無刷新地加載每張圖片，而不需要重新加載整個(gè)頁面。這樣用戶就可以流暢地瀏覽相冊，不會有任何的中斷或延遲。通過使用 AJAX，我們可以實(shí)現(xiàn)這個(gè)需求。

// JavaScript 代碼示例
function loadNextImage() {
// 創(chuàng)建一個(gè) XMLHttpRequest 對象
var xhr = new XMLHttpRequest();
// 監(jiān)聽 XMLHttpRequest 的 readyState 和 onreadystatechange 事件
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 將返回的圖片數(shù)據(jù)插入到頁面中的指定位置
var image = document.createElement('img');
image.src = xhr.responseText;
document.getElementById('photo-wrapper').appendChild(image);
}
};
// 發(fā)送異步請求，獲取下一張圖片的地址
xhr.open('GET', 'get_next_image.php', true);
xhr.send();
}
// 在頁面加載完成后調(diào)用函數(shù)，開始加載第一張圖片
window.onload = function() {
loadNextImage();
};

在上述的代碼示例中，我們先創(chuàng)建了一個(gè) XMLHttpRequest 對象，用于發(fā)送異步請求。然后，我們通過監(jiān)聽該對象的 readyState 和 onreadystatechange 事件來獲取服務(wù)器返回的圖片數(shù)據(jù)。在 readyState 為 XMLHttpRequest.DONE（表示請求已完成）且狀態(tài)碼為 200（表示請求成功）時(shí)，我們將返回的圖片數(shù)據(jù)插入到頁面中的指定位置。最后，我們通過調(diào)用 loadNextImage 函數(shù)來開始加載下一張圖片。

通過使用這種方式，我們可以實(shí)現(xiàn)在用戶瀏覽相冊時(shí)無需刷新整個(gè)頁面就能無縫加載圖片的效果。這樣一來，用戶就可以流暢地瀏覽相冊，而不會受到頁面刷新帶來的中斷或延遲。

總而言之，通過使用 AJAX，我們可以實(shí)現(xiàn)無刷新加載圖片的效果，為用戶帶來更好的體驗(yàn)。在開發(fā)網(wǎng)站或應(yīng)用程序時(shí)，我們可以利用這一技術(shù)來提升用戶界面的交互性和響應(yīng)速度。