Ajax是一種常用的前端技術，它允許網頁在不刷新整個頁面的情況下，實現與服務器之間的異步通信。通過Ajax，網頁可以向服務器發送請求，并在接收到服務器返回的數據后，將其動態地插入到當前頁面中。雖然Ajax通常用于獲取和處理JSON數據格式，但實際上，Ajax同樣能夠返回HTML格式的數據。
在Web開發中，常常會遇到需要動態加載頁面片段的情況。例如，在購物網站中，當用戶點擊查看商品詳情時，服務器需要返回該商品的詳細信息，這些信息通常包括商品的名稱、描述、價格以及相關圖片等。在傳統的網頁開發中，這種需求通常通過刷新整個頁面來實現。但是，這種方法會導致頁面變得非常緩慢，用戶體驗差。而使用Ajax，可以使頁面實現無刷新、快速加載所需數據的效果。
通過Ajax發送請求，并獲得返回的HTML代碼，我們可以將這些代碼直接插入到網頁中的指定位置，從而實現動態加載頁面片段的目標。下面是一個簡單的示例：假設我們有一個網頁上的內容為一個待辦事項列表，用戶可以通過添加按鈕動態添加新的待辦事項。在傳統的方式下，用戶每添加一個新的事項，都要刷新整個頁面。而使用Ajax，我們只需將待辦事項信息發送給服務器，并在服務器返回HTML格式的新待辦事項時，將其插入到頁面的待辦事項列表中。這樣，用戶就可以在不刷新整個頁面的情況下，快速添加多個待辦事項。
以下是一個使用Ajax返回HTML的代碼示例：

// 點擊按鈕觸發Ajax請求
document.getElementById('add-todo-btn').addEventListener('click', function() {
// 獲取輸入框中的待辦事項內容
var todo = document.getElementById('todo-input').value;
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 設置回調函數，處理服務器返回的數據
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 獲取服務器返回的HTML代碼
var newTodoHtml = xhr.responseText;
// 將新的待辦事項插入到列表中
var todoList = document.getElementById('todo-list');
todoList.insertAdjacentHTML('beforeend', newTodoHtml);
}
};
// 發送Ajax請求
xhr.open('POST', '/add-todo', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('todo=' + encodeURIComponent(todo));
});

在上述代碼中，我們使用了XMLHttpRequest對象來發送Ajax請求，并通過設置onreadystatechange回調函數來處理服務器的響應。當服務器返回的狀態碼為200（請求成功）且Ajax請求的狀態為4（已完成）時，我們獲取到了服務器返回的HTML代碼，并將其插入到頁面的待辦事項列表中。
通過這個簡單的例子，我們可以看到，使用Ajax返回HTML格式的數據可以有效地實現網頁的動態加載和更新。無論是添加新的待辦事項，還是顯示商品詳情等需求，都可以通過Ajax來實現。這種方式不僅減少了頁面刷新的次數，提升了用戶體驗，同時也減輕了服務器的負擔，提高了網站的性能。因此，Ajax返回HTML格式的數據在現代Web開發中是非常實用的技術。