AJAX (Asynchronous JavaScript and XML) 是一種用于創建交互式網頁應用程序的技術，它通過在后臺與服務器進行數據交換，實現在頁面上無需刷新的動態更新。MVC (Model-View-Controller) 則是一種軟件設計模式，用于將應用程序的數據、用戶界面和業務邏輯分離，以提升代碼的可維護性和可擴展性。在本文中，我們將探討如何使用 AJAX 和 MVC 來實現查詢數據庫中的數據。

假設我們有一個簡單的學生信息管理系統，其中包含學生的姓名、年齡和成績等信息。我們需要在頁面上顯示所有學生的信息，并且能夠根據學生的姓名進行快速查詢。為了實現這一功能，我們將使用 AJAX 來異步加載數據庫中的數據，同時使用 MVC 模式來將數據、界面和邏輯分離。

首先，我們需要創建一個用于獲取和處理數據的服務器端 API。我們可以使用 PHP 或其他后端語言來實現這個 API。以下是一個簡單的 PHP 接口，用于從數據庫中查詢所有學生的信息：

<?php
// 連接到數據庫
$connection = new PDO("mysql:host=localhost;dbname=student_db", "username", "password");
// 查詢所有學生的信息
$query = $connection->query("SELECT * FROM students");
$students = $query->fetchAll(PDO::FETCH_ASSOC);
// 返回學生信息的 JSON 數據
header("Content-Type: application/json");
echo json_encode($students);
?>

接下來，我們可以使用 JavaScript 中的 AJAX 來異步加載這些數據，并在頁面上進行展示。以下是一個簡單的使用 jQuery 的例子：

$("button").click(function(){
// 發送 AJAX 請求
$.ajax({
url: "api.php",
type: "GET",
dataType: "json",
success: function(data){
// 清空之前的數據
$("#students").empty();
// 遍歷學生列表，顯示每個學生的信息
$.each(data, function(index, student){
var name = student.name;
var age = student.age;
var grade = student.grade;
// 將學生信息添加到頁面上
$("#students").append("<tr><td>" + name + "</td><td>" + age + "</td><td>" + grade + "</td></tr>");
});
}
});
});

在上述代碼中，我們首先監聽一個按鈕的點擊事件。當按鈕被點擊時，我們使用 AJAX 發送一個 GET 請求到服務器的 API 接口，并期望返回的數據格式為 JSON。一旦成功獲取到數據，我們首先清空之前的學生信息列表，并遍歷返回的學生數組。對于每個學生，我們將他們的姓名、年齡和成績添加到頁面上的表格中。

通過以上的代碼實現，我們可以在頁面加載完成后，使用 AJAX 異步加載數據庫中的學生信息，并在頁面上展示出來。此外，我們還可以進一步強化這個功能，使得在用戶輸入學生的姓名后，能夠實時查詢相關的學生信息。

下面，我們將使用 MVC 模式來進一步優化這個功能。首先，我們需要將數據邏輯移至一個獨立的模型中。

class StudentModel {
constructor() {
this.students = [];
}
// 從服務器 API 加載學生信息
loadStudents() {
return new Promise((resolve, reject) =>{
$.ajax({
url: "api.php",
type: "GET",
dataType: "json",
success: resolve,
error: reject
});
});
}
// 根據姓名查詢學生信息
searchStudents(name) {
return this.students.filter(student =>student.name.includes(name));
}
}

在上述代碼中，我們創建了一個名為 StudentModel 的類，其中包含了一個用于存儲所有學生信息的數組。我們提供了兩個方法：loadStudents 和 searchStudents。loadStudents 方法用于從服務器 API 加載學生信息，并返回一個 Promise 對象，以便在數據加載完成后進行處理。searchStudents 方法用于根據姓名查詢學生信息，并返回匹配的結果數組。

接下來，我們需要更新控制器部分的代碼：

class StudentController {
constructor(model, view) {
this.model = model;
this.view = view;
// 監聽視圖中的事件
this.view.searchEvent.attach(this.searchStudents.bind(this));
// 加載學生信息
this.loadStudents();
}
// 加載學生信息
loadStudents() {
this.model.loadStudents()
.then(data =>{
this.model.students = data;
this.view.displayStudents(data);
})
.catch(error =>{
console.log("Error loading students: " + error);
});
}
// 根據姓名查詢學生信息
searchStudents(sender, args) {
const name = args.name;
const results = this.model.searchStudents(name);
this.view.displayStudents(results);
}
}

在上述代碼中，我們創建了一個名為 StudentController 的類，它接受一個模型對象和一個視圖對象作為構造函數的參數。在構造函數中，我們首先使用視圖對象的 searchEvent 事件進行監聽，一旦搜索事件被觸發，就調用 searchStudents 方法進行查詢。然后我們加載學生信息，并將加載的數據傳遞給視圖進行展示。

最后，我們需要更新視圖部分的代碼：

class StudentView {
constructor() {
this.searchEvent = new Event(this);
// 監聽搜索按鈕的點擊事件
$("button").click(this.onSearchClick.bind(this));
}
// 獲取輸入框中的姓名，并觸發搜索事件
onSearchClick() {
const name = $("#nameInput").val();
this.searchEvent.notify({name: name});
}
// 在頁面上展示學生信息
displayStudents(students) {
// 清空之前的數據
$("#students").empty();
// 遍歷學生列表，顯示每個學生的信息
$.each(students, function(index, student){
var name = student.name;
var age = student.age;
var grade = student.grade;
// 將學生信息添加到頁面上
$("#students").append("<tr><td>" + name + "</td><td>" + age + "</td><td>" + grade + "</td></tr>");
});
}
}

在上述代碼中，我們創建了一個名為 StudentView 的類，其中包含了一個名為 searchEvent 的事件，用于在點擊搜索按鈕時觸發。我們在構造函數中監聽了搜索按鈕的點擊事件，并在事件觸發時獲取輸入框中的姓名，并通過 searchEvent 事件觸發 searchStudents 方法進行查詢。我們還更新了 displayStudents 方法用于在頁面上展示學生信息。

通過以上的代碼實現，我們使用 AJAX 和 MVC 組合，實現了一個簡單的查詢數據庫數據的功能。這種方式提供了良好的代碼組織結構，并將數據、界面和邏輯分離，從而提升了代碼的可維護性和可擴展性。