AJAX（Asynchronous JavaScript and XML）是一種用于在網頁上進行異步數據交互的技術。在網頁中，登錄功能是一項非常常見的功能之一，通過使用AJAX技術，我們可以實現一個無需刷新頁面并且能夠保存用戶名的登錄功能。

舉個例子，假如我們有一個簡單的登錄頁面，包含用戶名和密碼輸入框以及一個登錄按鈕。當用戶輸入完用戶名和密碼后，點擊登錄按鈕，網頁會發送一個AJAX請求到后臺服務器驗證用戶信息。如果驗證通過，后臺服務器會返回一個成功的響應，這時我們可以使用JavaScript將用戶名保存在客戶端的Cookie中。下次用戶再次訪問頁面時，我們可以從Cookie中獲取用戶名，顯示在登錄框中，讓用戶無需重新輸入用戶名。

那么，讓我們來看一下如何使用AJAX實現這個功能：

// 使用jQuery的方法發送AJAX請求
$.ajax({
url: '/login', // 后臺登錄驗證接口
method: 'POST', // 使用POST方法發送請求
data: {
username: 'example', // 用戶輸入的用戶名
password: 'password' // 用戶輸入的密碼
},
success: function(response){
// 如果登錄成功
if(response.success){
// 使用JavaScript將用戶名保存到Cookie中
document.cookie = "username=" + response.username + "; expires=Thu, 18 Dec 2022 12:00:00 UTC; path=/";
// 其他登錄成功后的操作...
}
},
error: function(){
// 處理錯誤情況
}
});

以上代碼使用了jQuery的.ajax()方法發送了一個POST請求到后臺的/login接口。請求的數據包含了用戶輸入的用戶名和密碼。在請求成功后的回調函數中，我們可以判斷響應中的success字段來確定登錄是否成功。如果登錄成功，我們使用JavaScript將用戶名保存在Cookie中。這樣，下次用戶再次訪問頁面時，我們可以從Cookie中讀取用戶名并顯示在登錄框中。

除了使用Cookie保存用戶名，我們還可以使用其他方式來實現在登錄后保持用戶名的功能。比如，可以使用LocalStorage或者SessionStorage來存儲用戶名。LocalStorage和SessionStorage都是HTML5提供的Web存儲技術，可以方便地將數據保存在客戶端瀏覽器中。下面是一個使用LocalStorage來保存用戶名的示例：

// 使用LocalStorage保存用戶名
localStorage.setItem('username', response.username);
// 使用LocalStorage讀取用戶名
var username = localStorage.getItem('username');

以上代碼通過調用LocalStorage的setItem()方法，將用戶名保存在LocalStorage中。再次訪問頁面時，可以通過調用getItem()方法讀取用戶名并顯示在登錄框中。

總而言之，使用AJAX技術可以實現一個無需刷新頁面并且能夠保存用戶名的登錄功能。通過發送AJAX請求到后臺服務器驗證用戶信息，我們可以在登錄成功后將用戶名保存在客戶端的Cookie、LocalStorage或者SessionStorage中。這樣，用戶再次訪問頁面時，我們可以從這些存儲中讀取用戶名并顯示在登錄框中，提供更好的用戶體驗。