ajax fetch axios xhr 一次性了解清楚

目录

ajax fetch axios xhr 一次性了结清楚:

一、ajax fetch axios xhr关系图：

 二、他们各自的概念:

1.Ajax（原生自带）

2.XMLHttpRequest（原生自带）

3.fetch（原生自带）

4.Axios（二次封装） 

---

ajax fetch axios xhr 一次性了解清楚:

一直以来，对fetch ajax axios xhr 之间的关系和概念很模糊，今天忍不了坐下来好好的盘盘他们。

一、ajax fetch axios xhr关系图：

先总的看看他们之间的关系：如下图

 二、他们各自的概念:

1.Ajax（原生自带）

英文全称为 Asynchronous JavaScript + XML ，翻译过来就是异步JavaScript和XML

AJAX  它是用来描述一种使用现有技术集合的“新”方法的: HTML 或 XHTML、CSS、 JavaScript、DOM、XML、XSLT， XMLHttpRequest。通过这些技术结合成ajax

最重要的特性：最重要的特性就是可以局部刷新页面

2.XMLHttpRequest（原生自带）

对象用于在后台与服务器交换数据。（兼容性好）

特性：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据
• 在后台向服务器发送数据

3.fetch（原生自带）

用来做网络请求（旧浏览器兼容性差，支持IE的话，使用polyfill库）

特性：

• fetch使用了Promise，支持回调

缺点：

• 兼容性差
• 无法监控读取进度和中断请求

4.Axios（二次封装） 

Axios 是一个XMLHttpRequests 基于 Promise 网络请求库，作用于 Node.js 和浏览器中。

node.js中使用原生 Node.js http 模块

浏览器中使用XMLHttpRequest

 主要特性：

• 从浏览器创建 XMLHttpRequests
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF