AJAX登錄驗證是一種常用的技術，通過AJAX技術可以在用戶輸入用戶名和密碼后，實時地向服務器發送請求進行驗證，而無需刷新整個頁面。在驗證成功的情況下，我們可以使用cookie來保存用戶的登錄狀態，方便用戶下次訪問時能夠直接登錄。下面我們將介紹如何使用AJAX登錄驗證并保存cookie。

假設有一個登錄頁面，其中包含一個用戶名輸入框和一個密碼輸入框，并有一個按鈕用于提交。我們希望在用戶輸入用戶名和密碼后，點擊提交按鈕時，通過AJAX發送請求到服務器驗證用戶名和密碼的正確性。

function login() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
// 發送AJAX請求
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var response = JSON.parse(this.responseText);
if (response.success) {
// 驗證成功，保存cookie
document.cookie = "username=" + encodeURIComponent(username);
document.cookie = "password=" + encodeURIComponent(password);
console.log("登錄成功");
} else {
console.log("用戶名或密碼錯誤");
}
}
};
xhttp.open("POST", "login.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("username=" + username + "&password=" + password);
}

上述代碼中，我們先獲取了用戶名和密碼的值，然后使用XMLHttpRequest對象發送POST請求到服務器的login.php頁面。在AJAX的回調函數中，根據服務器返回的響應進行判斷。如果驗證成功，我們會將用戶名和密碼保存到cookie中，以便下次訪問時可以直接登錄。

接下來，讓我們看一下如何在登錄頁面中讀取保存的cookie，并判斷當前是否已登錄。

function checkLogin() {
var cookies = document.cookie.split(';');
var logged = false;
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf('username=') == 0 && cookie.indexOf('password=') > -1) {
// 已保存用戶名和密碼的cookie存在，代表已登錄
logged = true;
break;
}
}
if (logged) {
console.log("已登錄");
} else {
console.log("未登錄");
}
}

在上述代碼中，我們通過document.cookie獲取所有保存在cookie中的鍵值對，并使用split(';')方法將其拆分成一個個cookie。然后，我們遍歷每個cookie，判斷是否有保存用戶名和密碼的cookie存在。如果存在，則說明用戶已經登錄；否則，說明用戶未登錄。

綜上所述，通過AJAX登錄驗證，我們可以在用戶輸入用戶名和密碼后實時地向服務器發送請求進行驗證，并能夠方便地保存用戶的登錄狀態。這種方式不僅提升了用戶體驗，還增加了網站的安全性。