近年來，隨著 Web 技術的不斷發展，AJAX 成為了構建交互性網頁應用程序的重要工具之一。在 Web 開發中，經常需要通過數據庫來獲取和存儲數據。本文將介紹如何使用 AJAX 和數組來查詢數據庫，并通過實例來說明其實用性和作用。

首先，讓我們看一個簡單的例子。假設我們正在開發一個在線商城網站，我們需要在用戶輸入關鍵字時，實時顯示相關商品的搜索結果。為了實現這個功能，我們可以使用 AJAX 來發送異步請求，并通過數組來查詢數據庫。

<pre>javascript
// HTML
<input type="text" id="search" onkeyup="getSearchResults()">
<div id="results"></div>
// JavaScript
function getSearchResults() {
var searchInput = document.getElementById("search").value;
// 發送 AJAX 請求
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var results = JSON.parse(this.responseText);
showResults(results);
}
};
xhttp.open("GET", "search.php?keyword=" + searchInput, true);
xhttp.send();
}
function showResults(results) {
var resultsDiv = document.getElementById("results");
resultsDiv.innerHTML = "";
if (results.length > 0) {
for (var i = 0; i < results.length; i++) {
var result = results[i];
resultsDiv.innerHTML += "<p>" + result.name + "</p>";
}
} else {
resultsDiv.innerHTML = "<p>No results found.</p>";
}
}

在上面的代碼中，我們首先用 HTML 創建了一個文本輸入框，并給其添加了一個 onkeyup 事件，當用戶鍵入時會觸發 getSearchResults() 函數。該函數通過 AJAX 向服務器發送 GET 請求，并將用戶輸入的關鍵字作為參數傳遞到 search.php 腳本中。

在服務器端，我們可以使用 PHP 或其他后端語言來處理這個請求，并從數據庫中查詢相關商品。搜索結果以 JSON 格式返回給前端。

<pre>php
<?php
$keyword = $_GET["keyword"];
// 假設這是一個查詢數據庫的函數
$results = getSearchResultsFromDatabase($keyword);
echo json_encode($results);
?>

在前端邏輯中，我們使用 XMLHttpRequest 對象來發送異步請求，并設置回調函數。當請求成功返回時，我們解析 JSON 數據，并調用 showResults() 函數來顯示結果。該函數首先清空顯示結果的容器，然后根據查詢結果的數量，動態生成相應的 HTML 內容，并將其插入到結果容器中。

總結起來，通過使用 AJAX 和數組來查詢數據庫，我們可以實現實時搜索功能等一系列交互性需求。在上述例子中，用戶只需要輸入關鍵字，然后立即獲得相關搜索結果，無需刷新整個頁面。這種技術不僅提升了用戶體驗，同時也減輕了服務器的負擔，提高了網頁的性能。因此，熟練掌握 AJAX 和數組查詢數據庫的方法，對我們的 Web 開發工作具有重要意義。