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

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

<pre>javascript
// HTML
<input type="text" id="search" onkeyup="getSearchResults()">
<div id="results"></div>
// JavaScript
function getSearchResults() {
var searchInput = document.getElementById("search").value;
// 發(fā)送 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 創(chuàng)建了一個文本輸入框，并給其添加了一個 onkeyup 事件，當(dāng)用戶鍵入時會觸發(fā) getSearchResults() 函數(shù)。該函數(shù)通過 AJAX 向服務(wù)器發(fā)送 GET 請求，并將用戶輸入的關(guān)鍵字作為參數(shù)傳遞到 search.php 腳本中。

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

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

在前端邏輯中，我們使用 XMLHttpRequest 對象來發(fā)送異步請求，并設(shè)置回調(diào)函數(shù)。當(dāng)請求成功返回時，我們解析 JSON 數(shù)據(jù)，并調(diào)用 showResults() 函數(shù)來顯示結(jié)果。該函數(shù)首先清空顯示結(jié)果的容器，然后根據(jù)查詢結(jié)果的數(shù)量，動態(tài)生成相應(yīng)的 HTML 內(nèi)容，并將其插入到結(jié)果容器中。

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