在Web開發中，我們經常遇到需要通過Ajax向頁面動態添加數據的情況。Ajax（Asynchronous JavaScript and XML）是一種用于在不重新加載整個頁面的情況下與服務器進行通信的技術。通過Ajax，我們可以通過異步請求從服務器獲取數據，并將其添加到頁面上，實現無需刷新頁面即可顯示新數據的效果。

假設我們正在開發一個新聞網站，我們希望在用戶瀏覽新聞頁面時，通過Ajax加載評論數據，并將其顯示在頁面上。以下是使用Ajax向頁面添加數據的示例代碼：

// 創建一個XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 監聽onreadystatechange事件
xhr.onreadystatechange = function() {
// 檢查響應狀態
if (xhr.readyState === XMLHttpRequest.DONE) {
// 檢查響應是否成功
if (xhr.status === 200) {
// 解析服務器返回的JSON數據
var comments = JSON.parse(xhr.responseText);
// 獲取評論列表的容器
var commentsContainer = document.getElementById('comments');
// 遍歷評論列表
for (var i = 0; i < comments.length; i++) {
// 創建一個新的評論元素
var commentElement = document.createElement('div');
// 設置評論內容
commentElement.innerHTML = comments[i].content;
// 添加評論到列表容器
commentsContainer.appendChild(commentElement);
}
} else {
// 處理響應錯誤
console.error('請求出錯：' + xhr.status);
}
}
};
// 發送Ajax請求
xhr.open('GET', '/api/comments', true);
xhr.send();

在這個示例中，我們使用了XMLHttpRequest對象來發送Ajax請求。我們首先創建了一個新的XMLHttpRequest對象，并通過設置其onreadystatechange事件監聽器來處理響應。當onreadystatechange事件觸發時，我們會檢查響應狀態（readyState）以及響應的HTTP狀態碼（status）。如果響應狀態為“DONE”且HTTP狀態碼為200，表示請求成功，我們可以通過responseText屬性獲取服務器返回的數據。在這個示例中，服務器返回的是一個包含評論數據的JSON字符串。我們將其解析為一個JavaScript對象，并遍歷評論列表。對于每個評論，我們創建一個新的包含評論內容的div元素，并將其添加到頁面上。

當我們調用xhr.open()方法時，我們指定了HTTP請求的方法（GET）以及服務器端的URL（/api/comments）。在這個例子中，我們假設服務器提供了一個/api/comments的接口，返回了評論數據。我們還通過將第三個參數設置為true來指定這是一個異步請求，這樣瀏覽器將會在后臺發送請求并繼續處理其他任務。

在實際應用中，我們可以根據具體需求調整代碼，例如可以添加請求參數、處理錯誤、顯示加載中的動畫等。通過使用Ajax向頁面添加數據，我們可以實現更流暢的用戶體驗和更高效的頁面更新。

總結起來，通過Ajax向頁面添加數據是一種非常常見的Web開發技術。我們可以通過異步請求從服務器獲取數據，并將其動態地顯示在頁面上。這種技術可以極大地改善用戶體驗，并提高頁面更新的效率。