AJAX（Asynchronous JavaScript and XML）是一種用于在后臺與服務器進行異步通信的技術，常用于實現網站的動態更新。在網站開發中，登錄頁面是最常見的功能之一。本文將介紹如何使用AJAX實現登錄功能，并根據登錄狀態來顯示不同的圖片。

當用戶成功登錄后，我們希望能夠根據用戶的登錄狀態來顯示不同的圖片。比如，如果用戶已經登錄，則顯示一張歡迎圖片；如果用戶未登錄，則顯示一張默認圖片。

首先，我們需要在HTML頁面中添加一個用于顯示圖片的元素：

<div id="image-container">
<img id="image" src="" alt="Image">
</div>

然后，在JavaScript文件中編寫AJAX代碼來實現登錄功能：

function login(username, password) {
// 創建一個AJAX對象
var xhr = new XMLHttpRequest();
// 監聽AJAX狀態改變事件
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 登錄成功，根據返回的登錄狀態顯示對應的圖片
var response = JSON.parse(xhr.responseText);
if (response.status === "success") {
document.getElementById("image").src = "welcome_image.jpg";
} else {
document.getElementById("image").src = "default_image.jpg";
}
} else {
// 處理錯誤
}
}
};
// 設置AJAX請求的參數
var url = "login.php";
var params = "username=" + username + "&password=" + password;
// 發送AJAX請求
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(params);
}

在上面的代碼中，我們首先創建了一個XMLHttpRequest對象，然后監聽其狀態變化。當AJAX請求成功返回時，我們解析返回的結果，并根據登錄狀態來顯示相應的圖片。登錄成功后，將圖片的src屬性指定為歡迎圖片的路徑；登錄失敗則指定為默認圖片的路徑。

在服務器端，我們需要使用一個PHP文件來處理登錄請求。以下是一個簡單的登錄處理代碼示例：

<?php
$username = $_POST["username"];
$password = $_POST["password"];
// 假設這里有驗證登錄的邏輯
if ($username === "admin" && $password === "password") {
$response = array("status" => "success");
} else {
$response = array("status" => "failure");
}
echo json_encode($response);
?>

上述代碼中，我們首先獲取客戶端傳遞的用戶名和密碼，然后根據登錄驗證的邏輯進行判斷。如果驗證通過，將返回一個包含登錄狀態的JSON對象；否則返回一個登錄失敗的JSON對象。最后，使用json_encode函數將結果轉換為JSON字符串并返回給客戶端。

通過使用AJAX實現登錄功能，并根據登錄狀態顯示不同的圖片，可以提升用戶體驗和網站的互動性。用戶登錄后能立即看到相應的圖片，增強了用戶對網站的歸屬感和滿意度。