AJAX（Asynchronous JavaScript and XML）是一種用于在客戶端和服務器之間進行異步數據交互的技術。它允許我們在不刷新整個頁面的情況下，通過向服務器發送請求并更新部分頁面內容，實現動態加載和更新數據。DOM（Document Object Model）是指把HTML文檔看作是一個文檔樹的結構，通過DOM可以在JavaScript中訪問和操作HTML元素和內容。

舉例來說，當我們在一個網站上點擊一個按鈕，觸發用戶評論的提交時，AJAX可以通過異步請求將該評論發送給服務器并在頁面上顯示出來，而不需要刷新整個頁面。這種情況下，DOM可以幫助我們在網頁中找到需要更新的評論區域，然后通過操作DOM元素來更新頁面上的評論內容。

// 使用AJAX發送異步請求
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit-comment', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
var commentElement = document.getElementById('comment-section');
// 使用DOM操作來更新評論區域
var newComment = document.createElement('div');
newComment.textContent = response.comment;
commentElement.appendChild(newComment);
}
};
xhr.send(JSON.stringify({ comment: 'This is a new comment' }));

AJAX的優勢在于可以提升用戶體驗，通過異步請求可以避免等待整個頁面刷新的時間。而DOM的優勢在于可以方便地通過JavaScript來操縱HTML元素，實現動態交互。比如，當我們需要在用戶點擊一個按鈕后顯示一個彈出框，可以使用DOM操作來創建一個新的彈出框元素并添加到頁面中。

// 使用DOM操作創建彈出框
var modalElement = document.createElement('div');
modalElement.className = 'modal';
modalElement.textContent = 'This is a modal!';
document.body.appendChild(modalElement);

總結來說，AJAX和DOM都是在Web開發中常用的技術。AJAX可以實現異步請求，幫助我們在不刷新整個頁面的情況下更新數據，提升用戶體驗；而DOM則允許我們通過JavaScript來操作HTML元素，實現動態交互。通過靈活運用AJAX和DOM，我們可以為用戶提供更加流暢和豐富的網頁體驗。