ajax 跨域 promise发送一个 ajax 请求，等到请求结束后把数据通过前端手段把数据绑定到页面中（动态创建 d

前后端不分离

前端写好 html + css 结构，然后把 html 交给后端，然后利用服务端技术从服务器的数据库中把数据查出来，然后绑定到页面中，然后把绑定好数据的页面直接返回给浏览器，就是说浏览器拿的就是绑定好数据的页面 html（服务端渲染 SSR(Server-Side-Rendering)）

前后端分离

发送一个 ajax 请求，等到请求结束后把数据通过前端手段把数据绑定到页面中（动态创建 dom + appendChild 或者字符串拼接 + innerHTML）。这种用 ajax 渲染数据的方式是局部刷新的。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.baidu.com/', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('xxx')
  }
};
xhr.send();

跨域

同源策略为了保证浏览器的信息安全，浏览器采用同源策略，保证当前源中的资源只能在当前的源中使用；其他源如果需要使用当前源资源，需要特殊技术，这种A源访问B源的资源的通信称为跨域；

  报错：Access to XMLHttpRequest at 'https://www.baidu.com/' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  
  //说明跨域了

同源策略要求通信的两个源的协议、域名、端口号要相同，如果三者中任意一个不同就是不满足同源策略；不满足同源策略的通信就是跨域；

跨域解决方案

JSONP
服务端转发，因为同源策略只在客户端存在，在服务端是不存在的；所以可以由服务端转发请求；
nginx 转发，nginx 是服务器应用程序，它可以接受客户端的请求，然后根据规则可以配置自动转发；
CORS: Cross-Origin-Resource-Sharing: 需要目标域设置 Access-Control-Allow-Origin 头信息；原理利用script 的src属性不受同源策略约束可以访问服务器或端口号下的数据 -提前声明一个叫做 fn 的函数，给 fn 设置一个形参；
- 在页面给 script 的 src 的指向的路径拼接一个 callback 属性，callback=fn；当浏览器解析到这个 script 标签时，会向 src 指向的路径发起 http 请求；
- 服务器收到这个请求后，会返回一个 fn (这里面是服务器返回的数据)
- fn({xxx}) 这个是让 fn 执行，小括号里面就是服务器发送给我们的数据

Promise 浏览器新增内置类用来管理异步本身是同步

let p = new Promise(function (resolve, reject) {
  // 这个函数中处理异步
});

Promise 的状态一旦发生变更，就会凝固，不会在发生变化；

三种状态

 - pending: 已经初始化，正在处理异步
 - fulfilled: 异步处理成功
 - rejected: 异步处理失败

ajax 封装

ajax({
  url: 'aside.json?a=b',
  type: 'POST',
  data: {
    user: 111,
    pwd: 1234546
  },
  cache: false,
  async: false,
  error(err) {
    console.log(err);
  },
  success (data) {
    console.log(data)
  }
});

根据请求方式处理传递给服务器的参数；如果是 get - 请求参数拼接到 url 末尾，如果是 post 请求直接放到请求体中；
根据是否需要缓存，判断是否给 get 请求拼接时间戳；
发送 ajax；
当成功后执行成功的回调，并且传入返回数据；如果失败处理失败的回调，传入失败的信息；

ajax 跨域 promise