AJAX（Asynchronous JavaScript and XML）是一種能夠在不重新加載整個頁面的情況下，通過后臺和服務器進行數據交互的技術。本文將介紹如何使用AJAX實現登錄驗證并動態顯示圖片。通過這種方式，用戶可以在登錄頁面輸入用戶名和密碼，通過AJAX發送驗證請求給服務器，服務器返回驗證結果后，頁面會相應地顯示不同的圖片。通過舉例說明，我們將看到AJAX的強大功能和靈活性。

首先，我們需要在HTML頁面中創建一個登錄表單，包含用戶名和密碼的輸入框，以及一個提交按鈕。當用戶點擊提交按鈕時，我們將通過AJAX發送登錄請求給服務器。下面是一個簡單的例子：

<form id="login-form" onsubmit="return false;">
<input type="text" id="username" placeholder="用戶名" /><br />
<input type="password" id="password" placeholder="密碼" /><br />
<button onclick="login()">登錄</button>
</form>

接下來，我們需要編寫一個處理登錄請求的函數。該函數將獲取用戶名和密碼輸入框的值，并通過AJAX發送POST請求給服務器。服務器將驗證用戶名和密碼，并返回結果。下面是一個簡單的例子：

function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
if (response.success) {
document.getElementById("login-form").innerHTML = "登錄成功！";
} else {
document.getElementById("login-form").innerHTML = "用戶名或密碼錯誤！";
}
}
};
xhttp.open("POST", "login.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("username=" + username + "&password=" + password);
}

在上面的例子中，我們首先獲取用戶名和密碼輸入框的值，然后創建一個XMLHttpRequest對象，設置其onreadystatechange事件處理程序。當服務器響應就緒時，我們解析響應內容，并根據驗證結果更新頁面。如果驗證成功，我們顯示"登錄成功！"，否則顯示"用戶名或密碼錯誤！"。

最后，我們需要根據不同的登錄結果來顯示不同的圖片。我們可以在登錄成功后，通過AJAX再次向服務器發送請求，獲取相應的圖片URL，并將該URL插入到頁面中的某個元素中。下面是一個簡單的例子：

if (response.success) {
var image = new Image();
image.src = response.imageUrl;
document.getElementById("image-container").appendChild(image);
}

在上面的例子中，我們創建了一個新的Image對象，設置其src屬性為從服務器返回的圖片URL。然后，我們將該圖片插入到頁面中的名為"image-container"的元素中。通過這種方式，我們可以根據不同的登錄結果，動態地顯示不同的圖片。

通過以上的例子，我們可以看到AJAX在實現登錄驗證并顯示圖片方面的強大功能和靈活性。通過發送異步的請求，我們可以與后臺進行實時的數據交互，并根據返回結果動態地更新頁面。這種交互性和實時性，將為用戶帶來更好的體驗和更多的可能性。無論是登錄驗證、動態顯示圖片，還是其他各種場景，AJAX都是一種非常值得使用的技術。