在現代的網頁應用中，用戶登錄是一個非常常見且重要的功能。為了實現用戶登錄功能，常常需要發送用戶的用戶名和密碼到服務器進行驗證。而傳統的網頁提交方式需要刷新整個頁面，用戶體驗不佳。為了提升用戶體驗，Ajax技術的出現解決了這個問題。Ajax允許我們使用異步方式發送用戶名和密碼到服務器，而無需刷新整個頁面。

舉個例子來說明。假設我們正在開發一個電子商務網站，用戶通過輸入用戶名和密碼來登錄。在傳統的網頁應用中，用戶輸入完用戶名和密碼后，需要點擊登錄按鈕，然后整個頁面會刷新，然后才能得知登錄是否成功。而使用Ajax技術后，用戶輸入用戶名和密碼后，在頁面的背后，通過Ajax發送請求到服務器進行驗證，同時頁面上的其他部分不會被刷新，用戶會立即得知登錄是否成功，并且無需等待整個頁面刷新。

下面我們給出一個簡單的示例，展示如何使用Ajax發送用戶名和密碼：

// 獲取表單元素
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置請求方式和URL
xhr.open('POST', 'login.php', true);
// 設置請求頭
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 監聽請求狀態的變化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
// 登錄成功
alert('登錄成功');
} else {
// 登錄失敗
alert('登錄失敗，請檢查用戶名和密碼');
}
}
};
// 發送請求
xhr.send('username=' + encodeURIComponent(username) + '&password=' + encodeURIComponent(password));

在上面的代碼中，我們使用了XMLHttpRequest對象來發送異步請求。首先，我們獲取了用戶名和密碼的值。然后，我們創建了一個XMLHttpRequest對象，并通過open函數指定了請求的方式和URL。接著，我們使用setRequestHeader函數設置了請求頭，確保服務器能夠正確處理請求。在onreadystatechange事件中，我們監聽了請求狀態的變化，當請求狀態為4且HTTP狀態為200時，表示請求成功。此時，我們可以通過responseText獲取服務器的響應，并根據響應結果進行相應的操作。

Ajax發送用戶名和密碼的過程是異步的，即不會阻塞其他操作。在發送請求的同時，頁面上其他的內容仍然可以正常顯示和操作。這大大提升了用戶體驗，不會給用戶帶來冗長的等待時間。

總之，Ajax技術的出現大大提升了用戶登錄功能的體驗。通過異步方式發送用戶名和密碼到服務器，無需刷新整個頁面，用戶能夠立即得知登錄結果。這種技術在現代的網頁應用中得到了廣泛的應用。