AJAX（Asynchronous JavaScript and XML）是一種用于創建交互式Web應用程序的技術。借助AJAX，我們可以在不刷新整個頁面的情況下，通過異步加載數據，實現動態的頁面內容更新。在數據表查詢功能中，AJAX是十分有用的，它可以在輸入查詢條件時，即時地從數據庫獲取相關數據并將其顯示在頁面上。本文將詳細介紹如何使用AJAX來實現表查詢數據類型。

假設我們有一個學生信息數據庫，其中包含學生的姓名、年齡和成績。我們希望在頁面上創建一個查詢表單，用戶可以輸入學生的姓名，然后點擊查詢按鈕獲取該學生的年齡和成績信息。使用AJAX，我們可以在用戶輸入學生姓名時，即時發送請求到服務器，獲取相應的學生信息并將其顯示在頁面上。

// HTML代碼
<form id="student-form">
<label for="student-name">學生姓名</label>
<input type="text" id="student-name">
<button type="submit" id="search-btn">查詢</button>
</form>
<div id="result"></div>
// JavaScript代碼
document.querySelector('#student-form').addEventListener('submit', function(event) {
event.preventDefault();
var studentName = document.querySelector('#student-name').value;
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/students?name=' + studentName, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var student = JSON.parse(xhr.responseText);
document.querySelector('#result').innerHTML = '姓名：' + student.name + '，年齡：' + student.age + '，成績：' + student.score;
}
};
xhr.send();
});

以上代碼中，我們首先使用JavaScript獲取了表單中輸入的學生姓名。然后，創建了一個XMLHttpRequest對象，使用GET方法向服務器發送了一個包含查詢條件的請求。服務器收到請求后，根據查詢條件從數據庫中獲取相應的學生信息，并將其作為JSON格式的字符串返回給客戶端。在客戶端，我們使用JSON.parse方法將返回的字符串轉換為JSON對象，然后將學生信息顯示在頁面的result元素中。

除了上述示例中的GET請求，AJAX還支持POST請求。在某些情況下，我們可能需要在查詢表單中選擇不同的查詢條件，然后將條件以POST請求的形式發送給服務器。下面是一個POST請求的示例：

// HTML代碼
<form id="student-form">
<label for="student-name">學生姓名</label>
<input type="text" id="student-name">
<label for="student-age">學生年齡</label>
<input type="text" id="student-age">
<button type="submit" id="search-btn">查詢</button>
</form>
<div id="result"></div>
// JavaScript代碼
document.querySelector('#student-form').addEventListener('submit', function(event) {
event.preventDefault();
var studentName = document.querySelector('#student-name').value;
var studentAge = document.querySelector('#student-age').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', '/api/students', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var student = JSON.parse(xhr.responseText);
document.querySelector('#result').innerHTML = '姓名：' + student.name + '，年齡：' + student.age + '，成績：' + student.score;
}
};
xhr.send(JSON.stringify({ name: studentName, age: studentAge }));
});

在上述示例中，我們多了一個學生年齡的輸入框，并將查詢條件以JSON格式的字符串發送給服務器。在服務器端，我們需要相應地解析POST請求的參數，然后根據查詢條件從數據庫中獲取相應的學生信息。

綜上所述，通過使用AJAX，我們可以輕松地實現表查詢數據類型的功能。無論是GET請求還是POST請求，我們都可以及時獲取數據庫中的數據并將其顯示在頁面上，從而提供更好的用戶體驗。