探秘 | 原生ajax、jquery-ajax、axios与fetch的区别与优缺点

🌐 原生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

🌐 原生ajax

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

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

1. 什么是AJAX?

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

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

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

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

2. AJAX的使用

2.1 创建XHR对象

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

let xmlhttp = new XMLHttpRequest()

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

let xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

处理兼容性问题：

let xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }

2.2 向服务器发送请求

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

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

GET or POST ?

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

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

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

2.3 服务器响应

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

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

2.4 onreadystatechange 事件

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

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

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

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

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。- 0: 请求未初始化 1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪
status	200: "OK";404: 未找到页面

3. 手写一个简易的AJAX

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

let xhr = new XMLHttpRequest();
xhr.open('GET', url, true)
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }else{
  console.log('404 NOT FOUND')
  }
}
xhr.send()

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

function ajax(url) {
  const p = new Promise((resolve, reject) => {
    let xhr = XMLHttpRequest()
    xhr.open("GET", url, true)
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        resolve(xhr.responseText)
      } else {
        reject(new Error("404 NOT FOUND"))
      }
    }
    xhr.send()
  })
  return p
}

番外：封装原生的请求

function obj2str(data) {
  data = data || {}; // 如果没有传参, 为了添加随机因⼦,必须⾃⼰创建⼀个对象
  data.t = new Date().getTime();
  var res = [];
  for (var key in data) {
    //在URL中是不可以出现中⽂的，如果出现了中⽂需要转码，可以调⽤encodeURIComponent⽅法，URL中
    res.push(encodeURIComponent(key) + "=" + encodeURIComponent(data[key]));
  }
  return res.join("&");
}

function ajax(option) {
  var str = obj2str(option.data); //key=value&key=value;
  var xmlhttp, timer;
  if (option.type.toLowerCase() === "get") {
    //toLowerCase将⼤写转化为⼩写
    xmlhttp.open(option.type, option.url + "?" + str, true);
    xmlhttp.send();
  } else {
    xmlhttp.open(option.type, option.url, true);
    //注意点:以下代码必须放在open和send之间
    xmlhttp.setRequestHeader(
      "Content-type",
      "application/x-www-form-urlencoded"
    );
    xmlhttp.send(str);
  }
  xmlhttp.onreadystatechange = function (ev2) {
    if (xmlhttp.readyState === 4) {
      clearInterval(timer);
      //判断是否请求成功(Http状态码⼤于等于200，且⼩于300，和状态码等于304为请求成功)
      if (
        (xmlhttp.status >= 200 && xmlhttp.status < 300) ||
        xmlhttp.status === 304
      ) {
        option.success(xmlhttp);
      } else {
        option.error(xmlhttp);
      }
    }
  };
  if (option.timeout) {
    timer = setInterval(function () {
      console.log("中断请求");
      xmlhttp.abort();
      clearInterval(timer);
    }, option.timeout);
  }
}

使用：👇

ajax({
  url:"http://server-name/login",
  type:'post',
  data:{
      username:'username',
      password:'password'
  },
  dataType:'json',
  timeout:10000,
  contentType:"application/json",
  success:function(data){
　　　console.log(data); //服务器返回响应，根据响应结果，分析是否登录成功
  },
  //异常处理
  error:function(e){
      console.log(e);
  }
})

原生ajax的优点：

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

原生ajax的缺点：

使用起来也比较繁琐，需要设置很多值。
早期的IE浏览器有自己的实现，这样需要写兼容代码。

🌐 现代AJAX的使用方式

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

1. jQuery封装的ajax

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

$.ajax({
  type: 'POST',
  url: url, 
  data: data,
  dataType: dataType,
  success: function () {},
  error: function () {}
})

jQuery-ajax的优点：

对原生XHR的封装，做了兼容处理，简化了使用。
增加了对JSONP的支持，可以简单处理部分跨域。

jQuery-ajax的缺点：

如果有多个请求，并且有依赖关系的话，容易形成回调地狱。
本身是针对MVC的编程，不符合现在前端MVVM的浪潮。
ajax是jQuery中的一个方法。如果只是要使用ajax却要引入整个jQuery非常的不合理。

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

2. fetch API

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的时候需要注意：

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

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

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

fetch('http://example.com/movies.json')   
  .then(function(response) {     
    return response.json();
  })   
  .then(function(myJson) {     
    console.log(myJson);
  });

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 请求一般是这样：

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

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

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

使用 ES6 的箭头函数后：

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

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

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

// 注：这段代码如果想运行，外面需要包一个 async function
try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

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 环境。

3. axios

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

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

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF
提供了一些并发请求的接口（重要，方便了很多的操作）

axios的使用方法

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')   
  .then(function (response) {     
    console.log(response);   
  })   
  .catch(function (error) {     
    console.log(error);   
  });  

// 上面的请求也可以这样做 
axios.get('/user', {     
   params: {      
     ID: 12345     
   }   
}).then(function (response) {    
   console.log(response);   
}).catch(function (error) {    
   console.log(error);   
});

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

浏览器支持

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

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

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

小结：

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

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