Ajax（Asynchronous JavaScript and XML）是一种通过在后台与服务器进行异步通信的技术，可以实现网页局部更新而无需刷新整个页面。常用于通过前端与后端进行数据交互。以下是一个使用 Ajax 的简单示例：
<!DOCTYPE html>
<html>
<head>
<title>Ajax 示例</title>
</head>
<body>
<h1>Ajax 示例</h1>
<button onclick="getData()">获取数据</button>
<div id="result"></div>
<script>
// 发送 Ajax 请求获取数据
function getData() {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
const data = JSON.parse(xhr.responseText);
// 将获取的数据显示在页面上
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = JSON.stringify(data);
}
};
xhr.send();
}
</script>
</body>
</html>
在上述示例中，点击 "获取数据" 按钮时，会使用 Ajax 发起 GET 请求到后端的 /api/data 端点，并获取后端返回的数据。获取到数据后，将其显示在页面上的 result 元素中。
请注意，在实际应用中，可能需要处理更多的 Ajax 请求事件、错误处理、发送数据等。此处提供的示例是一个基本的框架，你可以根据实际需求进行修改和扩展。
同时，需要在后端服务器上提供一个对应的 /api/data 端点，以处理来自前端的请求并返回数据。这个后端代码可以与前面提到的后端代码（Node.js）结合使用。