JavaScript发送HTTP请求: XMLHttpRequest和Fetch API详解

JavaScript发送HTTP请求: XMLHttpRequest和Fetch API详解

在Web开发中，使用JavaScript发送HTTP请求是与服务器交互和动态更新网页内容的基础。本文将详细介绍两种常用的发送HTTP请求的方法：XMLHttpRequest对象和Fetch API。

1. 使用XMLHttpRequest对象

XMLHttpRequest对象是浏览器提供的用于发送HTTP请求的传统方法。

示例：发送GET请求javascript// 创建XMLHttpRequest对象var xhr = new XMLHttpRequest();

// 设置回调函数，当请求的状态发生变化时被触发xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求已完成并且响应状态为200（成功） var response = xhr.responseText; console.log(response); }};

// 初始化请求xhr.open('GET', 'http://example.com/api', true);

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

代码解释:

1. 创建XMLHttpRequest对象: new XMLHttpRequest() 创建一个新的XMLHttpRequest对象。2. 设置回调函数: onreadystatechange 属性用于设置一个回调函数，该函数在请求状态发生变化时被调用。3. 初始化请求: xhr.open('GET', 'http://example.com/api', true) 初始化一个GET请求。第一个参数是HTTP方法，第二个参数是请求的URL，第三个参数表示是否异步发送请求（true为异步）。4. 发送请求: xhr.send() 发送HTTP请求。

2. 使用Fetch API

Fetch API是更加现代化和简洁的发送HTTP请求的方法。

示例：发送GET请求javascriptfetch('http://example.com/api') .then(function(response) { if (response.ok) { return response.text(); } throw new Error('Network response was not ok.'); }) .then(function(responseText) { console.log(responseText); }) .catch(function(error) { console.log('Error: ' + error.message); });

代码解释:

1. 发送请求: fetch('http://example.com/api') 发送一个GET请求到指定的URL。2. 处理响应: then() 方法用于处理响应。第一个 then() 处理成功响应，第二个 then() 获取响应内容。3. 错误处理: catch() 方法用于捕获和处理错误。

两种方法的比较：

| 特性 | XMLHttpRequest | Fetch API || --------------- | ------------------- | -------------------------------------------- || 语法 | 较为复杂 | 更简洁易用 || 错误处理 | 需要手动检查状态码 | 内置promise机制，错误处理更方便 || 取消请求 | 支持 | 需要使用AbortController API || 跨域请求 | 需要额外配置 | 默认支持 CORS |

总结

XMLHttpRequest 和 Fetch API 都可以用来发送HTTP请求，选择哪种方法取决于具体需求和个人偏好。 Fetch API 语法更简洁，错误处理更方便，是更推荐使用的方法。