房产网站建设方案项目书,传到网站根目录,公司网站推广方案模板,今天最新的新闻头条文章目录 1. XMLHttpRequest发送GET请求发送POST请求 2. Fetch API发送GET请求发送POST请求 3. 对比与总结XMLHttpRequestFetch API 4. 总结 在前端开发中#xff0c;
与服务器进行数据交互是不可避免的需求#xff0c;而 JavaScript 提供了多种方式来实现 HTTP 请求。本篇博… 文章目录 1. XMLHttpRequest发送GET请求发送POST请求 2. Fetch API发送GET请求发送POST请求 3. 对比与总结XMLHttpRequestFetch API 4. 总结 在前端开发中
与服务器进行数据交互是不可避免的需求而 JavaScript 提供了多种方式来实现 HTTP 请求。本篇博客将介绍两种常见的 HTTP 请求方式XMLHttpRequest 和 Fetch API以便更好地理解它们的使用场景和特点。 1. XMLHttpRequest
发送GET请求
let xhr new XMLHttpRequest();
xhr.open(GET, https://api.example.com/data, true);
xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {console.log(Response:, xhr.responseText);}
};
xhr.send();在上述例子中通过创建 XMLHttpRequest 对象使用 open 方法配置请求方法、URL 和是否异步。然后通过 onreadystatechange 监听状态变化当状态为 4表示完成且状态码为 200 时表示请求成功可以获取响应数据。
发送POST请求
let xhr new XMLHttpRequest();
xhr.open(POST, https://api.example.com/post, true);
xhr.setRequestHeader(Content-Type, application/json);
xhr.onreadystatechange function() {if (xhr.readyState 4 xhr.status 200) {console.log(Response:, xhr.responseText);}
};
let postData { key: value };
xhr.send(JSON.stringify(postData));在上述例子中通过将请求方法改为 POST并使用 setRequestHeader 设置请求头然后通过 send 方法发送 JSON 格式的数据。
2. Fetch API
发送GET请求
fetch(https://api.example.com/data).then(response {if (!response.ok) {throw new Error(Network response was not ok);}return response.json();}).then(data {console.log(Data:, data);}).catch(error {console.error(Fetch error:, error);});在上述例子中使用 fetch 函数发起 GET 请求通过 .then() 方法处理响应并使用 .catch() 方法捕获错误。
发送POST请求
fetch(https://api.example.com/post, {method: POST,headers: {Content-Type: application/json},body: JSON.stringify({ key: value })
}).then(response {if (!response.ok) {throw new Error(Network response was not ok);}return response.json();}).then(data {console.log(Data:, data);}).catch(error {console.error(Fetch error:, error);});在上述例子中使用 fetch 函数发起 POST 请求通过配置 method、headers 和 body选项来发送 JSON 格式的数据。
3. 对比与总结
XMLHttpRequest
老式APIXMLHttpRequest 是较老的 API虽然在现代浏览器中仍然可用但 Fetch API 更加现代且易用繁琐的用法相对于 Fetch APIXMLHttpRequest 的用法相对繁琐需要多个步骤配置和处理
Fetch API
现代APIFetch API 是一个现代的 API提供了更简单和灵活的方式来处理 HTTP 请求Promise基础Fetch API 基于 Promise使得异步代码更易读和管理更直观的API设计Fetch API 的设计更加直观支持链式调用简化了 HTTP 请求的写法
4. 总结
根据项目的需求和个人喜好选择合适的 HTTP 请求方式是很重要的。XMLHttpRequest 适用于更古老的项目或需要与较老系统交互的场景而 Fetch API 更适合现代化的项目提供了更直观和简单的 API。希望通过本篇博客你对 JavaScript 中使用 XMLHttpRequest 和 Fetch API 发送 HTTP 请求有了更深入的了解。
