AJAX（Asynchronous JavaScript and XML）是一种用于在无需重新加载整个网页的情况下，与服务器进行异步交互的技术。它通过在后台与服务器进行数据交换，使网页能够实现动态更新，提高用户体验。在Web开发中，常常需要在页面中动态地添加表格数据，而AJAX正是实现这一功能的理想选择。本文将介绍如何使用AJAX动态地添加表格数据，并通过举例说明其应用。

在AJAX中，使用XMLHttpRequest对象可以与服务器建立异步的HTTP(S)通信。要动态添加表格数据，首先需要向服务器发送请求，获取数据，然后将数据动态地添加到表格中。下面的代码演示了如何使用AJAX发送GET请求，从服务器获取数据，并通过DOM操作将数据动态地添加到表格中：

function addTableData() {
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 监听状态改变事件
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 数据请求成功，将数据添加到表格中
var response = JSON.parse(xhr.responseText);
var table = document.getElementById("myTable");
var newRow = table.insertRow();
var newCell1 = newRow.insertCell();
var newCell2 = newRow.insertCell();
newCell1.innerHTML = response.name;
newCell2.innerHTML = response.age;
}
};
// 发送GET请求
xhr.open("GET", "/data", true);
xhr.send();
}

以上代码首先创建了一个XMLHttpRequest对象，并为其设置了一个状态改变事件的监听器。在事件监听器中，通过检查请求的状态和状态码，判断是否成功获取到数据。如果请求成功，将通过JSON.parse()方法解析服务器返回的数据，并使用DOM操作将数据添加到表格中的新一行中。在这个例子中，服务器返回的数据是一个JSON对象，包含了姓名和年龄字段。

为了实现完整的示例，我们还需要一个服务器端的代码来处理AJAX请求并返回数据。下面是一个简单的Node.js例子：

// 通过Express框架创建一个简单的HTTP服务器
const express = require("express");
const app = express();
const port = 3000;
// 处理GET请求，返回 JSON 数据
app.get("/data", (req, res) =>{
// 模拟从数据库中获取数据，并返回
var data = {
name: "John",
age: 25
};
res.json(data);
});
// 启动服务器
app.listen(port, () =>{
console.log(`Server listening on port ${port}`);
});

在这个例子中，我们使用了Express框架来创建一个简单的HTTP服务器。当收到GET请求时，服务器会返回一个JSON对象作为响应。在实际的应用中，服务器端的代码会根据具体需求从数据库或其他数据源中获取数据。

通过以上的示例代码，我们可以看到如何使用AJAX动态地添加表格数据。在实际应用中，我们可以根据需要自定义发送请求的方式和数据的处理方法。AJAX技术提供了一种灵活且高效的方式来实现动态更新，使网页更加交互和用户友好。