Ajax（Asynchronous JavaScript and XML）是一種用于創建快速動態網頁的技術，通過在后臺與服務器進行數據交換，允許頁面實現部分更新而不需要重新加載整個頁面。在這篇文章中，我們將探討如何使用Ajax來獲取輸入框中的數據庫數據。

假設我們有一個簡單的網頁應用程序，其中包含一個輸入框和一個按鈕。用戶可以在輸入框中輸入關鍵字，并點擊按鈕來獲取與關鍵字相關的數據庫數據。為了實現這個功能，我們將使用Ajax來與服務器進行通信，從而獲取數據庫中的數據。

首先，我們需要為按鈕添加一個點擊事件監聽器。當用戶點擊按鈕時，觸發此事件。我們可以使用JavaScript的addEventListener函數來實現此功能。以下是示例代碼：

<button id="searchButton">搜索</button>
<script>
var button = document.getElementById("searchButton");
button.addEventListener("click", function() {
// 在這里編寫與服務器通信的代碼
});
</script>

接下來，我們將在事件處理程序中編寫與服務器進行通信的代碼。我們將使用XMLHttpRequest對象創建一個HTTP請求，并指定要獲取的數據的URL。在這個例子中，我們將使用PHP腳本來連接數據庫，并根據關鍵字返回相應的結果。以下是示例代碼：

button.addEventListener("click", function() {
var keyword = document.getElementById("keyword").value;
var xhr = new XMLHttpRequest();
xhr.open("GET", "search.php?keyword=" + keyword, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var result = xhr.responseText;
// 在這里處理返回的數據
}
};
});

在上面的代碼中，我們首先獲取輸入框中的關鍵字，并將其作為參數添加到URL中。然后，我們使用XMLHttpRequest對象的open方法指定HTTP請求的類型（GET或POST）以及數據的URL。最后，我們發送請求并等待服務器的響應。

當服務器返回響應后，我們可以在xhr對象的responseText屬性中找到返回的數據。這些數據可以是任何格式，如純文本、XML或JSON。根據實際情況，我們可以使用合適的方法來處理數據。

在這個例子中，我們將使用純文本數據。我們可以在事件處理程序中添加一些代碼，以將返回的結果展示給用戶。以下是示例代碼：

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var result = xhr.responseText;
var output = document.getElementById("output");
output.innerHTML = result;
}
};

在上面的代碼中，我們首先獲取一個具有id為“output”的元素并存儲在變量output中。然后，我們使用innerHTML屬性將返回的結果賦值給該元素，從而在頁面上顯示結果。

綜上所述，使用Ajax來獲取輸入框中的數據庫數據可以實現動態更新頁面的效果，而無需重新加載整個頁面。通過與服務器進行通信，我們可以根據用戶的輸入來獲取相關的數據庫數據，并將結果展示給用戶。這一功能在許多網頁應用程序中是非常實用的。