XML HttpRequest 如何发送 post、get 请求？

XMLHttpRequest 是一个在浏览器中用于与服务器交互的 Web API，它可以在不刷新整个页面的情况下，向服务器发送请求并接收响应，从而实现动态更新网页内容。无论你是想从服务器获取数据（GET 请求）还是向服务器发送数据（POST 请求），XHR 都能帮你实现。本文将介绍如何使用 XMLHttpRequest 发送 GET 和 POST 请求，帮助你快速上手这一技术。

发送 GET 请求

1.创建 XMLHttpRequest 对象

首先，我们需要创建一个 XMLHttpRequest 对象。这很简单，只需一行代码：

var xhr = new XMLHttpRequest();

2.配置请求

接下来，我们需要配置这个请求，指定请求的类型、URL 和是否异步：

xhr.open('GET', 'https://api.example.com/data', true);

这里的open方法有三个参数：请求类型（'GET'）、目标 URL 和是否异步（true 表示异步）。

3.发送请求

现在，我们可以发送请求了：

xhr.send();

4.处理响应

我们需要处理服务器的响应，可以通过onload事件来实现：

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log('成功：', xhr.responseText);
    } else {
        console.error('请求失败');
    }
};

完整示例

将以上步骤整合起来，我们得到一个完整的 GET 请求示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log('成功：', xhr.responseText);
    } else {
        console.error('请求失败');
    }
};
xhr.send();

这段代码会向https://api.example.com/data发送一个 GET 请求，并在请求成功时输出响应内容。

发送 POST 请求

1.创建 XMLHttpRequest 对象

创建 XHR 对象的步骤与 GET 请求相同：

var xhr = new XMLHttpRequest();

2.配置请求

这次我们配置的是一个 POST 请求：

xhr.open('POST', 'https://api.example.com/data', true);

3.设置请求头

POST 请求通常需要设置请求头，例如指定内容类型：

xhr.setRequestHeader('Content-Type', 'application/json');

4.发送请求

发送请求时，我们需要传递请求体：

var data = JSON.stringify({ key: 'value' });
xhr.send(data);

5.处理响应

处理响应的方式与 GET 请求相同：

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log('成功：', xhr.responseText);
    } else {
        console.error('请求失败');
    }
};

完整示例

完整的 POST 请求代码如下：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log('成功：', xhr.responseText);
    } else {
        console.error('请求失败');
    }
};
var data = JSON.stringify({ key: 'value' });
xhr.send(data);

这段代码会向https://api.example.com/data发送一个 POST 请求，并在请求成功时输出响应内容。

处理响应

在处理响应时，两个重要的属性是readyState和status：

readyState：表示请求的状态（0-4），4 表示请求完成。
status：HTTP 状态码，200-299 表示成功。
你可以通过这些属性来判断请求是否成功，并处理响应数据：

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status >= 200 && xhr.status < 300) {
            console.log('成功：', xhr.responseText);
        } else {
            console.error('请求失败');
        }
    }
};

错误处理

在网络请求中，错误处理非常重要。你可以使用onerror事件来处理请求错误：

xhr.onerror = function() {
    console.error('请求发生错误');
};

结合之前的代码，我们可以处理请求中的各种错误情况。

异步与同步请求

XHR 默认是异步的，但你也可以发送同步请求（不推荐，因为它会阻塞页面）：

xhr.open('GET', 'https://api.example.com/data', false); // 同步请求
xhr.send();
if (xhr.status >= 200 && xhr.status < 300) {
    console.log('成功：', xhr.responseText);
} else {
    console.error('请求失败');
}

请注意，同步请求会导致页面在请求完成之前无法响应用户操作，所以一般应避免使用。

安全性和跨域请求

现代浏览器中，出于安全考虑，跨域请求需要处理 CORS（跨域资源共享）：

服务器需要设置适当的 CORS 头（例如Access-Control-Allow-Origin）
客户端无需额外配置，但需要处理跨域请求的响应头

使用 Apifox 进行 API 测试与 Mock 数据

在开发过程中，测试和模拟 API 请求是非常重要的。这里我们介绍一个强大的工具：Apifox。Apifox 是一个集 API 文档、测试、Mock、自动化测试于一体的工具，能够显著提升开发和测试的效率。它不仅支持管理 API，还支持快速生成 Mock 数据，并且可以直接生成代码，这对前后端分离开发非常有帮助。

你可以使用 Apifox 来测试 API 的响应，以校验数据的准确性。

立即体验 Apifox

可以自动生成 Mock 数据，帮助前端开发者在后端 API 尚未完成时进行开发和测试。

还可以通过【文档->生成代码】选项，快速生成接口请求代码和业务代码。

还有其他自动化测试、性能测试、在线文档分享、迭代分支等强大功能，快去试试吧！

总结

本文介绍了如何使用 XMLHttpRequest 发送 GET 和 POST 请求，包括创建 XHR 对象、配置请求、发送请求以及处理响应。通过掌握这些基础知识，你可以轻松实现与服务器的交互，动态更新网页内容。