JavaScript 向服务器发送请求并等待响应

在现代 Web 开发中，JavaScript 与服务器之间的通信至关重要。向服务器发送请求并等待响应是实现动态网页功能的关键环节。

我们需要了解 XMLHttpRequest 对象，它是 JavaScript 中最早用于与服务器进行异步通信的技术。使用 XMLHttpRequest，我们可以创建一个请求对象，打开连接，设置请求方法（如 GET 或 POST），添加请求头，发送请求并监听状态变化以获取响应。例如：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'example.com/api/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const response = xhr.responseText;
        console.log(response);
    }
};
xhr.send();

然而，随着技术发展，Fetch API 成为了更受欢迎的选择。它提供了更简洁、现代化的语法来处理网络请求。Fetch 返回一个 Promise，使得异步操作更加直观。示例代码如下：

fetch('example.com/api/data')
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error('Error:', error));

当发送 POST 请求时，我们可以传递一个配置对象来设置请求方法、请求体等。

fetch('example.com/api/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
})
 .then(response => response.json())
 .then(data => console.log(data))
 .catch(error => console.error('Error:', error));

在等待响应的过程中，我们可以通过加载指示器来提升用户体验。例如，在发送请求前显示加载动画，收到响应后隐藏动画。

document.getElementById('loading').style.display = 'block';
fetch('example.com/api/data')
 .then(response => response.json())
 .then(data => {
        document.getElementById('loading').style.display = 'none';
        console.log(data);
    })
 .catch(error => console.error('Error:', error));

JavaScript 向服务器发送请求并等待响应是构建交互式 Web 应用的核心操作。熟练掌握 XMLHttpRequest 和 Fetch API，能够帮助开发者高效地实现数据交互，为用户带来流畅的体验。通过合理处理响应和优化等待过程，我们可以打造出功能强大且用户友好的 Web 应用程序。