js进阶——XHR讲解与应用

大家好，欢迎来到IT知识分享网。

什么是 XHR？

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

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

为什么使用 XHR？

1. 异步通信：允许在后台与服务器交换数据，不干扰用户操作。
2. 动态更新页面：使网页内容可以根据服务器的响应进行局部更新，而无需刷新整个页面。
3. 跨平台支持：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)); 

小结

• XHR 是 JavaScript 中与服务器进行异步通信的核心 API。
• 可以处理多种请求类型（GET、POST 等）和数据格式（JSON、XML、HTML）。
• 使用 onreadystatechange 或 onload 等事件来处理服务器的响应。
• 尽量使用异步请求以避免阻塞用户界面。
• 可以通过 CORS 技术解决跨域问题。