AJAX（Asynchronous JavaScript and XML）是一種用于在不刷新整個網(wǎng)頁的情況下向服務(wù)器發(fā)送請求并獲取返回數(shù)據(jù)的技術(shù)。它的應(yīng)用廣泛，尤其在類別菜單的設(shè)置中非常方便。通過使用AJAX，我們可以實現(xiàn)點擊類別菜單時異步加載相應(yīng)的內(nèi)容，提供更好的用戶體驗。
假設(shè)我們有一個電子商務(wù)網(wǎng)站，有多個產(chǎn)品類別，如服裝、鞋類和配飾等。用戶可以在類別菜單中選擇自己感興趣的類別，點擊后網(wǎng)站將經(jīng)過AJAX請求從服務(wù)器獲取所選類別的產(chǎn)品列表。這樣，用戶就可以在不刷新整個頁面的情況下查看所選類別的產(chǎn)品。
// HTML代碼
<select id="categoryMenu">
<option value="1">服裝</option>
<option value="2">鞋類</option>
<option value="3">配飾</option>
</select>
<div id="productList">
// 商品列表將通過AJAX動態(tài)加載到這里
</div>
// JavaScript代碼
var categoryMenu = document.getElementById('categoryMenu');
categoryMenu.addEventListener('change', function(event) {
var categoryId = event.target.value;
// 發(fā)起AJAX請求
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var productList = document.getElementById('productList');
productList.innerHTML = xhr.responseText;
}
};
xhr.open('GET', '/api/products?category=' + categoryId, true);
xhr.send();
});上述代碼展示了一個簡單的類別菜單的設(shè)置。當用戶選擇不同的類別時，一個AJAX請求會被發(fā)起，并通過GET方法向服務(wù)器發(fā)送請求。服務(wù)器返回的HTML響應(yīng)將在
元素中展示。
假設(shè)當用戶選擇了"服裝"類別時，服務(wù)器返回以下HTML響應(yīng)：
<ul>
<li>連衣裙</li>
<li>襯衫</li>
<li>夾克</li>
<li>牛仔褲</li>
</ul>然后，連衣裙、襯衫、夾克和牛仔褲將顯示在類別菜單下的產(chǎn)品列表中，而無需刷新整個頁面。
通過AJAX設(shè)置類別菜單，我們可以實現(xiàn)更加動態(tài)和交互的用戶體驗。同時，這種技術(shù)也可用于其他類似的場景，如城市選擇、下拉搜索等。