学会fetch的用法

最新推荐文章于 2024-07-29 10:57:56 发布

M-Codes

最新推荐文章于 2024-07-29 10:57:56 发布

阅读量2.1k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/efew212efe/article/details/124404167

版权

本文介绍了前端向服务端发送请求的三种方式：XMLHttpRequest(XHR)、jQuery的AJAX以及Fetch API。重点讨论了Fetch API的使用，包括其兼容性、常见问题以及与XHR的区别。Fetch API通过Promise简化了请求处理，但需要注意兼容性问题、cookie传递及错误处理等方面。

摘要由CSDN通过智能技术生成

在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR)，Fetch ，jQuery实现的AJAX。
其中, XMLHttpRequest(XHR)和Fetch是浏览器的原生API，jquery的ajax其实是封装了XHR。
让我们首先来比较一下这三者的使用示例。

1.XMLHttpRequest(XHR)

var xhr;
if (window.XMLHttpRequest) {　 // Mozilla, Safari...
  　xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
  　try {
    　xhr = new ActiveXObject('Msxml2.XMLHTTP');
 　 } catch (e) {
  　  try {
    　  xhr = new ActiveXObject('Microsoft.XMLHTTP');
   　 } catch (e) {}
 　 }
}
if (xhr) {
  　xhr.onreadystatechange = onReadyStateChange;
 　 xhr.open('POST', '/api', true);
 　 // 设置 Content-Type 为 application/x-www-form-urlencoded
 　 // 以表单的形式传递数据
  　xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 　 xhr.send('username=admin&password=root');
}
 
// onreadystatechange