AJAX（Asynchronous JavaScript and XML）是一種常用于構建交互式Web應用程序的技術。通過使用AJAX，我們可以實現用戶關注和取消關注功能，在不刷新整個頁面的情況下更新特定部分的內容。本文將介紹如何使用AJAX來實現關注和取消關注功能的例子。

假設我們正在開發一個社交媒體網站，用戶可以關注其他用戶并獲取他們的最新動態。我們希望在用戶點擊關注按鈕后，用戶的關注狀態能夠立即更新，而無需刷新整個頁面。同時，用戶還可以隨時取消關注，這也需要使用AJAX來實現。

為了實現關注和取消關注功能，我們首先需要將用戶的關注狀態保存在數據庫中。在用戶點擊關注按鈕時，我們將向服務器發送一個AJAX請求，告訴服務器當前用戶關注了哪個用戶。服務器在接收到請求后將更新數據庫中的關注列表，并返回一個成功的響應。接下來，我們使用AJAX來獲取關注列表，并根據返回結果更新頁面上的關注狀態。

// HTML 代碼
<button id="followBtn" onclick="toggleFollow()">關注</button>
// JavaScript 代碼
function toggleFollow() {
var userId = '123'; // 當前用戶的 ID
var followingUserId = '456'; // 被關注用戶的 ID
var followBtn = document.getElementById('followBtn');
if (followBtn.innerText === '關注') {
// 關注用戶
var xhr = new XMLHttpRequest();
xhr.open('POST', '/follow', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
followBtn.innerText = '取消關注';
}
};
xhr.send(JSON.stringify({
userId: userId,
followingUserId: followingUserId
}));
} else {
// 取消關注用戶
var xhr = new XMLHttpRequest();
xhr.open('POST', '/unfollow', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
followBtn.innerText = '關注';
}
};
xhr.send(JSON.stringify({
userId: userId,
followingUserId: followingUserId
}));
}
}

在以上代碼中，我們使用XMLHttpRequest對象發送AJAX請求來更新關注狀態。當用戶點擊關注按鈕時，我們會向服務器發送一個包含userId和followingUserId的JSON對象。服務器接收到請求后，會將這些信息插入關注列表中，并返回一個成功的響應。

為了實時更新關注狀態，我們還需要使用另一個AJAX請求來獲取關注列表。當用戶成功關注或取消關注后，我們將向服務器發送一個獲取關注列表的AJAX請求。服務器將會返回當前用戶關注的用戶列表。接下來，我們將根據返回的結果來更新關注按鈕的文本。

// JavaScript 代碼
function getFollowingList() {
var userId = '123'; // 當前用戶的 ID
var xhr = new XMLHttpRequest();
xhr.open('GET', '/following-list?userId=' + userId, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var followingList = JSON.parse(xhr.responseText);
var followBtn = document.getElementById('followBtn');
if (followingList.includes(followingUserId)) {
followBtn.innerText = '取消關注';
} else {
followBtn.innerText = '關注';
}
}
};
xhr.send();
}

在以上代碼中，我們向服務器發送一個獲取關注列表的GET請求，并將返回的結果解析為JSON對象。我們將當前用戶關注的用戶列表與被關注用戶ID進行比較，從而確定當前按鈕顯示的文本是“關注”還是“取消關注”。

通過上述示例，我們成功地使用AJAX來實現了關注和取消關注功能。如此一來，當用戶點擊關注按鈕時，頁面將會實時更新關注狀態，而無需刷新整個頁面。這種交互性和實時性能夠提升用戶體驗，并使得社交媒體網站更加便捷和易用。