AJAX (Asynchronous JavaScript and XML) 是一種用于創(chuàng)建快速、交互性的網(wǎng)頁(yè)應(yīng)用程序的技術(shù)。通過(guò)使用 AJAX，網(wǎng)頁(yè)無(wú)需刷新即可與后端服務(wù)器進(jìn)行通信，實(shí)現(xiàn)異步加載數(shù)據(jù)和更新頁(yè)面內(nèi)容。而在這個(gè)過(guò)程中，我們常常需要通過(guò) Cookie 在客戶端和服務(wù)器之間保存一些信息。

舉個(gè)例子，假設(shè)我們正在開(kāi)發(fā)一個(gè)購(gòu)物網(wǎng)站，用戶登錄后可以將商品添加到購(gòu)物車(chē)。為了記錄用戶的購(gòu)物車(chē)信息，我們可以使用 AJAX 將用戶選購(gòu)的商品發(fā)送到服務(wù)器，服務(wù)器將數(shù)據(jù)存儲(chǔ)到一個(gè) Cookie 中。這樣當(dāng)用戶瀏覽其他頁(yè)面時(shí)，我們可以通過(guò) AJAX 請(qǐng)求將 Cookie 中的購(gòu)物車(chē)信息顯示在頁(yè)面上，使用戶能夠隨時(shí)查看已選購(gòu)的商品。

下面是一個(gè)使用 AJAX 發(fā)送請(qǐng)求并設(shè)置 Cookie 的示例代碼：

// 創(chuàng)建一個(gè) AJAX 對(duì)象
var xhr = new XMLHttpRequest();
// 設(shè)置請(qǐng)求方法和 URL
xhr.open('GET', 'server.php?data=' + encodeURIComponent(data), true);
// 監(jiān)聽(tīng) AJAX 請(qǐng)求的狀態(tài)變化
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// 設(shè)置 Cookie
document.cookie = 'cart=' + xhr.responseText;
} else {
alert('請(qǐng)求失敗');
}
}
};
// 發(fā)送 AJAX 請(qǐng)求
xhr.send();

在這段代碼中，我們首先創(chuàng)建了一個(gè) XMLHttpRequest 對(duì)象。接著使用 `open` 方法設(shè)置請(qǐng)求方法為 GET，并在 URL 中附帶用戶選購(gòu)的商品數(shù)據(jù)。然后，我們監(jiān)聽(tīng) AJAX 請(qǐng)求的狀態(tài)變化，當(dāng)狀態(tài)變?yōu)?`XMLHttpRequest.DONE` 時(shí)，表示請(qǐng)求已完成。如果請(qǐng)求的狀態(tài)碼為 200，說(shuō)明請(qǐng)求成功，我們將服務(wù)器返回的購(gòu)物車(chē)信息保存到 Cookie 中。

接下來(lái)，我們可以使用以下代碼在頁(yè)面加載完畢時(shí)讀取 Cookie 中的購(gòu)物車(chē)信息，并將其顯示在頁(yè)面上：

window.onload = function() {
// 獲取 Cookie
var cart = document.cookie.replace(/(?:(?:^|.*;\s*)cart\s*\=\s*([^;]*).*$)|^.*$/, "$1");
// 顯示購(gòu)物車(chē)信息
document.getElementById('cart').innerHTML = cart;
};

在這段代碼中，我們通過(guò) `document.cookie` 獲取 Cookie 的值，并使用正則表達(dá)式將購(gòu)物車(chē)信息提取出來(lái)。然后，我們將購(gòu)物車(chē)信息顯示在頁(yè)面上，假設(shè)我們有一個(gè) `id` 為 `cart` 的元素用于顯示購(gòu)物車(chē)內(nèi)容。

通過(guò)使用 AJAX 和 Cookie，我們可以實(shí)現(xiàn)各種功能。比如，我們可以通過(guò) AJAX 將用戶的登錄狀態(tài)保存到 Cookie 中，在用戶訪問(wèn)其他頁(yè)面時(shí)驗(yàn)證用戶是否登錄。我們還可以使用 AJAX 將用戶的操作記錄發(fā)送到服務(wù)器，并存儲(chǔ)到一個(gè) Cookie 中，以便在用戶返回某個(gè)頁(yè)面時(shí)恢復(fù)到之前的操作。

總之，AJAX 和 Cookie 都是創(chuàng)建交互性網(wǎng)頁(yè)應(yīng)用程序的重要組成部分。通過(guò)結(jié)合使用它們，我們可以實(shí)現(xiàn)更多豐富、便捷的功能，提升用戶體驗(yàn)。