AJAX（Asynchronous JavaScript and XML）是一種用于創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用程序的技術(shù)。它允許網(wǎng)頁(yè)在不刷新的情況下與服務(wù)器進(jìn)行通信和交換數(shù)據(jù)。本文將介紹如何使用AJAX從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)并將其傳送至后臺(tái)。通過(guò)一個(gè)具體的例子，我們將展示如何使用AJAX技術(shù)實(shí)現(xiàn)無(wú)縫的數(shù)據(jù)交互，為用戶提供更好的用戶體驗(yàn)。

假設(shè)我們正在開(kāi)發(fā)一個(gè)學(xué)生管理系統(tǒng)，需要從數(shù)據(jù)庫(kù)中獲取學(xué)生的詳細(xì)信息，比如姓名、年齡、性別等。我們可以使用AJAX來(lái)實(shí)現(xiàn)這一功能。

<script>
function getStudentDetails() {
// 創(chuàng)建XMLHttpRequest對(duì)象
var xhr = new XMLHttpRequest();
// 向服務(wù)器發(fā)送請(qǐng)求
xhr.open('GET', 'getStudents.php', true);
// 監(jiān)聽(tīng)服務(wù)器響應(yīng)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 處理服務(wù)器返回的數(shù)據(jù)
var response = JSON.parse(xhr.responseText);
displayStudentDetails(response);
}
}
// 發(fā)送請(qǐng)求
xhr.send();
}
function displayStudentDetails(response) {
// 解析JSON數(shù)據(jù)并顯示在頁(yè)面上
var studentList = document.getElementById('studentList');
for (var i = 0; i< response.length; i++) {
var student = response[i];
var listItem = document.createElement('li');
listItem.innerHTML = '姓名：' + student.name + '；年齡：' + student.age + '歲；性別：' + student.gender;
studentList.appendChild(listItem);
}
}
</script>

上述代碼使用JavaScript編寫(xiě)了一個(gè)函數(shù)getStudentDetails()，它調(diào)用了XMLHttpRequest對(duì)象向服務(wù)器發(fā)送一個(gè)GET請(qǐng)求。服務(wù)器響應(yīng)這個(gè)請(qǐng)求后，前端通過(guò)監(jiān)聽(tīng)xhr的onreadystatechange事件，等待服務(wù)器返回?cái)?shù)據(jù)。一旦服務(wù)器返回?cái)?shù)據(jù)，我們將使用JSON.parse()方法將其解析為JavaScript對(duì)象，并通過(guò)displayStudentDetails()函數(shù)將學(xué)生詳細(xì)信息顯示在頁(yè)面上。

在服務(wù)器端，我們需要編寫(xiě)一個(gè)PHP腳本（getStudents.php），該腳本從數(shù)據(jù)庫(kù)中獲取學(xué)生詳細(xì)信息并將其以JSON格式返回給前端。

<?php
// 連接數(shù)據(jù)庫(kù)
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "studentdb";
$conn = new mysqli($servername, $username, $password, $dbname);
// 檢查數(shù)據(jù)庫(kù)連接
if ($conn->connect_error) {
die("數(shù)據(jù)庫(kù)連接失敗：" . $conn->connect_error);
}
// 查詢學(xué)生詳細(xì)信息
$sql = "SELECT * FROM students";
$result = $conn->query($sql);
// 將查詢到的結(jié)果轉(zhuǎn)換為JSON格式
$students = array();
if ($result->num_rows >0) {
while ($row = $result->fetch_assoc()) {
$student = array(
'name' =>$row['name'],
'age' =>$row['age'],
'gender' =>$row['gender']
);
array_push($students, $student);
}
}
// 關(guān)閉數(shù)據(jù)庫(kù)連接
$conn->close();
// 將學(xué)生詳細(xì)信息以JSON格式返回給前端
header('Content-type: application/json');
echo json_encode($students);
?>

PHP腳本的主要功能是連接數(shù)據(jù)庫(kù)、查詢學(xué)生詳細(xì)信息，并將查詢結(jié)果轉(zhuǎn)換為JSON格式后返回給前端。我們首先與數(shù)據(jù)庫(kù)建立連接，然后執(zhí)行SQL查詢，將查詢結(jié)果存儲(chǔ)在一個(gè)數(shù)組中。最后，我們使用header()函數(shù)設(shè)置響應(yīng)頭為JSON格式，并使用json_encode()函數(shù)將學(xué)生信息數(shù)組轉(zhuǎn)換為JSON格式的字符串，最終將其返回給前端。

通過(guò)以上的代碼和解釋，我們展示了如何使用AJAX技術(shù)從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)并將其傳送至后臺(tái)。這種技術(shù)可以實(shí)現(xiàn)無(wú)縫的數(shù)據(jù)交互，提供更好的用戶體驗(yàn)。無(wú)論是學(xué)生管理系統(tǒng)還是其他需要與數(shù)據(jù)庫(kù)交互的網(wǎng)頁(yè)應(yīng)用程序，AJAX都是一種強(qiáng)大的工具。