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中读取数据库数据，并对数据进行格式化的操作。这可以让我们在网页中动态地显示数据库中的内容，提供更好的用户体验。以上是一个简单的示例，你可以根据自己的需求和具体的数据库结构进行进一步的开发和定制。