AJAX是一種在網頁中無需刷新整個頁面的情況下，通過后臺服務器進行異步數據交互的技術。它使得網站能夠更加流暢地響應用戶的操作，并提升用戶體驗。在開發過程中，我們常常需要用戶進行登錄才能使用一些功能。而為了保持用戶登錄狀態的連續性，我們可以使用Cookie來存儲用戶的登錄信息。本文將介紹如何使用AJAX登錄并存儲Cookie，以及如何在后續請求中利用Cookie來維持用戶登錄狀態。

首先，我們需要為用戶提供一個登錄頁面，在這個頁面上用戶可以輸入用戶名和密碼進行登錄。登錄表單的HTML代碼如下：

<form id="loginForm" action="/login" method="post">
<input type="text" name="username" placeholder="用戶名"><br>
<input type="password" name="password" placeholder="密碼"><br>
<button type="submit">登錄</button>
</form>

當用戶點擊登錄按鈕時，我們可以通過AJAX將表單數據發送給服務器進行驗證。下面是一個使用jQuery進行AJAX登錄請求的示例代碼：

$(document).ready(function() {
$('#loginForm').submit(function(event) {
event.preventDefault(); // 阻止表單默認提交行為
var formData = {
username: $('input[name="username"]').val(),
password: $('input[name="password"]').val()
};
$.ajax({
url: '/login',
type: 'POST',
data: formData,
success: function(response) {
if (response.success) {
// 登錄成功，存儲Cookie
document.cookie = 'token=' + response.token + '; expires=' + response.expires + '; path=/';
alert('登錄成功！');
} else {
alert('登錄失敗，請重試！');
}
}
});
});
});

在服務器端，我們需要驗證用戶提供的用戶名和密碼是否正確。如果驗證通過，服務器可以生成一個令牌（token）并將其與過期時間（expires）一起返回給客戶端。客戶端通過存儲這個令牌的Cookie，在后續的請求中可以將其發送給服務器以表明用戶的登錄狀態。

假設用戶成功登錄后，下一步我們可以通過發送帶有Cookie的AJAX請求來獲取用戶的個人信息。以下是一個獲取用戶信息的簡單示例：

$(document).ready(function() {
$.ajax({
url: '/user',
type: 'GET',
headers: {
'Authorization': 'Bearer ' + getCookie('token')
},
success: function(response) {
if (response.loggedIn) {
// 用戶已登錄，顯示用戶信息
$('#userInfo').text('歡迎，' + response.username + '！');
} else {
// 用戶未登錄
$('#userInfo').text('請先登錄！');
}
}
});
});
// 獲取指定名稱的Cookie值
function getCookie(name) {
var cookies = document.cookie.split(';');
for (var i = 0; i< cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(name) === 0) {
return cookie.substring(name.length + 1, cookie.length);
}
}
return '';
}

上述代碼中，我們通過getCookie函數獲取了存儲在Token中的值，并將其作為請求的Authorization頭字段的值進行發送。服務器可以通過解析Authorization頭字段來驗證用戶的登錄狀態，并返回相應的響應結果。

總結起來，使用AJAX登錄并存儲Cookie是一種保持用戶登錄狀態的常見做法。通過將令牌存儲在Cookie中，我們可以在后續的請求中使用它來驗證和維持用戶的登錄狀態。這樣就能夠使得網站更加流暢地響應用戶的操作，并提升用戶的體驗。