前端通信方式探索之一：通信方式概览

在几年前，天空一声巨响,ajax 闪亮登场. 前端宝宝们如获至宝~ 已经表单提交神马的, 真的太心累了. 有了ajax之后, 网页的性能可大幅提升，告别刷新，告别如水的流量. 不过，长江后浪推前浪，一代更比一代强. 由于ajax被同域限制着, 导致, 多服务器配置，云服务资源的存储没办法充分利用. 所以,业界想到另外一种方法–JSONP. JSONP实际上和ajax没有半点关系，唯一相同的就是都是异步执行，而且JSONP完美解决了CD(cross domain)问题. 科技就是第一生产力, web发展so fast. 以前追求就是静态网页,显示信息而已。现在，正朝着web2.0,webapp前进。以前的单向交流已经不能满足需求了。怎么办呢？改呗~ 所以，紧接着SSE,websocket 诞生了. 至今为止, 前端通信方式算是告一段落。这里我们将围绕上述的几种通信方式进行,简单的介绍. 以下是几个技术的顺序.

ajax

提及前端与服务器端的异步通信，离不开 Ajax (Asynchronous JavaScript and XML)。实际上我们常说的 Ajax 并非指某一项具体的技术，它主要是基于用脚本操作 HTTP 请求的 Web 应用架构。最早出现在 Jesse James Carrett 于 2005年2月发表一篇《Ajax：A New Approach to Web Applications》中提出的一个新概念。

在 Ajax 中涉及到的 JavaScript 方面的技术，即 XMLHttpRequest（以下简称 XHR）。很长一段时间我们都是通过 XHR 来与服务器建立异步通信。然而在使用的过程中，我们发现 XHR 是基于事件的异步模型，在设计上将输入、输出和事件监听混杂在一个对象里，且必须通过实例化方式来发请求。配置和调用方式混乱，不符合关注分点离原则。

关注点分离原则所描述的是系统的元素应该表现出互不相干的目的。也就是说，没有会分担另外一个元素职责的，或者其它不相干职责的元素。

正是由于 XHR 在使用上的不便，许多前端库就将进行封装，方便开发者调用。其中影响和使用范围最广的当属 jQuery 提供的 $.ajax 方法。该方法最为先进之处在于，从 jQuery 1.5 开始，$.ajax()返回的jqXHR对象实现了 Promise 接口, 使它拥有了 Promise 的所有属性，方法和行为。

直到 Fetch API 的提出，前端和服务器端的异步通信方面更进了一步。

Fetch API

Fetch API 是近年来被提及将要取代 XHR 的技术新标准，是一个 HTML5 的 API。

Fetch 并不是 XHR 的升级版本，而是从一个全新的角度来思考的一种设计。Fetch 是基于 Promise 语法结构，而且它的设计足够低阶，这表示它可以在实际需求中进行更多的弹性设计。对于 XHR 所提供的能力来说，Fetch 已经足够取代 XHR ，并且提供了更多拓展的可能性。

Fetch API 规范明确了用户代理获取资源的语义。原生支持 Promise1，调用方便，符合语义化。可配合使用 ES2016 中的 async / await 语法，更加优雅。可以看下面的demo：

// 获取 some.json 资源
fetch('some.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    console.log('data', data);
  })
  .catch(function(error) {
    console.log('Fetch Error: ', error);
  });
// 采用ES2016的 async/await 语法
async function() {
  try {
    const response = await fetch('some.json');
    const data = response.json();
    console.log('data', data);
  } catch (error) {
    console.log('Fetch Error: ', error)
  }
}

可以简单理解为，Fetch API 是面向未来的异步通信 API。

参考资料
通信方式进阶
 ajax、axios、fetch之间的详细区别以及优缺点