XMLHttpRequest 实现请求案例

发布时间：2024-05-31 09:10:00

XMLHttpRequest 是一种用于在后台与服务器交换数据的技术，它允许在不刷新整个页面的情况下更新页面的一部分。通过 JavaScript 中的 XMLHttpRequest 对象，我们可以向服务器发送请求并获取响应，从而实现异步数据交换。

XMLHttpRequest 可以用来获取任意类型的数据，如文本、JSON、XML 等，并且可以在不影响用户体验的情况下更新页面。通过监听不同阶段的事件，我们可以根据请求的状态来执行相应的操作，例如在请求完成后更新页面的内容。

XMLHttpRequest 主要有四个步骤:

1. 创建 XMLHttpRequest 对象。

2. 连接服务器，使用 open() 方法来指定请求的类型、URL 以及是否进行异步操作。

3. 发送请求，使用 send() 方法将请求发送到服务器。

4. 监听状态变化，可以通过 readyState 属性和相应的事件处理函数来处理服务器的响应。

var xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            // 回调 
            // callback(response); 
        } else {
            // 请求失败时的处理
            console.error('POST request failed');
        }
    }
};
xhr.send(JSON.stringify(data));