在本章节中，我们将通过一个实际的例子来演示如何使用 AJAX 技术来实现网页与服务器之间的数据交互。我们将创建一个简单的网页，用户在网页上输入数据后，点击按钮将数据发送给服务器，服务器返回处理后的结果并在网页上显示。
步骤一：创建 HTML 结构
首先，我们需要创建一个 HTML 文件来构建我们的网页。在 HTML 文件中，我们需要一个输入框用来输入数据，一个按钮用来触发 AJAX 请求，并一个用来显示返回结果的区域。
// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
<title>AJAX Example</title>
</head>
<body>
<input type="text" id="dataInput">
<button onclick="sendData()">Send Data</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>步骤二：编写 JavaScript 代码
接下来，我们需要编写 JavaScript 代码来处理用户输入数据，并发送 AJAX 请求到服务器。在这个例子中，我们将使用原生 JavaScript 来实现 AJAX。
// www.javascriptcn.com code example
function sendData() {
var data = document.getElementById('dataInput').value;
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://example.com/api', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
document.getElementById('result').innerText = xhr.responseText;
} else {
document.getElementById('result').innerText = 'Error occurred';
}
}
};
xhr.send(JSON.stringify({ data: data }));
}在这段代码中，我们首先获取用户输入的数据，然后创建一个 XMLHttpRequest 对象并设置请求的方法、URL 和请求头。接着我们监听 XMLHttpRequest 对象的状态变化事件，当请求完成时，根据返回的状态码来更新网页上的结果区域。
步骤三：设置服务器端
最后，我们需要在服务器端创建一个接口来处理 AJAX 请求，并返回处理后的结果。在这个例子中，我们假设服务器端接口为 http://example.com/api，接收 POST 请求，并返回处理后的数据。
app.post('/api', (req, res) => {
const data = req.body.data;
// 进行一些处理
res.send(`Processed: ${data}`);
});现在，当用户在输入框中输入数据后，点击按钮发送数据，服务器将返回处理后的结果并显示在网页上。
这就是一个简单的 AJAX 实例，通过这个例子，我们可以更好地理解 AJAX 技术的应用。