Ajax（Asynchronous JavaScript and XML）是一種在Web應用中使用的技術，它可以在不刷新整個頁面的情況下向服務器發送請求，并接收服務器返回的數據。通過利用Ajax，我們可以實現登錄過濾功能，以確保用戶輸入的用戶名和密碼是正確的。

登錄過濾是Web應用中非常關鍵的功能之一。當用戶登錄時，我們需要驗證用戶提供的用戶名和密碼是否匹配，以防止未授權的訪問。如果用戶輸入錯誤的用戶名或密碼，我們需要及時提醒用戶并拒絕其登錄。傳統的登錄過濾方式是通過表單提交，然后服務器驗證，再返回驗證結果給客戶端。然而，這種方式會導致整個頁面的刷新，用戶體驗不佳。通過使用Ajax，我們可以實現更加流暢和友好的登錄過濾，使用戶在不刷新整個頁面的情況下即可獲得驗證結果。

下面以一個簡單的登錄頁面為例來演示如何使用Ajax實現登錄過濾。

<form id="loginForm" method="post" action="/login">
<label for="username">用戶名：</label>
<input type="text" id="username" name="username" autofocus required><br>
<label for="password">密碼：</label>
<input type="password" id="password" name="password" required><br>
<button type="button" onclick="login()">登錄</button>
</form>
<script>
function login() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/login', 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=' + username + '&password=' + password);
}
</script>

在上面的代碼中，我們首先定義了一個表單，包含用戶名和密碼輸入框，并設置了一個登錄按鈕。當用戶點擊登錄按鈕時，會觸發login()函數。login()函數中，我們通過JavaScript獲取用戶名和密碼的值，并創建一個XMLHttpRequest對象。然后，我們使用open()方法指定請求的方法（POST）、URL（/login）和是否異步（true）。接著，我們設置HTTP請求頭中的Content-type為application/x-www-form-urlencoded，告訴服務器請求的數據是表單形式的數據。xhr.onreadystatechange函數用來監聽服務器的響應狀態，并根據響應的結果進行相應的處理。最后，通過send()方法發送請求，參數是用戶名和密碼的值。

在服務器端，我們對接收到的用戶名和密碼進行驗證，并返回驗證結果。如果用戶名和密碼匹配成功，我們返回一個包含{"success": true}的JSON對象；否則，返回一個包含{"success": false}的JSON對象。

通過使用Ajax實現登錄過濾，我們可以在用戶填寫完用戶名和密碼后，點擊登錄按鈕即可立即得到響應，而不需要等待整個頁面刷新。這樣可以提升用戶體驗，并增加Web應用的整體性能。