在Web開發(fā)中，隨著用戶對交互性和實(shí)時(shí)性的要求越來越高，Ajax（Asynchronous JavaScript and XML）技術(shù)應(yīng)運(yùn)而生。它通過在后臺與服務(wù)器進(jìn)行數(shù)據(jù)交換，實(shí)現(xiàn)頁面內(nèi)容的無刷新更新，從而提供更好的用戶體驗(yàn)。而對于讀取數(shù)據(jù)庫數(shù)據(jù)來說，Ajax也能發(fā)揮出強(qiáng)大的作用。本文將介紹如何使用Ajax來讀取數(shù)據(jù)庫數(shù)據(jù)，并通過舉例說明其作用和優(yōu)勢。

假設(shè)我們正在開發(fā)一個(gè)電子商務(wù)網(wǎng)站，需要實(shí)時(shí)顯示商品的庫存情況。每當(dāng)用戶在商品詳情頁中選擇不同的規(guī)格和數(shù)量時(shí)，我們希望能夠立即顯示相應(yīng)規(guī)格商品的庫存量，以便用戶做出更好的購買決策。傳統(tǒng)的做法是每次用戶選擇變化時(shí)，都需要刷新整個(gè)頁面才能更新庫存信息，這樣用戶體驗(yàn)十分不理想。而使用Ajax，則可以在后臺進(jìn)行異步請求，實(shí)時(shí)獲取并更新庫存數(shù)據(jù)，用戶可以立即看到最新的庫存情況。

下面是一個(gè)簡化的示例，我們假設(shè)已經(jīng)有一個(gè)MySQL數(shù)據(jù)庫，其中有一張名為"products"的商品表，包含字段"id"、"name"、"specification"和"stock"。

// HTML部分
<select id="product" onchange="getStock()">
<option value="1">商品1</option>
<option value="2">商品2</option>
<option value="3">商品3</option>
</select>
<span id="stock"></span>
// JavaScript部分
function getStock() {
var product = document.getElementById("product").value;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("stock").innerHTML = xhr.responseText;
}
};
xhr.open("GET", "getStock.php?product=" + product, true);
xhr.send();
}
// PHP部分（getStock.php）
$product = $_GET["product"];
$result = mysqli_query($con, "SELECT stock FROM products WHERE id = {$product}");
$row = mysqli_fetch_assoc($result);
echo $row["stock"];

在上述示例中，我們使用了一個(gè)select元素作為商品選擇框，并為其綁定了onchange事件。當(dāng)用戶選擇不同的商品時(shí)，就會觸發(fā)getStock()函數(shù)。

該函數(shù)首先獲取當(dāng)前選擇的商品ID，并創(chuàng)建一個(gè)XMLHttpRequest對象，用于與后臺進(jìn)行數(shù)據(jù)交互。接下來，我們設(shè)置了xhr對象的onreadystatechange事件處理函數(shù)，以便在服務(wù)器返回?cái)?shù)據(jù)時(shí)進(jìn)行處理。

在發(fā)送請求時(shí)，我們使用了GET方法，并在URL中傳遞了商品ID，如"getStock.php?product=3"。這樣，服務(wù)器端的getStock.php腳本就可以根據(jù)提供的商品ID查詢數(shù)據(jù)庫，并返回相應(yīng)的庫存數(shù)據(jù)。

在"getStock.php"腳本中，我們使用$_GET全局?jǐn)?shù)組來獲取前端傳遞的商品ID。然后，通過執(zhí)行SELECT語句，根據(jù)商品ID從數(shù)據(jù)庫中獲取庫存數(shù)據(jù)。最后，我們將庫存數(shù)據(jù)通過echo輸出，返回到前端。

當(dāng)服務(wù)器返回?cái)?shù)據(jù)時(shí)，xhr對象的readyState將會變?yōu)?，狀態(tài)碼為200，表示請求已成功完成。此時(shí)，我們將服務(wù)器返回的庫存數(shù)據(jù)存儲到id為"stock"的元素的innerHTML屬性中，從而實(shí)現(xiàn)庫存數(shù)據(jù)的實(shí)時(shí)更新。

通過這種方式，我們可以在用戶操作選擇變化時(shí)，利用Ajax技術(shù)實(shí)時(shí)讀取數(shù)據(jù)庫中的數(shù)據(jù)，實(shí)現(xiàn)更好的用戶體驗(yàn)。除了讀取數(shù)據(jù)庫數(shù)據(jù)，Ajax還可以用于其他異步操作，如提交表單、加載頁面片段等。

總之，Ajax技術(shù)為Web開發(fā)帶來了更多的交互性和實(shí)時(shí)性。通過在后臺與服務(wù)器進(jìn)行異步交互，我們可以實(shí)現(xiàn)數(shù)據(jù)庫數(shù)據(jù)的讀取，并將其實(shí)時(shí)展現(xiàn)給用戶。在開發(fā)過程中，需要注意安全性和性能優(yōu)化，避免不必要的請求和過多的數(shù)據(jù)傳輸。