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

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

在Web开发中，经常需要使用JavaScript发送HTTP请求与服务器交互，获取或提交数据。JavaScript提供了两种常用的方式发送HTTP请求：fetch函数和XMLHttpRequest对象。

1. 使用fetch函数发送HTTP请求

fetch函数是现代JavaScript中发送HTTP请求的首选方式，它返回一个Promise对象，可以方便地处理响应和错误。

**示例：**javascriptfetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('网络请求失败'); } return response.json(); // 解析JSON数据 }) .then(data => { console.log('请求成功:', data); // 处理响应数据 }) .catch(error => { console.error('发生错误:', error); });

代码解析：

1. fetch(url): 向指定URL发送GET请求。2. .then(response => ...): 接收服务器响应。3. response.ok: 判断请求是否成功（状态码在200-299之间）。4. response.json(): 将响应解析为JSON格式。5. .catch(error => ...): 捕获请求过程中的错误。

2. 使用XMLHttpRequest对象发送HTTP请求

XMLHttpRequest对象是传统的发送HTTP请求的方式，它提供了更细粒度的控制，但使用起来相对繁琐。

**示例：**javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data', true);

xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 400) { var data = JSON.parse(xhr.responseText); console.log('请求成功:', data); // 处理响应数据 } else { console.error('请求失败:', xhr.statusText); }};

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

xhr.send();

代码解析：

1. new XMLHttpRequest(): 创建XMLHttpRequest对象。2. xhr.open(method, url, async): 初始化请求，设置请求方法、URL和是否异步。3. xhr.onload: 设置请求成功时的回调函数。4. xhr.onerror: 设置请求失败时的回调函数。5. xhr.send(): 发送请求。

总结

fetch和XMLHttpRequest都可以用来发送HTTP请求， fetch更简洁易用，而XMLHttpRequest提供更灵活的控制。选择哪种方式取决于具体需求。

注意: 这只是使用JavaScript发送HTTP请求的基本示例，实际应用中可能需要处理请求头、发送POST请求、处理表单数据等更复杂的情况。