AJAX是一種用于在不刷新頁面的情況下與服務器進行數據交互的技術。它可以通過向服務器發送請求并在后臺獲取數據，然后將數據動態地顯示在網頁上。在這篇文章中，我們將介紹如何使用AJAX循環添加數據庫數據，并提供了一些例子來幫助讀者更好地理解。

假設我們有一個電子商務網站，我們想要通過AJAX從服務器加載更多商品并將它們添加到網頁上。首先，我們需要一個用于存儲商品數據的數據庫。我們可以使用MySQL或其他關系型數據庫來完成這個任務。

<?php
// 連接數據庫
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連接是否成功
if ($conn->connect_error) {
die("連接失敗: " . $conn->connect_error);
} 
// 從數據庫中獲取商品數據
$sql = "SELECT * FROM products";
$result = $conn->query($sql);
// 輸出結果
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<div class='product'><p>" . $row["name"] . "</p></div>";
}
} else {
echo "沒有找到商品";
}
$conn->close();
?>

在上面的代碼中，我們首先連接到數據庫，然后執行一個查詢來選擇商品表中的所有數據。然后，我們使用一個循環來遍歷結果，并將每個商品的名稱添加到網頁上。最后，我們關閉數據庫連接。

為了從網頁上使用AJAX來循環添加數據庫數據，我們可以使用jQuery的$.ajax()函數。下面是一個使用jQuery的例子：

$(document).ready(function(){
var page = 0;
var inProgress = false;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
loadMoreData();
}
});
function loadMoreData() {
if(inProgress) { return; }
inProgress = true;
page++;
$.ajax({
url: 'get_products.php',
type: 'post',
data: {page: page},
success: function(response) {
$(".product-container").append(response);
inProgress = false;
}
});
}
});

在上面的代碼中，我們首先定義了一個頁面變量和一個inProgress變量來跟蹤當前加載的頁面和是否正在加載數據。然后，我們使用$(window).scroll()函數來監聽滾動事件，并在滾動到頁面底部時調用loadMoreData()函數。在loadMoreData()函數中，我們首先檢查inProgress變量，以確保只有一個AJAX請求正在進行。然后，我們增加頁面變量的值，并使用$.ajax()函數發送一個請求到get_products.php文件。該文件將在服務器端處理請求，然后返回結果。最后，我們將返回的結果附加到.product-container元素中，并將inProgress變量設置為false。

使用AJAX循環添加數據庫數據可以為網頁的加載和性能提供巨大的優勢。它可以在用戶滾動頁面時動態地加載數據，而不是一次性加載所有數據。這樣，即使數據庫中有大量數據，網頁加載的速度也能得到保證。希望這篇文章對于理解如何在網頁中使用AJAX循環添加數據庫數據有所幫助。