AJAX技术是一种在前端和后端之间进行异步通信的重要工具。通过使用AJAX，前端可以通过发送HTTP请求和接收HTTP响应的方式与后端进行数据交互。在本文中，我们将重点讨论如何使用AJAX发送数据至后端并进行接收和处理。

假设我们有一个简单的表单，其中包含姓名和年龄两个输入框。当用户在输入框中填写完数据后，点击提交按钮，我们希望将数据发送至后端并进行处理。在这个例子中，我们使用AJAX来实现这个功能。

// HTML代码
<form id="myForm">
<input type="text" name="name" id="nameInput" placeholder="姓名">
<input type="number" name="age" id="ageInput" placeholder="年龄">
<button type="button" onclick="submitData()">提交</button>
</form>
// JavaScript代码
function submitData() {
var name = document.getElementById("nameInput").value;
var age = document.getElementById("ageInput").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/submit-data", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 成功接收后端的响应
var response = JSON.parse(xhr.responseText);
console.log(response.message);
}
};
xhr.send(JSON.stringify({ name: name, age: age }));
}

在这段代码中，我们首先获取了姓名和年龄的输入值，并将其封装在一个JavaScript对象中。然后，我们创建了一个XMLHttpRequest对象，并通过调用open方法来设置请求的类型、URL和异步标识。接下来，我们通过调用setRequestHeader方法来设置请求头中的Content-Type属性，该属性指定了请求体的数据类型为JSON。之后，我们通过定义onreadystatechange事件处理程序来监听HTTP请求的状态变化，并在请求完成且状态码为200时，解析后端返回的响应数据。最后，我们通过调用send方法来发送HTTP请求，并将封装好的数据对象作为请求体传递给后端。

当我们点击提交按钮时，submitData函数将被调用。在函数内部，它首先获取了输入框中的值，并将这些值封装在一个对象中。随后，它创建了一个XMLHttpRequest对象并设置了请求的类型、URL和异步标识。值得注意的是，我们在请求头中设置了Content-Type属性为JSON，因为我们将使用JSON格式来发送数据至后端。之后，我们通过定义onreadystatechange事件处理程序来监听请求的状态变化。当请求完成且状态码为200时，我们将获取并解析后端返回的响应数据，并在控制台上打印出来。

// 后端代码（以Node.js为例）
app.post('/api/submit-data', function(req, res) {
var name = req.body.name;
var age = req.body.age;
// 对数据进行处理
// ...
var response = {
message: "数据已成功接收并处理"
};
res.send(JSON.stringify(response));
});

在后端代码中，我们通过定义一个路由处理程序来处理AJAX请求。当接收到来自前端的POST请求时，我们可以通过req.body对象获取请求体中的数据。在这个例子中，我们获取了姓名和年龄，并可以对它们进行一些处理。处理完成后，我们创建了一个响应对象，其中包含了一条消息用于表示已经成功接收并处理了数据。最后，我们使用res.send方法将响应对象转化为JSON字符串并返回给前端。

通过上述实例，我们可以看到通过使用AJAX，我们可以轻松地将数据发送至后端并进行处理。无论是通过表单提交、点击按钮或者其他交互方式，AJAX都能够提供快速且实时的数据交互体验，为前端开发提供了更多的灵活性和可扩展性。