AJAX動態生成數據渲染是一種在網頁中使用JavaScript和XML技術，通過向服務器發送異步http請求，然后動態更新頁面內容的方法。它可以實現無需刷新頁面，實時獲取最新數據或者局部刷新頁面內容的效果。這種技術在現代Web開發中被廣泛使用，可以方便地提升用戶體驗和頁面性能。

舉個例子，假設有一個電商網站，當用戶點擊商品分類時，需要動態地加載該分類下的商品列表。傳統的做法是用戶點擊分類鏈接后，通過跳轉到一個新頁面來展示商品列表。而使用AJAX技術，可以在不離開當前頁面的情況下，向服務器發送異步請求，獲取商品數據，并將其動態添加到頁面中。這樣就可以實現無刷新加載商品列表，提升用戶體驗。

<script>function getProducts(categoryId) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getProducts.php?category=' + categoryId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
// 動態生成商品列表
var productList = document.getElementById('productList');
for (var i = 0; i < products.length; i++) {
var product = products[i];
var productItem = document.createElement('div');
productItem.textContent = product.name + ' - ￥' + product.price;
productList.appendChild(productItem);
}
}
};
xhr.send();
}
</script>

上面的代碼使用原生的JavaScript實現了一個函數getProducts(categoryId)，該函數通過XMLHttpRequest對象發送GET請求到服務器的getProducts.php接口，并且在獲取到數據后，通過動態生成HTML元素的方式渲染頁面。

除了動態生成數據，AJAX還可以實現局部刷新頁面的效果。比如，在一個社交媒體網站上，用戶可以發表動態，并且其他用戶可以即時地看到這些動態。一種實現方式是使用AJAX定時向服務器發送異步請求，獲取最新的動態數據，然后動態地將這些數據插入到頁面中。這樣就能夠實現動態的、實時的頁面更新效果。

<script>function getLatestFeeds() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'getFeeds.php', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var feeds = JSON.parse(xhr.responseText);
// 動態生成動態列表
var feedList = document.getElementById('feedList');
for (var i = 0; i < feeds.length; i++) {
var feed = feeds[i];
var feedItem = document.createElement('div');
feedItem.textContent = feed.content;
feedList.insertBefore(feedItem, feedList.firstChild);
}
}
};
xhr.send();
}
// 定時獲取最新動態，每5秒一次
setInterval(getLatestFeeds, 5000);
</script>

上面的例子中，getLatestFeeds()函數通過異步請求從服務器獲取最新的動態數據，并將其動態地插入到頁面的頂部。使用setInterval()可以定時調用該函數，實現每5秒一次的動態更新效果。

總之，AJAX動態生成數據渲染是一種現代Web開發中常用的技術，它可以無需刷新頁面，實時獲取最新數據或者局部刷新頁面內容。通過動態生成HTML元素，可以靈活地控制頁面的展示效果，提升用戶體驗。這種技術在電商網站、社交媒體等場景中都得到了廣泛應用，成為了Web開發中不可或缺的一部分。