在Web開發中，我們經常需要通過Ajax來實現頁面數據的填充。Ajax可以讓我們在不刷新整個頁面的情況下，異步地從后端獲取數據，并將這些數據動態地填充到頁面中。

舉個例子，假設我們正在開發一個電商網站的商品列表頁面。當用戶訪問該頁面時，我們希望通過Ajax從后端獲取商品數據，并將這些商品數據填充到頁面中的相應位置。這樣，用戶就可以在不刷新頁面的情況下看到最新的商品列表。

要實現這個功能，我們可以使用JavaScript和XMLHttpRequest對象來發送Ajax請求。我們可以在頁面的加載事件中調用一個函數，該函數會發送Ajax請求，并處理返回的數據。下面是一個簡單的示例代碼：

window.onload = function() {
var xhr = new XMLHttpRequest(); // 創建XMLHttpRequest對象
xhr.open('GET', 'http://example.com/api/products', true); // 設置請求的地址和方法
xhr.onreadystatechange = function() { // 定義請求狀態改變時的回調函數
if (xhr.readyState === 4 && xhr.status === 200) { // 當請求完成并成功返回時
var products = JSON.parse(xhr.responseText); // 解析返回的JSON數據
renderProducts(products); // 填充商品數據到頁面中的相應位置
}
};
xhr.send(); // 發送Ajax請求
};
function renderProducts(products) {
var ul = document.getElementById('product-list'); // 獲取商品列表的ul元素
for (var i = 0; i < products.length; i++) { // 遍歷商品數據
var li = document.createElement('li'); // 創建一個li元素
li.textContent = products[i].name; // 設置li元素的文本內容為商品名稱
ul.appendChild(li); // 將li元素添加到商品列表中
}
}

上述代碼中，當頁面加載完成后，window.onload事件會觸發一個函數，該函數會創建一個XMLHttpRequest對象并發送Ajax請求。在請求狀態改變時的回調函數中，我們首先檢查請求是否完成并成功返回，然后使用JSON.parse()方法解析返回的JSON數據，并調用renderProducts()函數來填充商品數據。

除了填充文本數據，我們還可以通過Ajax來填充圖片、表格、表單等各種類型的數據到頁面中。例如，當用戶通過點擊按鈕來觸發Ajax請求時，我們可以從后端獲取一張圖片的URL，然后將這張圖片填充到頁面中的某個位置。

總之，Ajax是一種強大的工具，可以幫助我們實現頁面動態填充數據的需求。無論是填充文本數據、圖片、表格還是其他類型的數據，Ajax都能夠提供靈活且高效的解決方案。