在現代Web開發中，動態獲取數據并將其渲染到頁面中已經成為一項基本的技術要求。其中，Ajax（Asynchronous JavaScript and XML）技術是一種常用且效果顯著的實現方式。通過Ajax，我們可以在不刷新整個頁面的情況下，使用JavaScript向后端發送請求并獲取數據，然后將這些數據動態地渲染到頁面中。 以一個電商網站為例，假設我們有一個商品列表頁面，需要在用戶選擇不同類別的產品時，通過Ajax獲取該類別下的所有商品數據，并將其動態渲染到頁面中。首先，我們需要在頁面加載時默認顯示某一類別的商品列表，這是通過調用頁面的加載函數來實現的。

html
<p>電商網站的商品列表頁面</p>
pre 代碼塊：

javascript function loadGoods(category) { // 使用Ajax請求數據 var xhr = new XMLHttpRequest(); xhr.open('GET', '/goods?category=' + category, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var goodsList = JSON.parse(xhr.responseText); // 更新頁面內容 var goodsContainer = document.getElementById('goods-container'); goodsContainer.innerHTML = ''; for (var i = 0; i< goodsList.length; i++) { var goodsItem = goodsList[i]; var goodsElement = document.createElement('div'); goodsElement.innerHTML = goodsItem.name + ' - ￥' + goodsItem.price; goodsContainer.appendChild(goodsElement); } } }; xhr.send(); } // 頁面加載時默認顯示某一類別的商品列表 window.onload = function () { loadGoods('clothes'); }

上述代碼通過創建XMLHttpRequest對象并發送GET請求，向服務器請求指定類別的商品列表數據。當請求成功并返回數據時，我們會使用JSON.parse()方法將返回的數據轉換為JavaScript對象，然后遍歷該數據，并創建DOM元素來展示每個商品的名稱和價格。最后，我們將這些新創建的元素添加到頁面的goods-container元素中。
除了加載頁面時默認顯示某一類別的商品列表，我們還要實現當用戶選擇不同類別時，能夠刷新頁面并顯示相應類別的商品列表。為此，我們需要監聽類別選擇器的變化事件，并調用相應的加載函數。

html

電商網站的商品列表頁面

pre 代碼塊：

javascript
document.getElementById('category-selector').onchange = function () {
var selectedCategory = this.value;
loadGoods(selectedCategory);
}

上述代碼通過獲取類別選擇器的值，并將其賦給selectedCategory變量。然后，我們調用loadGoods()函數，并將該變量作為參數傳入，以獲取相應類別的商品數據并渲染到頁面中。 在這篇文章中，我們簡單介紹了通過Ajax獲取數據并渲染到頁面的基本思路和實現方法。以電商網站的商品列表頁面為例，我們展示了如何使用Ajax技術，在頁面加載和類別選擇變化時，動態獲取數據并將其渲染到頁面中。當然，這只是Ajax的一個簡單應用，實際中我們可以根據需求進行更多的功能擴展和優化。總而言之，Ajax是現代Web開發中不可或缺的一項技術，它大大提高了用戶體驗和頁面性能。