<p>
AJAX（Asynchronous JavaScript and XML）是一種前端技術，可以在不刷新頁面的情況下與服務器進行數據交互。在網站開發中，使用AJAX可以實現登錄功能，并在用戶成功登錄后，動態顯示用戶名。本文將通過舉例說明AJAX登錄成功后顯示用戶名的實現過程，幫助讀者更好地理解和運用AJAX技術。
</p>
<p>
首先，我們來看一個例子，假設我們有一個網站，用戶登錄后能夠查看個人資料。用戶需要在登錄界面輸入用戶名和密碼，然后點擊登錄按鈕。我們可以使用AJAX技術，將輸入的用戶名和密碼發送給服務器進行驗證，如果驗證通過，則登錄成功，頁面動態顯示用戶的用戶名；如果驗證失敗，則顯示錯誤信息。以下是一個簡單的實現代碼示例：
</p>
<pre>
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var response = xmlhttp.responseText;
if (response == "success") { // 登錄成功
document.getElementById("welcome").innerHTML = "歡迎，" + username + "！"; // 在頁面上顯示用戶名
} else { // 登錄失敗
document.getElementById("error").innerHTML = "登錄失敗，請檢查用戶名和密碼！";
}
}
};
xmlhttp.open("POST", "login.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("username=" + username + "&password=" + password);
}

在上面的示例代碼中，login函數會在用戶點擊登錄按鈕時被調用。首先，它會獲取用戶輸入的用戶名和密碼，然后創建一個XMLHttpRequest對象。然后，設置onreadystatechange事件，當服務器返回數據時，會觸發該事件。利用XMLHttpRequest對象的readyState屬性和status屬性可以判斷數據是否獲取成功。如果readyState為4且status為200，表示服務器返回數據成功。此時，我們可以根據服務器的響應內容來判斷登錄是否成功，如果返回的是"success"，則登錄成功，頁面上會顯示歡迎信息和用戶名；如果返回的不是"success"，則登錄失敗，頁面會顯示錯誤信息。 函數中的xmlhttp.open函數表示創建一個HTTP請求，其中第一個參數是請求的方法（POST），第二個參數是請求的URL地址（login.php），第三個參數表示請求是否是異步的（true）。

接下來，我們看一個更復雜一點的例子，假設我們的網站需要進行登錄后才能訪問某些頁面。在登錄成功后，我們不僅要顯示用戶名，還要使得用戶能夠訪問受限頁面。以下是一個更完整的實現代碼示例：

function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var response = xmlhttp.responseText;
if (response == "success") { // 登錄成功
document.getElementById("welcome").innerHTML = "歡迎，" + username + "！"; // 在頁面上顯示用戶名
document.getElementById("restricted").style.display = "block"; // 顯示受限頁面
} else { // 登錄失敗
document.getElementById("error").innerHTML = "登錄失敗，請檢查用戶名和密碼！";
}
}
};
xmlhttp.open("POST", "login.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("username=" + username + "&password=" + password);
}

在這個例子中，假設我們的登錄界面中還有一個受限的區域，只有登錄成功后才能顯示。在登錄成功的判斷分支中，我們使用document.getElementById函數獲取到受限區域的元素，然后設置其display樣式為"block"，使得它可以在頁面上顯示出來。這樣，用戶在登錄成功后就可以訪問到受限區域了。

通過上述例子，我們可以看到，使用AJAX技術可以實現登錄成功后顯示用戶名的效果。通過與服務器進行數據交互，我們可以實現頁面的動態更新，提供更好的用戶體驗。希望本文能幫助到讀者理解和應用AJAX技術。