Ajax和网络请求

• Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据
• XHR和Fecth是具体的可行方案

有那些优缺点?

• 优点：
  • 通过异步模式，提升了用户体验.
  • 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
  • Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
  • Ajax可以实现动态不刷新（局部刷新）
• 缺点：
  • 安全问题 AJAX暴露了与服务器交互的细节。
  • 对搜索引擎的支持比较弱。
  • 不容易调试。

XHR

/** 1. 创建连接 **/
var xhr = null;
xhr = new XMLHttpRequest();
/** 2. 连接服务器 **/
xhr.open("get", url, true);
/** 3. 发送请求 **/
xhr.send(null);
/** 4. 接受请求 **/
xhr.onreadystatechange = function () {
	if (xhr.readyState == 4) {
		if (xhr.status == 200) {
			success(xhr.responseText);
		} else {
			/** false **/
			fail && fail(xhr.status);
		}
	}
};

Fetch

符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里 更好更方便的写法 更加底层，提供的API丰富（request, response） 脱离了XHR，是ES规范里新的实现方式 1）fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理 2）fetch默认不会带cookie，需要添加配置项 3）fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费 4）fetch没有办法原生监测请求的进度，而XHR可以

请求参数

• url
• options
  • method
  • body
  • headers
  • ...

ajax发送2次请求的原因

之所以会发送2次请求，那是因为我们使用了**带预检(Preflighted)**的跨域请求。该请求会在发送真实的请求之前发送一个类型为OPTIONS的预检请求。预检请求会检测服务器是否支持我们的真实请求所需要的跨域资源，唯有资源满足条件才会发送真实的请求。比如我们在请求头部增加了authorization项，那么在服务器响应头中需要放入Access-Control-Allow-Headers，并且其值中必须要包含authorization，否则OPTIONS预检会失败，从而导致不会发送真实的请求。