JS 数据 7

1 Ajax 概念理解

1 Ajax:
-------------------------------------------------------------------------------------------
  1 实现前后端数据交互的技术 (前后端数据交互的接口)
  2 无需重新加载整个网页的情况下, 实现局部数据刷新
  3 可给后端, 发送数据, 和请求数据
-------------------------------------------------------------------------------------------

2 知识点: 
-------------------------------------------------------------------------------------------
  1 async: 
    1 作用: async 定义的函数内部, 的所有异步回调会以同步的方式去执行  (关键字: async + await)
    2 定义: (async function() {})()
-------------------------------------------------------------------------------------------

2 跨域

1 描述: 
-------------------------------------------------------------------------------------------
  1 概念: 当前网站去访问其他网站的数据, 的这种行为  (俩个域名之间的联系)
  2 目的: 是浏览器的安全机制, 禁止 Ajax从一个域名请求另外一个域名上的数据 (保护隐私信息)
  3 产生: 不同源的请求就是跨域 (同源: 是相同的 -> 协议、域名、端口)
-------------------------------------------------------------------------------------------
  
2 跨域解决方案: //在某些情况下, 是需要跨域去请求一些数据的
-------------------------------------------------------------------------------------------
  1 jsonp: 利用 script 等标签的跨域能力, 去请求数据资源  //需要前端自己去请求
  2 服务端代理: 后端去请求其它域名下的数据, 给自己的前端去使用  //正常请求自己的后端数据即可
  3 CORS 跨域资源共享: 需要浏览器, 和数据站点, 全部支持的情况 (W3C 标准)  //取消了俩者的跨域跨域限制
-------------------------------------------------------------------------------------------

3 前端需要处理的问题 (jsonp 跨域请求) --> Tools/JS/data/jsonp.js
-------------------------------------------------------------------------------------------
1 基于 jsonp 请求函数封装

2 以及调用方式

3 jsonp 的接口文档最重要的 3个参数: 
  1 url地址 -- http://suggestion.baidu.com/su
  2 请求参数: cb / callback   回调函数
  3 关键词: hhh ..
-------------------------------------------------------------------------------------------

3 请求数据的多种方式

1 Ajax 请求: Tools/JS/data/Ajax.js   (如下: Ajax 请求封装的, 调用注释)
-------------------------------------------------------------------------------------------
  ajax({
    url: './hh.php',   //请求地址
    type: 'post',   //请求方式 -> get / post
    data: {  //传输数据的格式 1  (常用)
      type: 'login', 
      user: user.value,
      pass: pass.value
    }, 
    data: 'user='+ user.value,   //传输数据的格式 2 -> 字符串拼接
    dataType: 'json',   //一般都是json格式
    success: function (data) {  //请求成功, 后端返回的数据
      var json = JSON.parse(data);  //把数据 json字符串, 转为 json对象, 来使用
      alert(json.msg);
    },
    error: function (status) {  //请求失败, 得到的业务状态码
      alert('提交失败');
    }
  })
-------------------------------------------------------------------------------------------

2 Ajax 嵌套请求优化: Tools/JS/data/Ajax1.js  
-------------------------------------------------------------------------------------------
1 我们请求数据, 遇到回调嵌套的情况时, 用这个基于 Promise 封装的 Ajax 去请求数据

2 有俩种调用方式: 推介使用第二种 -> async 的形式
-------------------------------------------------------------------------------------------

4 Promise

1 简单概念: 
-------------------------------------------------------------------------------------------
1 Promise 是一个构造函数, 可用来创建一个 Promise 对象, 一个对象代表一个异步操作
2 Promise 对象有三种状态: pending (进行中) / fulfilled (成功) /  rejected (失败)
3 Promise 状态改变只有俩种: pending -> fulfilled / pending -> rejected (就是只有成功或失败)
-------------------------------------------------------------------------------------------

2 作用: 可以讲异步的操作, 以同步的流程表达出来; 避免了层层嵌套的, ajax 请求; (也就是解决回调地狱的)