JavaScript发送HTTP请求: fetch和XMLHttpRequest详解

JavaScript发送HTTP请求: fetch和XMLHttpRequest详解

在Web开发中，经常需要使用JavaScript发送HTTP请求，与服务器进行数据交互。JavaScript提供了两种常用的API来实现这一目标：fetch和XMLHttpRequest。

1. 使用fetch发送HTTP请求

fetch API是现代JavaScript中发送HTTP请求的首选方式，它提供了简洁易用的语法。以下是一个使用fetch发送GET请求的示例：javascriptfetch(url, { method: 'GET', // 请求方法（GET、POST等） headers: { // 请求头部 'Content-Type': 'application/json', // 设置请求内容类型为JSON // 其他自定义的请求头部 }, // 其他请求参数，如body、credentials等}) .then(response => response.json()) // 解析响应数据为JSON格式 .then(data => { // 处理响应数据 console.log(data); }) .catch(error => { // 处理请求错误 console.error(error); });

代码解析:

• fetch(url, options): fetch函数接受两个参数：请求URL和一个可选的配置对象options。- method: 指定HTTP请求方法，如'GET'、'POST'、'PUT'、'DELETE'等。- headers: 设置请求头部，例如设置Content-Type为'application/json'表示发送JSON格式的数据。- body: 可选参数，用于发送请求体数据，例如POST请求的参数。- .then(response => response.json()): fetch返回一个Promise对象，可以使用.then()方法处理响应。response.json()方法将响应数据解析为JSON格式。- .catch(error => ...): 用于捕获请求过程中出现的错误。

2. 使用XMLHttpRequest发送HTTP请求

XMLHttpRequest对象是较早出现的发送HTTP请求的API，它提供了更多的灵活性和控制权，但语法相对繁琐。javascriptconst xhr = new XMLHttpRequest();xhr.open('GET', url); // 设置请求方法和URLxhr.setRequestHeader('Content-Type', 'application/json'); // 设置请求头部// 其他自定义的请求头部

xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 200) { const data = JSON.parse(xhr.responseText); // 解析响应数据为JSON格式 // 处理响应数据 console.log(data); } else { // 处理请求错误 console.error('请求出错'); } }};

xhr.send(); // 发送请求

代码解析:

• new XMLHttpRequest(): 创建一个XMLHttpRequest对象。- xhr.open(method, url): 初始化请求，设置请求方法和URL。- xhr.setRequestHeader(header, value): 设置请求头部。- xhr.onreadystatechange: 监听请求状态变化，当readyState属性变为4（请求完成）时，判断status属性是否为200（请求成功）来处理响应数据或错误信息。- xhr.send(body): 发送请求，可选参数body用于发送请求体数据。

总结

• 对于大多数情况，fetch API是更简洁易用的选择。- XMLHttpRequest提供了更底层的控制，适用于需要更精细化控制请求的场景。

无论选择哪种方式，理解HTTP请求的基本原理和方法对于进行Web开发至关重要。