AJAX（Asynchronous JavaScript And XML）是一種基于JavaScript的編程技術，可以使網頁實現異步更新，不需要刷新整個頁面就能從服務器讀取數據。本文將介紹如何使用AJAX從JavaScript中讀取數據庫數據，并對數據進行格式化的操作。通過這種方式，我們可以在網頁中動態地顯示數據庫中的內容，提供更好的用戶體驗。

假設我們有一個簡單的數據庫表格，存儲了學生的成績信息。表格的結構如下：

student_id | student_name | grade |
|------------|--------------|-------|
| 1          | Alice        | 80    |
| 2          | Bob          | 90    |
| 3          | Cindy        | 85

我們的目標是在網頁中展示這個表格的內容，并對成績進行格式化，例如將成績大于等于90分的學生名稱變成紅色。

首先，我們需要在HTML文件中創建一個用來展示數據庫表格內容的容器，例如一個

<table id="gradeTable">
<thead>
<tr>
<th>學生ID</th>
<th>學生姓名</th>
<th>成績</th>
</tr>
</thead>
<tbody></tbody>
</table>

接下來，我們可以使用JavaScript中的XMLHttpRequest對象來發送一個AJAX請求，讀取數據庫中的數據。在這個例子中，我們假設后臺服務提供了一個API接口，可以返回學生成績的JSON數據。以下是一個使用AJAX讀取數據并將其填充到HTML表格的例子：

<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/grades', true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
var table = document.getElementById('gradeTable');
var tbody = table.getElementsByTagName('tbody')[0];
for(var i = 0; i< data.length; i++) {
var row = document.createElement('tr');
var idCell = document.createElement('td');
var nameCell = document.createElement('td');
var gradeCell = document.createElement('td');
idCell.innerText = data[i].student_id;
nameCell.innerText = data[i].student_name;
gradeCell.innerText = data[i].grade;
if(data[i].grade >= 90) {
nameCell.style.color = 'red';
}
row.appendChild(idCell);
row.appendChild(nameCell);
row.appendChild(gradeCell);
tbody.appendChild(row);
}
}
}
xhr.send();
</script>

在上述代碼中，我們首先創建了一個XMLHttpRequest對象，并使用open()方法指定請求的方法、URL和是否使用異步請求。然后，我們通過設置onreadystatechange事件的回調函數來處理請求的響應。當readyState為4（請求已完成）且status為200（請求成功）時，我們將從服務器返回的JSON數據解析并遍歷，按照表格的結構創建相應的HTML元素，并將數據填充到表格中。如果學生成績大于等于90分，我們還為學生姓名的單元格設置了紅色的樣式。

通過使用AJAX技術，我們可以實現從JavaScript中讀取數據庫數據，并對數據進行格式化的操作。這可以讓我們在網頁中動態地顯示數據庫中的內容，提供更好的用戶體驗。以上是一個簡單的示例，你可以根據自己的需求和具體的數據庫結構進行進一步的開發和定制。