js进阶——XHR讲解与应用

OEC小胖胖

于 2024-10-01 21:18:10 发布

阅读量538

点赞数 12

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript 前端 web

本文链接：https://blog.csdn.net/2301_79858914/article/details/142674847

版权

JavaScript 专栏收录该内容

92 篇文章 1 订阅

订阅专栏

什么是 XHR？

XHR 是 XMLHttpRequest 的缩写，是 JavaScript 中用来与服务器进行异步通信的 API。通过它，网页可以在不重新加载页面的情况下从服务器请求数据、发送数据，并在收到服务器响应后更新网页内容。

尽管名字里有 “XML”，但 XMLHttpRequest 其实可以处理任何类型的数据，包括 JSON、HTML、纯文本等。

为什么使用 XHR？

异步通信：允许在后台与服务器交换数据，不干扰用户操作。
动态更新页面：使网页内容可以根据服务器的响应进行局部更新，而无需刷新整个页面。
跨平台支持：XHR 是标准的浏览器 API，被所有主流浏览器支持。

如何使用 XHR？

使用 XHR 主要包括以下几个步骤：

1. 创建 XMLHttpRequest 对象

这是与服务器进行通信的关键对象。可以通过 new XMLHttpRequest() 创建一个实例：

let xhr = new XMLHttpRequest();

2. 初始化请求

通过 open() 方法初始化请求。这个方法的语法如下：

xhr.open(method, url, async);

method：请求方法，比如 "GET" 或 "POST"。
url：请求的目标 URL。
async：是否异步执行，true 表示异步，false 表示同步（推荐使用异步）。

例如，发起一个 GET 请求：

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

3. 设置请求头（可选）

有些情况下需要设置 HTTP 请求头来发送额外的信息，比如指定内容类型：

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

4. 发送请求

通过 send() 方法发送请求。如果是 GET 请求，直接调用 send() 即可：

xhr.send();

如果是 POST 请求，需要在 send() 中传递请求体（通常是 JSON 数据）：

let data = JSON.stringify({ name: 'John', age: 30 });
xhr.send(data);

5. 监听响应

通过监听 onreadystatechange 事件，或者使用 load、error 等事件来处理服务器的响应。

onreadystatechange 的每个状态（readyState）对应着请求的不同阶段：

0: 请求未初始化。
1: 服务器连接已建立。
2: 请求已接收。
3: 请求处理中。
4: 请求已完成，响应已就绪。

通常我们关心的是 readyState == 4，表示请求完成后，可以通过 status 判断是否成功：

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 成功处理响应
        console.log(xhr.responseText);
    } else if (xhr.readyState == 4 && xhr.status != 200) {
        // 处理错误
        console.error('Error: ' + xhr.status);
    }
};

或者使用更现代的 load 和 error 事件：

xhr.onload = function() {
    if (xhr.status == 200) {
        console.log(xhr.responseText);
    } else {
        console.error('Request failed. Status: ' + xhr.status);
    }
};

xhr.onerror = function() {
    console.error('Request error');
};

请求方法的选择

GET：常用于从服务器获取数据。请求参数通常附加在 URL 后面。
POST：常用于向服务器提交数据。数据通常放在请求体中。

例如，GET 请求：

xhr.open('GET', 'https://api.example.com/data?id=123', true);
xhr.send();

POST 请求：

xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ id: 123 }));

同步与异步

异步是 XHR 的默认模式。它的好处是不会阻塞页面其他操作，用户可以继续与页面交互。

如果你将 async 参数设置为 false，请求将变为同步请求，意味着 JavaScript 将等待响应返回后再继续执行下一行代码。同步请求会阻塞浏览器，影响用户体验，不推荐使用。

异步请求示例：

xhr.open('GET', 'https://api.example.com/data', true); // true表示异步
xhr.send();

同步请求示例：

xhr.open('GET', 'https://api.example.com/data', false); // false表示同步
xhr.send();

响应类型

可以通过 xhr.responseType 来指定希望接收的数据类型。常见的类型包括：

“” (默认)：字符串。
“json”：JSON 格式。
“document”：HTML/XML 文档。
“blob”：二进制大对象。
“arraybuffer”：二进制缓冲区。

例如，接收 JSON 数据：

xhr.responseType = 'json';
xhr.onload = function() {
    if (xhr.status == 200) {
        console.log(xhr.response);  // 自动转换为 JavaScript 对象
    }
};

处理跨域请求

XHR 的请求遵循同源策略，即只能请求与当前页面相同域名、协议、端口的资源。如果需要请求其他域名的资源，需要服务器设置 CORS（跨域资源共享），或者使用其他技术（如 JSONP）。

完整的 XHR 示例

这是一个完整的 XHR 异步请求示例：

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);

xhr.onload = function() {
    if (xhr.status == 200) {
        let data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.error('Error: ' + xhr.status);
    }
};

xhr.onerror = function() {
    console.error('Request error');
};

xhr.send();

XMLHttpRequest 的替代方案

尽管 XHR 强大，但现代开发中更多使用 Fetch API，它提供了更简洁、基于 Promise 的方式来处理 HTTP 请求，并且支持更多特性。示例：

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));