客户端和服务器之间的异步请求

客户端和服务器之间的异步请求

在最开始的阶段，其实客户端和服务器之间是一个同步的请求， 这样会导致每次请求都会造成整个界面的刷新，用户的交互方式就是点击，等待，这种交互其实很不友好，于是就出现了XMLHttprequest对象（XHR），它是一种支持异步请求的技术，可以使用js向服务器提出请求并响应，通过XHR，web开发人员可以在页面加载以后进行页面的局部更新。到目前为止，异步请求的方法我接触过的有以下三种：

Ajax

ajax是异步js+xml（现在基本上都是用json），是一种用于创建快速动态网页的技术，最大的特点就是可以实现局部刷新。它通过异步模式，提升了用户体验，同时优化了浏览器和服务器之间的传输，减少不必要的数据往返，而且ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了用户量大时服务器的负载。

Axios

axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，实质上也是基于XHR的封装，不过它时promise实现的版本，还能防止CSRF（每个请求都带一个从cookie中拿到的key，如果不同源，是拿不到cookie中得到的key的），还提供了一些并发请求的接口

fetch

fetch是基于promise设计的原生js，它并没有使用XHR对象，它的语言简洁，更加语义化，支持async/await，更加底层，提供了丰富的API，而且脱离了XHR，是ES规范里新的实现方式

同源策略

同源就是协议，域名和端口号必须一致，就是说客户端和服务端必须同源，但是很多时候我们在业务中又需要请求不同源的数据，因此会有一些方式实现非同源请求

1. 加载图片，js，css可以无视同源策略，因此埋点的时候可以将数据拼接成图片src进行上传
2. jsonp，可以将数据拼接成<script>的形式进行返回
3. cors（Cross-origin resource sharing）跨域资源共享，服务器端要实现这样的接口，浏览器就能访问加载资源了