AJAX（Asynchronous JavaScript and XML）是一種強大的前端技術，它可以使網頁實現異步加載和更新，提高用戶體驗。在開發過程中，經常需要請求多個頁面的數據，然而傳統的同步請求方式會導致用戶等待時間過長，因此使用AJAX可以有效地解決這個問題。

一種常見的使用場景是通過AJAX請求多個頁面的數據來展示不同模塊的內容。舉個例子，我們假設有一個新聞網站，網站的首頁需要展示不同分類的新聞，如時事新聞、體育新聞和科技新聞等。傳統的做法是在后端將這些分類的數據拼接在一起，然后返回給前端。然而這種方式會導致每次刷新頁面都要請求所有分類的數據，即使用戶只關注其中一兩個分類。通過使用AJAX，可以實現在用戶點擊對應分類時，只請求該分類的數據，提高頁面加載速度和用戶體驗。

// 示例代碼
function loadNews(category) {
var url = "/api/news?category=" + category;
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var news = JSON.parse(xhr.responseText);
// 處理數據
}
};
xhr.send();
}

除了在網頁加載時請求多個頁面的數據，我們還可以通過AJAX在頁面交互過程中動態請求數據。假設我們有一個在線商城，用戶可以根據商品的種類進行篩選。當用戶選擇不同的種類時，我們可以通過AJAX請求對應種類的商品數據，并將返回的數據動態更新到頁面上，而不需要刷新整個頁面。

// 示例代碼
function filterProducts(category) {
var url = "/api/products?category=" + category;
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
// 更新頁面上的商品列表
}
};
xhr.send();
}

在使用AJAX請求多個頁面的數據時，我們還可以通過使用Promise或者使用axios等第三方庫來簡化請求的處理過程。例如，下面是使用axios庫發起一個并發請求的示例：

// 示例代碼
axios.all([
axios.get("/api/news?category=sports"),
axios.get("/api/news?category=technology"),
axios.get("/api/news?category=entertainment")
])
.then(axios.spread(function(sportsResponse, technologyResponse, entertainmentResponse) {
var sportsNews = sportsResponse.data;
var technologyNews = technologyResponse.data;
var entertainmentNews = entertainmentResponse.data;
// 處理數據
}))
.catch(function(error) {
console.error(error);
});

總之，通過使用AJAX可以實現在網頁加載和交互過程中請求多個頁面的數據，提高用戶體驗。無論是展示不同分類的新聞還是篩選商品種類，在減少數據傳輸量和提高響應速度的同時，AJAX為我們提供了更靈活和高效的前端開發方案。