AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個頁面的情況下，通過后臺與服務器交換數據并更新頁面的技術。在Web開發中，局部刷新和添加數據是常見的需求，通過AJAX可以實現這一功能。本文將通過舉例說明AJAX局部刷新并添加數據的實現過程。

假設我們正在開發一個博客系統，頁面上有一個文章列表，用戶可以通過點擊按鈕添加新的文章。在使用AJAX實現局部刷新之前，我們可以通過傳統的方式實現添加文章的功能。當用戶點擊添加按鈕時，后臺處理接收到的請求，并將新的文章數據返回給前端。前端通過重新加載整個頁面，來顯示最新的文章列表。這種方式實現了添加文章的功能，但用戶體驗不佳，整個頁面的刷新會導致頁面的閃爍，并且重新加載所有內容會消耗大量的帶寬。

接下來，我們將使用AJAX來實現局部刷新并添加數據的功能。首先，我們需要在頁面上使用JavaScript代碼來處理用戶點擊添加按鈕的事件。當用戶點擊按鈕時，我們將通過AJAX發送一個異步請求給后臺，來獲取新的文章數據。后臺處理接收到的請求，并將新的文章數據返回給前端。前端接收到返回的數據后，使用JavaScript將新的文章數據添加到文章列表的末尾，而無需重新加載整個頁面。

<script>
function addArticle() {
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置回調函數
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 獲取后臺返回的新的文章數據
var newArticle = JSON.parse(xhr.responseText);
// 將新的文章數據添加到文章列表
var articleList = document.getElementById('article-list');
var newArticleElement = document.createElement('div');
newArticleElement.innerHTML = newArticle.title;
articleList.appendChild(newArticleElement);
}
};
// 發送請求
xhr.open('GET', '/add-article', true);
xhr.send();
}
</script>

在上面的代碼中，我們使用XMLHttpRequest對象來發送異步請求。在回調函數中，我們可以根據請求的狀態和返回的數據，來執行相應的操作。當請求的狀態為4，表示請求已完成，并且返回的狀態碼為200，表示請求成功。此時我們可以獲取后臺返回的新的文章數據，并將其添加到文章列表中。

接下來，我們需要在頁面上添加一個按鈕，并且給按鈕綁定addArticle函數，以響應用戶的點擊事件。

<button onclick="addArticle()">添加文章</button>

現在，當用戶點擊添加按鈕時，頁面不會發生整個刷新，而是通過AJAX發送異步請求，并添加新的文章數據到文章列表中。這樣，用戶就可以在不離開當前頁面的情況下，實時地看到最新的文章。

總結來說，AJAX局部刷新并添加數據的實現過程主要包括以下幾個步驟：通過JavaScript代碼來處理用戶點擊事件，使用XMLHttpRequest對象發送異步請求，后臺接收到請求并返回新的數據，前端接收到數據并將其添加到頁面中。使用AJAX可以提高用戶體驗，減少帶寬消耗，并實現頁面的動態更新。