AJAX（Asynchronous JavaScript and XML）是一種用于創(chuàng)建快速和動態(tài)網(wǎng)頁的技術。通過使用AJAX，網(wǎng)頁可以在不刷新整個頁面的情況下與服務器進行通信并獲取數(shù)據(jù)。這種技術對于實時更新內(nèi)容而無需用戶干預非常有用。本文將介紹如何使用AJAX從數(shù)據(jù)庫中獲取內(nèi)容，并通過實例說明AJAX的強大功能。

假設我們有一個汽車銷售網(wǎng)站，網(wǎng)站上展示了不同品牌、型號和價格的汽車。這些汽車的信息存儲在一個數(shù)據(jù)庫中，并且我們希望在網(wǎng)頁上展示此數(shù)據(jù)。使用AJAX技術，我們可以在不刷新整個頁面的情況下從數(shù)據(jù)庫中將汽車信息提取出來，并將其動態(tài)地展示給用戶。

function getCarData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "getCarData.php", true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
displayCarData(response);
} else {
//顯示加載提示或處理其他錯誤
}
};
xhr.send();
}

首先，我們需要創(chuàng)建一個XMLHttpRequest對象，并使用open方法指定GET請求的URL。在這個例子中，我們將請求發(fā)送到"getCarData.php"頁面，該頁面負責從數(shù)據(jù)庫中獲取汽車數(shù)據(jù)。接下來，我們設置onreadystatechange事件處理程序來處理服務器響應。在這個例子中，當準備狀態(tài)（readyState）為4并且狀態(tài)碼（status）為200時，表示服務器響應已成功，我們可以從響應文本（responseText）獲取數(shù)據(jù)。

接下來，我們需要解析響應文本中的JSON數(shù)據(jù)，并將其傳遞給一個名為displayCarData的函數(shù)。在displayCarData函數(shù)中，我們可以將數(shù)據(jù)動態(tài)地插入到網(wǎng)頁的指定位置，例如一個表格中。

function displayCarData(data) {
var carTable = document.getElementById("carTable");
var rows = carTable.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
carTable.removeChild(rows[i]);
}
for (var j = 0; j < data.length; j++) {
var car = data[j];
var newRow = document.createElement("tr");
var brandCell = document.createElement("td");
var modelCell = document.createElement("td");
var priceCell = document.createElement("td");
brandCell.innerHTML = car.brand;
modelCell.innerHTML = car.model;
priceCell.innerHTML = car.price;
newRow.appendChild(brandCell);
newRow.appendChild(modelCell);
newRow.appendChild(priceCell);
carTable.appendChild(newRow);
}
}

在displayCarData函數(shù)中，我們首先獲取一個id為"carTable"的表格元素，并刪除表格中除第一行（標題行）以外的所有行。然后，我們通過遍歷數(shù)據(jù)數(shù)組，在表格中插入新的行，并為每個汽車的品牌、型號和價格創(chuàng)建新的單元格，最后將這些單元格添加到新的行中，并將行添加到表格中。

最后，我們需要在網(wǎng)頁加載時調(diào)用getCarData函數(shù)，以便在頁面上加載汽車數(shù)據(jù)。

document.addEventListener("DOMContentLoaded", function () {
getCarData();
});

在這個例子中，我們將getCarData函數(shù)與DOMContentLoaded事件監(jiān)聽器綁定在一起。這意味著當DOM內(nèi)容加載完畢后，即可調(diào)用getCarData函數(shù)來獲取并展示汽車數(shù)據(jù)。

通過使用AJAX技術，我們可以快速而動態(tài)地從數(shù)據(jù)庫中獲取內(nèi)容，并將其展示在網(wǎng)頁上。這種方式避免了刷新整個頁面的麻煩，使用戶能夠獲得實時更新的數(shù)據(jù)。將AJAX與數(shù)據(jù)庫結合使用，可以為用戶提供更好的體驗和功能。