Ajax前后端交互利器详解

在这个系列的第二部分，我们将会详细介绍Ajax请求的构建和发送，以及如何处理返回的数据。

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('POST', 'your_api_endpoint', true);
 
// 设置请求头，如需要
xhr.setRequestHeader('Content-Type', 'application/json');
 
// 注册状态变化的监听器
xhr.onreadystatechange = function() {
    // 请求完成并且响应状态码为 200
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            // 处理返回的数据
            var response = JSON.parse(xhr.responseText);
            console.log(response);
        } else {
            // 处理错误，如响应状态码404、500等
            console.error('请求失败，状态码：' + xhr.status);
        }
    }
};
 
// 发送请求，如果是 POST 请求，需要传入数据
xhr.send(JSON.stringify({ key: 'value' }));

这段代码展示了如何使用原生的XMLHttpRequest对象来发送一个POST请求，并处理响应。它设置了请求的类型、URL、请求头和监听器来处理请求的不同阶段。当请求完成并且服务器返回200响应状态码时，它会解析返回的JSON数据。如果请求失败，它会在控制台输出错误信息。这是一个非常基础且实用的Ajax请求构建和处理方法。