AJAX（Asynchronous JavaScript and XML）是一種在Web應用程序中以異步方式獲取數據的技術。它的優勢在于能夠在不刷新整個頁面的情況下，更新頁面的部分內容。在這篇文章中，我們將探討如何使用AJAX動態加載
考慮一個簡單的例子，我們正在開發一個電商網站，其中一個功能是根據用戶選擇的商品分類，動態加載相關的商品列表。我們可以使用AJAX來實現這個功能，避免每次發起請求時都要重新加載整個頁面。
// HTML代碼
<select id="category">
<option value="1">電視</option>
<option value="2">手機</option>
<option value="3">電腦</option>
</select>
<div id="products"></div>
// JavaScript代碼
var categorySelect = document.getElementById("category");
categorySelect.addEventListener("change", function() {
var selectedCategory = categorySelect.value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "getProducts.php?category=" + selectedCategory, true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
var productsDiv = document.getElementById("products");
productsDiv.innerHTML = "";
for(var i = 0; i< products.length; i++) {
var product = products[i];
var productDiv = document.createElement("div");
productDiv.textContent = product.name;
productsDiv.appendChild(productDiv);
}
}
};
xhr.send();
});在上面的代碼示例中，我們首先獲取了