AJAX（Asynchronous JavaScript and XML）是一種在不重新加載整個頁面的情況下，通過使用JavaScript和XML來動態拉取和填充頁面內容的技術。它可以使網頁變得更加交互性，提升用戶體驗。在本文中，將介紹如何使用Ajax來動態拉取數據并填充頁面，并通過舉例說明其應用和效果。

AJAX可以在不刷新頁面的情況下，向服務器請求數據并將其展示在網頁上。舉例來說，假設有一個電商網站，當用戶點擊商品分類列表時，頁面會重新加載并顯示相應的商品列表。但是，通過使用Ajax，我們可以做到在不刷新整個頁面的情況下，只更新商品列表的部分內容。這樣可以提高網頁加載速度，并提供更平滑的用戶體驗。

// 示例代碼
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 定義請求的URL
var url = "example.com/get_products.php";
// 發送請求
xhr.open("GET", url, true);
xhr.send();
// 監聽響應
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析響應數據
var response = JSON.parse(xhr.responseText);
// 更新頁面內容
var productList = document.getElementById("product-list");
productList.innerHTML = "";
for (var i = 0; i< response.length; i++) {
var product = response[i];
var productItem = document.createElement("li");
productItem.innerText = product.name;
productList.appendChild(productItem);
}
}
};

在這個示例代碼中，當用戶點擊商品分類列表時，JavaScript代碼會發送一個GET請求到服務器上的"example.com/get_products.php"。服務器會返回一個JSON格式的響應，包含所有符合該分類的商品信息。然后，JavaScript會解析該響應數據，并更新網頁上的商品列表內容。

另一個使用Ajax動態拉取填充頁面的示例是加載評論。比如在一個社交媒體網站上，用戶可以在帖子底部看到其他用戶發表的評論。而Ajax可以使這些評論實時地加載和更新，而不需要刷新整個頁面。當用戶滾動到評論區域時，JavaScript代碼會發送一個GET請求到服務器，請求獲取更多的評論。然后，服務器會返回一個包含新評論的JSON響應，并通過JavaScript代碼將新評論添加到頁面的評論列表中。

// 示例代碼
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 定義請求的URL
var url = "example.com/get_comments.php";
// 發送請求
xhr.open("GET", url, true);
xhr.send();
// 監聽響應
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 解析響應數據
var response = JSON.parse(xhr.responseText);
// 更新頁面內容
var commentList = document.getElementById("comment-list");
for (var i = 0; i< response.length; i++) {
var comment = response[i];
var commentItem = document.createElement("div");
commentItem.innerHTML = "" + comment.user + ": " + comment.message;
commentList.appendChild(commentItem);
}
}
};

通過使用Ajax動態拉取填充頁面，我們可以在不刷新整個頁面的情況下，根據用戶的交互實時地更新網頁內容。這種技術可以用于各種應用，如動態加載表單選項、實時更新聊天消息、加載更多的內容等等。它不僅提高了用戶體驗，還減少了服務器負擔和網絡流量，因為只需請求和傳輸需要更新的數據。