Ajax 随笔

0. eric clapton 深得我心

XHR&Ajax
XHR原生Ajax实现Demo
XHR1&XHR2
H5 XHR2 by 阮一峰
fetch API by 阮一峰
一篇挺完善的axios博客(github)

1. Ajax ?

Asynchronous JavaScript and XML

Ajax是一种技术方案，不是一种新技术。

它依赖浏览器提供的XMLHttpRequest对象，这个对象使得浏览器可以发出HTTP请求和接收HTTP响应。

2. XHR ?

是基于XML的HTTP请求。XMLHttpRequest是一个浏览器接口，使得Javascript可以进行HTTP(S)通信。

请求流程：实例化，open，send,onreadystatechange状态回调函数。

3. H5 XHR2 & XHR1

跨域
	XHR2支持CORS
传输二进制文件
	XHR1需要通过MIMEType设置成文本，然后再转成二进制数据曲线救国
	XHR2可以借助H5浏览器的Blob对象
获取请求的完成进度
	XHR2提供progress事件以支持，分为上传/下载两个过程
设置请求超时时长
	XHR2 增加了timeout属性
新增forData对象支持发送表单数据！
	XHR2借助H5浏览器的FormData,实现表单模拟

XHR2 在低版本的IE上的支持并不是很友好

4. fetch

XMLHttpRequest 的升级版(实际上并不是XHR),浏览器原生提供这个对象

4.1 fetch & XHR 优化：

API 更加友好：
	基于promise替代了写回调函数
		直接then、catch(就相当于try-catch里面使用await)
	API采用模块化设计，API 分散在多个对象上
		Response 对象、Request 对象、Headers 对象
用户体验更佳：
	通过数据流（Stream 对象）处理数据，可以分块读取
		而非XHR请求方式的整体吐出

4.2 response内置对象

fetch()返回的对象类型

内部属性
	headers
	type 
		basic普通、cors跨域、error错误、opaque简单跨域、opaqueredirect
提供了不同的api获取不同的返回类型数据
	例如：response.json()是一个异步操作，取出所有内容，并将其转为 JSON 对象。
fetch()的第二个参数：定制 HTTP 请求

4.3 一个完整Demo&属性注释

const response = fetch(url, {
  method: "GET",
  headers: {
    "Content-Type": "text/plain;charset=UTF-8"
  },
  body: undefined,
  referrer: "about:client", http标头，表示请求的来源
  referrerPolicy: "no-referrer-when-downgrade", referrer标头的发送策略
  mode: "cors", 跨域请求模式
  credentials: "same-origin", 请求时cookie的发送策略
  cache: "default",	缓存处理方式：默认优先匹配缓存
  redirect: "follow", http跳转模式
  integrity: "", 用于比对的Hash（文件下载的时候，可以了解文件是否被篡改）
  keepalive: false, 页面卸载时，后台是否保持连接
  signal: undefined	用于取消fetch请求
});

5. vue所推崇的axios.js

详见顶部链接的文档

---

支持es6的promise api(以及不同组合方式请求)

支持baseUrl等配置项、默认值

支持在then、catch的调用前装载拦截器

请求去取消