AJAX（Asynchronous JavaScript and XML）是一種通過在后臺與服務器進行數據交換的技術，能夠使前端頁面異步地獲取數據庫中的數據。通過使用AJAX，我們可以在頁面上實時更新數據，提升用戶的交互體驗。下面將通過一些具體的例子來說明AJAX如何從前端獲取數據庫中的數據，并展示其在實際開發中的應用。
我們假設有一個電商網站，用戶需要在頁面上實時查看商品的庫存，并根據庫存數量決定是否購買。傳統的做法是在用戶點擊某個商品時，通過刷新整個頁面來獲取最新的庫存數據。然而，這樣的方式會消耗大量的網絡資源，并且用戶體驗較差。而通過使用AJAX，我們可以在用戶點擊時，只更新頁面上的庫存數量，而無需刷新整個頁面。
// HTML代碼片段商品1 庫存:
商品2 庫存:
商品3 庫存:
// JavaScript代碼片段
在上面的例子中，我們使用AJAX從getStock.php這個服務器端腳本獲取商品的庫存數量。當用戶點擊某個商品時，我們創建了一個XMLHttpRequest對象來發送GET請求，請求的URL中包含商品的ID參數。隨后，我們監聽了XMLHttpRequest對象的onreadystatechange事件，當readyState等于4且status等于200時，說明請求成功。我們通過將獲取到的庫存數量更新到頁面上的相應位置，實現了頁面的實時更新。
除了從服務器端獲取數據外，我們還可以通過AJAX向服務器端發送數據，實現數據庫的更新。例如，用戶在電商網站上購買了商品后，我們需要將購買記錄保存到數據庫中。傳統的做法是在用戶點擊購買按鈕后，刷新整個頁面，然后通過提交表單的方式將購買記錄發送到服務器端。然而，通過使用AJAX，我們可以在不刷新頁面的情況下將購買記錄發送到服務器端，并得到相應的反饋。
// HTML代碼片段商品名稱:
購買數量:
// JavaScript代碼片段
在上面的例子中，我們通過sendPurchase函數將購買記錄發送到了addPurchase.php這個服務器端腳本。我們使用XMLHttpRequest對象發送了一個POST請求，并設置了請求頭的Content-Type屬性。隨后，我們將商品名稱和購買數量編碼后以鍵值對的形式通過send方法發送給服務器端。當請求成功后，我們彈出服務器返回的反饋信息，在頁面上反饋用戶購買結果。
通過上述例子，我們可以看到，AJAX使得前端可以方便地從數據庫中獲取數據，實現頁面的實時更新。同時，我們還可以通過AJAX向數據庫中插入數據，實現數據的實時存儲。這種技術在電商網站、社交媒體應用以及在線游戲等領域具有廣泛的應用。