目录

🌐 原生ajax

1. 什么是AJAX?

2. AJAX的使用

2.1 创建XHR对象

2.2 向服务器发送请求

2.3 服务器响应

2.4 onreadystatechange 事件

3. 手写一个简易的AJAX

🌐 现代AJAX的使用方式

1. jQuery封装的ajax

2. fetch API

3. axios

现代浏览器，最开始与服务器交换数据，都是通过XMLHttpRequest对象。它可以使用JSON、XML、HTML和text文本等格式发送和接收数据。

多年来，XMLHttpRequest一直是web开发者的亲密助手。无论是直接的，还是间接的， 当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。 Ajax的兴起是由于Google的Gmail所带动的，随后被广泛的应用到众多的Web产品（应用）中，可以认为， 开发者已经默认将XMLHttpRequest作为了当前Web应用与远程资源进行通信的基础。

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），意思是异步网络请求。区别于传统web开发中采用的同步方式。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

Ajax带来的最大影响就是页面可以无刷新的请求数据。以往，页面表单提交数据，在用户点击完”submit“按钮后，页面会强制刷新一下，体验十分不友好。 有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。 可以这么说AJAX的出现极大了推动了前端的发展。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

处理兼容性问题：

向服务器发送请求就要用到XMLHtttpRequest对象的open和send方法

GET or POST ?

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText属性。 responseText 属性返回字符串形式的响应，因此您可以这样使用：

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

这也算是面试中的一个高频考点了，虽然工作中不会中不会使用原生的AJAX而是使用封装好的AJAX，但是掌握基本原理还是必要的，这也应该是每位程序员的素养~

上面这种是最简易的，我们还可以结合Promise来实现，看下面一个版本👇

番外：封装原生的请求

使用：👇

 原生ajax的优点： 

原生ajax的缺点：

使用原生的js还是比较繁琐，实际工程中建议使用jQuery之类的库，封装的ajax请求方法非常好用，且解决了浏览器兼容性的问题。

为了更快捷的操作DOM，并且规避一些浏览器兼容问题，产生了​​jQuery​​​。它里面的​​AJAX​​​请求也兼容了各浏览器，可以有简单易用的方法​​$.get​​​，​​$.post​​​。简单点说，就是对​​XMLHttpRequest​​对象的封装。

jQuery-ajax的优点：

jQuery-ajax的缺点：

关于jQuery中的AJAX： 由于jQuery的使用频率已经很低了，关于jQuery中的AJAX如何使用，可以参看：jQuery中如何发送ajax请求以及解决跨域问题，当然，心有余力的小伙伴们可以自行查阅jQuery关于ajax的相关资料。

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住：fetch不是ajax的进一步封装，而是原生的js，没有使用XMLHttpRequest对象。

fetch是前端发展的一种新技术产物，是XMLHttpRequest的最新替代技术，它是W3C的正式标准

以下内容摘自mozilla：

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。

在使用fetch的时候需要注意：

​​​fetch​​​是低层次的API，代替​​XHR​​​，可以轻松处理各种格式，非文本化格式。可以很容易的被其他技术使用，例如​​Service Workers​​​。但是想要很好的使用​​fetch​​，需要做一些封装处理。

一个使用fetch获取数据的例子：👇

fetch代表着更先进的技术方向，但是目前兼容性不是很好，在项目中使用的时候得慎重。

fetch 是比较新的技术，低版本浏览器和IE浏览器支持性不好 

fetch优点

①、语法简介，更加语义化 ②、基于标准的promise实现，支持async/await ③、同构方便，使用isomorphic-fetch ④、更加底层，提供的API丰富 ⑤、脱离了XHR，是ES规范里新的实现方式 ⑥、其考虑到了传输的文件比较大的时候的处理

fetch缺点

fetch 是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。

①、当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500错误码。相反，它会将 Promise 状态标记为 resolve （如果响应的 HTTP 状态码不在 200 - 299 的范围内，则设置 resolve 返回值的 ok 属性为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。 ②、fetch 不会发送跨域 cookies（fetch​​​请求默认不会带​​cookie），需要添加配置项： fetch(url, {credentials: ‘include’}) ③、fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费 ④、fetch没有办法原生监测请求的进度，而XHR可以

请注意，fetch规范与jQuery.ajax()主要有两种方式的不同，牢记：  

- 当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject， 即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。 - 默认情况下，fetch 不会从服务端发送或接收任何 cookies, 如果站点依赖于用户 session，则会导致未经认证的请求（要发送 cookies，必须设置 credentials 选项）。

🙋‍♂️ 番外：为什么要使用fetch

XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离（Separation of Concerns）的原则，配置和调用方式非常混乱，而且基于事件的异步模型写起来也没有现代的 Promise，generator/yield，async/await 友好。

Fetch 的出现就是为了解决 XHR 的问题，拿例子说明：

使用 XHR 发送一个 json 请求一般是这样：

使用 Fetch 后，顿时看起来好一点 

使用 ES6 的 箭头函数 后： 

现在看起来好很多了，但这种 Promise 的写法还是有 Callback 的影子，而且 promise 使用 catch 方法来进行错误处理的方式有点奇怪。不用急，下面使用 async/await 来做最终优化： 

注：async/await 是非常新的 API，属于 ES7，这是它的完整规范。使用 Babel 开启 runtime 模式后可以把 async/await 无痛编译成 ES5 代码。也可以直接使用 regenerator 来编译到 ES5。

duang~~ 的一声，使用 await 后，写异步代码就像写同步代码一样爽。await 后面可以跟 Promise 对象，表示等待 Promise resolve() 才会继续向下执行，如果 Promise 被 reject() 或抛出异常则会被外面的 try...catch 捕获。

Promise，generator/yield，await/async 都是现在和未来 JS 解决异步的标准做法，可以完美搭配使用。这也是使用标准 Promise 一大好处。最近也把项目中使用第三方 Promise 库的代码全部转成标准 Promise，为以后全面使用 async/await 做准备。

另外，Fetch 也很适合做现在流行的同构应用，有人基于 Fetch 的语法，在 Node 端基于 http 库实现了 node-fetch，又有人封装了用于同构应用的 isomorphic-fetch。

注：同构(isomorphic/universal)就是使前后端运行同一套代码的意思，后端一般是指 NodeJS 环境。

首先，你需要知晓：axios并不是一种新的技术，而只是一种技术方案。

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，有以下特点：

axios的使用方法

关于更多axios的使用，大家请参考： axios官方文档​​​​​​

浏览器支持

axios面向现代浏览器设计(只支持现代浏览器)，所以，古老的浏览器并不支持。

因为axios设计简洁，API简单，支持浏览器和node，所以大受欢迎。它能很好的与各种前端框架整合。因此，推荐大家在项目中使用axios库。

目前来看axios算是比较完美的一种方案了，几乎没有什么大的缺陷。

小结：

原生XHR几乎很少开发会用，JqueryAjax属于老当益壮的那种，虽然很老，但是很好用，Fetch是属于初生牛犊，还需要慢慢成长，axios就目前来说，算是非常好的了，无脑使用即可。

参考资料：Ajax、fetch、axios的区别与优缺点