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',
data: {
type: 'login',
user: user.value,
pass: pass.value
},
data: 'user='+ user.value,
dataType: 'json',
success: function (data) {
var json = JSON.parse(data);
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 请求; (也就是解决回调地狱的)