本文將介紹如何通過使用AJAX實現查詢功能而不用依賴數據庫。通過AJAX，我們可以在不刷新整個頁面的情況下通過發送異步請求獲取數據并更新頁面內容。這種方法可以提高用戶體驗并減少服務器負載。下面將通過幾個簡單的示例來展示如何使用AJAX實現查詢功能。

首先，我們來看一個簡單的示例。假設我們有一個城市列表，并且希望用戶能夠通過輸入城市的名字來查詢該城市的信息。我們可以通過AJAX發送一個GET請求到一個API接口，該接口會根據傳入的城市名返回相應的城市信息。然后我們可以使用JavaScript將返回的結果渲染到頁面中。

// HTML代碼
<input type="text" id="cityInput" placeholder="請輸入城市名" />
<button onclick="searchCity()">查詢</button>
<div id="cityResult"></div>
// JavaScript代碼
function searchCity() {
var cityName = document.getElementById("cityInput").value;
// 創建一個AJAX對象
var xhr = new XMLHttpRequest();
// 定義請求的方式、URL以及是否異步
xhr.open("GET", "api/city?name=" + cityName, true);
// 處理AJAX響應
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var cityInfo = JSON.parse(xhr.responseText);
document.getElementById("cityResult").innerText = "城市名：" + cityInfo.name + "，人口：" + cityInfo.population;
}
}
// 發送AJAX請求
xhr.send();
}

在以上代碼中，我們首先獲取用戶輸入的城市名，然后創建一個XMLHttpRequest對象，并使用open方法指定請求的方式、URL以及是否異步。接著，我們定義了一個onreadystatechange事件處理程序來處理AJAX響應。當AJAX請求的狀態變為DONE并且響應的狀態碼為200時，我們將返回的城市信息解析為JSON對象，并將其渲染到頁面中。

另一個常見的示例是實現一個動態搜索框。假設我們有一個商品列表，并且希望用戶在搜索框中輸入關鍵詞時，能夠實時顯示匹配的商品。我們可以通過AJAX發送一個GET請求到后臺，并在響應返回時使用JavaScript動態更新搜索結果。

// HTML代碼
<input type="text" id="keywordInput" placeholder="請輸入關鍵詞" oninput="searchProduct()" />
<ul id="productList"></ul>
// JavaScript代碼
function searchProduct() {
var keyword = document.getElementById("keywordInput").value;
// 清空商品列表
document.getElementById("productList").innerHTML = "";
// 創建一個AJAX對象
var xhr = new XMLHttpRequest();
// 定義請求的方式、URL以及是否異步
xhr.open("GET", "api/products?keyword=" + keyword, true);
// 處理AJAX響應
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var products = JSON.parse(xhr.responseText);
// 動態創建商品列表
products.forEach(function(product) {
var li = document.createElement("li");
li.innerText = product.name;
document.getElementById("productList").appendChild(li);
});
}
}
// 發送AJAX請求
xhr.send();
}

在以上示例中，每當用戶在搜索框中輸入關鍵詞時，searchProduct函數會被調用。函數首先獲取用戶輸入的關鍵詞，然后清空商品列表。接著，它創建一個AJAX對象，并使用open方法指定請求的方式、URL以及是否異步。當響應返回時，我們使用JSON.parse方法將返回的結果解析為JSON對象，并使用動態創建元素的方式將商品信息添加到搜索結果列表中。

通過以上幾個示例，我們可以看到如何利用AJAX實現查詢功能而不依賴數據庫。這種方法不僅可以提高用戶體驗，而且還可以減輕服務器的負載。希望本文對你理解和應用AJAX查詢功能有所幫助。