ajax(XMLHttpRequest)

封装简易版的ajax

当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。

fetch() 可以不会接受跨域 cookies；你也可以不能使用 fetch() 建立起跨域会话。其他网站的 Set-Cookie 头部字段将会被无视。

fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。（自 2017 年 8 月 25 日以后，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了修改）

Fetch

Fetch 新的网络请求API

0 未初始化，还没有调用send()方法

1 载入，已调用send()方法，正在发送请求

2 载入完成，send()方法执行完成，已经接收到全部响应内容

3 交互，正在解析响应内容

4 完成，响应内容解析完成，可以在客户端调用

xhr.readyState

HTTP协议的状态码，如200

xhr.status

ajax请求时，浏览器要求当前网页和server必须同源（安全）

同源：协议、域名、端口三者必须一致，有一个不一致则非同源

可用于统计打点，可使用第三方统计服务

<img src=\"xxx\" />

可使用CDN

<link href=\"xxx\" />

可使用CDN、可实现JSONP

<script src=\"xxx\" ></script>

加载css js img的标签可以无视同源策略

服务端设置response头部

CORS-服务端设置http header

<script> 可绕过跨域限制

服务器可以任意动态拼接数据返回，只要符合html格式要求

同样访问www.baidu.com/getData.js也不一定返回一个js文件，也可以返回任意数据

所以只要服务端愿意配合前端，就可以返回想要的数据

缺点：只能访问get请求的资源

jQuery实现jsonp的原理也是一样的

JSONP

跨域

同源策略

ajax(XMLHttpRequest)