Ajax（Asynchronous JavaScript and XML）是一种在 Web 应用中发送和接收数据的技术，它可以实现在不重新加载整个页面的情况下，与服务器进行数据交互。通过使用 Ajax，我们可以在后端请求数据时提高应用程序的性能和用户体验。本文将介绍如何使用 Ajax 发送请求并获取后端数据。

首先，我们需要创建一个 XMLHttpRequest 对象来发送 Ajax 请求。XMLHttpRequest 是内置的 JavaScript 对象，可以通过它发送 HTTP 请求并接收服务器响应。下面是一个简单的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.send();

在这个示例中，我们使用 XMLHttpRequest 的 open 方法来指定请求的类型和 URL，并使用 send 方法发送请求。这个请求是一个 GET 请求，URL 是 https://api.example.com/data。第三个参数传递了一个布尔值 true，表示请求是异步的。

接下来，我们需要处理服务器的响应。我们可以通过监听 XMLHttpRequest 对象的 readyState 属性来确定请求的状态，并通过监听其 onreadystatechange 事件来获取服务器的响应。下面是一个获取响应的示例：

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
// 在这里处理响应
}
};

在这个示例中，我们通过判断 readyState 的值是否为 4，并且 status 的值是否为 200 来确定请求是否已经完成并且成功。如果是，我们可以使用 xhr 对象的 responseText 属性获取服务器的响应数据。

接下来，我们可以使用获取到的响应数据来更新我们的页面。例如，我们可以将获取到的数据显示在页面的某个元素中。下面是一个将响应数据显示在页面上的示例：

xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = xhr.responseText;
document.getElementById('data').innerHTML = response;
}
};

在这个示例中，我们使用 responseText 属性获取到了服务器的响应数据，并使用 document.getElementById 方法获取到页面上的一个元素（id 为 'data' 的元素），然后将获取到的响应数据设置为该元素的 innerHTML。

除了 GET 请求之外，我们还可以发送其他类型的请求，例如 POST 请求。发送 POST 请求时，我们需要设置请求头的 Content-Type 属性，并将需要发送的数据作为参数传递给 send 方法。下面是一个发送 POST 请求的示例：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ name: 'John', age: 30 }));

在这个示例中，我们通过设置请求头的 Content-Type 属性为 'application/json' 来指定发送的数据类型为 JSON，并使用 JSON.stringify 方法将一个对象转换为 JSON 字符串，然后将该字符串作为参数传递给 send 方法。

通过使用 Ajax 发送后端请求并获取数据，我们可以提高应用程序的性能和用户体验。无论是获取后端的数据还是更新页面，Ajax 都是一个非常有用的技术。