AJAX（Asynchronous JavaScript and XML）是一種利用 JavaScript 和 XML 技術(shù)進(jìn)行異步通信的方法。通過(guò)使用 AJAX 技術(shù)，我們可以實(shí)現(xiàn)在不刷新整個(gè)網(wǎng)頁(yè)的情況下，向服務(wù)器發(fā)送請(qǐng)求，并動(dòng)態(tài)更新頁(yè)面上的內(nèi)容。在這篇文章中，我們將討論如何利用 AJAX 從數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)，并將其展示在網(wǎng)頁(yè)上。

首先，讓我們假設(shè)我們的網(wǎng)頁(yè)上有一個(gè)列表，用于顯示某個(gè)在線商店的產(chǎn)品信息。當(dāng)用戶瀏覽到該網(wǎng)頁(yè)時(shí)，我們希望頁(yè)面上顯示數(shù)據(jù)庫(kù)中存儲(chǔ)的產(chǎn)品數(shù)據(jù)。為了實(shí)現(xiàn)這一目標(biāo)，我們可以使用 AJAX 來(lái)通過(guò)服務(wù)器請(qǐng)求數(shù)據(jù)庫(kù)，并將返回的數(shù)據(jù)插入到網(wǎng)頁(yè)的列表中。

// AJAX 請(qǐng)求數(shù)據(jù)
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
var productList = JSON.parse(xmlHttp.responseText);
// 將返回的數(shù)據(jù)插入到網(wǎng)頁(yè)的列表中
var listElement = document.getElementById('product-list');
for(var i = 0; i < productList.length; i++) {
var productElement = document.createElement('li');
productElement.innerHTML = productList[i].name;
listElement.appendChild(productElement);
}
}
};
xmlHttp.open('GET', 'getProductList.php', true);
xmlHttp.send();

在上面的代碼中，我們創(chuàng)建了一個(gè) XMLHttpRequest 對(duì)象，用于發(fā)送 HTTP 請(qǐng)求。當(dāng)請(qǐng)求的狀態(tài)改變時(shí)，我們定義了一個(gè)回調(diào)函數(shù)，用于接收服務(wù)器返回的數(shù)據(jù)并處理。在這個(gè)回調(diào)函數(shù)中，我們首先解析服務(wù)器返回的 JSON 格式數(shù)據(jù)，并將其插入到網(wǎng)頁(yè)的列表中。

接下來(lái)，讓我們看一下后端的 PHP 代碼，用于處理 AJAX 請(qǐng)求并從數(shù)據(jù)庫(kù)中獲取產(chǎn)品列表。

// getProductList.php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "online_store";
// 創(chuàng)建連接
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查連接是否成功
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 從數(shù)據(jù)庫(kù)中獲取產(chǎn)品列表
$sql = "SELECT name FROM products";
$result = $conn->query($sql);
// 將產(chǎn)品列表轉(zhuǎn)換為 JSON 格式并發(fā)送給客戶端
$productList = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$productList[] = array("name" => $row["name"]);
}
}
echo json_encode($productList);

在上述代碼中，我們首先創(chuàng)建了與數(shù)據(jù)庫(kù)的連接，并檢查連接是否成功。然后，我們使用 SQL 查詢語(yǔ)句從數(shù)據(jù)庫(kù)中獲取產(chǎn)品列表，并將其轉(zhuǎn)換為 JSON 格式。最后，我們使用 echo 語(yǔ)句將 JSON 數(shù)據(jù)發(fā)送給客戶端。

通過(guò)結(jié)合前端的 AJAX 代碼和后端的 PHP 代碼，我們可以實(shí)現(xiàn)從數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)并展示在網(wǎng)頁(yè)上的功能。無(wú)論是從在線商店獲取產(chǎn)品信息，還是從社交媒體網(wǎng)站獲取用戶評(píng)論，AJAX 都是一個(gè)非常強(qiáng)大和靈活的工具。