报文
请求报文
概念：
规定了客户端(浏览器)以什么样的格式把数据发给服务器。
作用：
在前端主要用于代码调试，并且让自己对数据交互有一定的了解。
好比如里面的请求方式、请求地址以及请求信息等等，都能帮我们调试代码。
组成部分：
- 请求行；
- 请求头部；
- 空行；
- 请求体。
注意：
- 在浏览器中，GET 请求比较特殊，它只有请求头，没有请求体；
- 在浏览器中，POST、PUT、PATCH、DELETE 请求既可以有请求头，也可以有请求体。
响应报文
概念：
规定了服务器以什么样的格式把数据传给浏览器。
作用：
在前端主要用于代码调试，并且让自己对数据交互有一定的了解。
好比如里面的状态码、响应地址等等，我们可以依次来调试代码。
当然里面还包含有服务器响应给我们的数据。
组成部分：
- 状态行；
- 响应头部；
- 空行；
- 响应体。
防抖和节流
防抖
节流
概念：
有一业务在执行，则不允许重复开启这一业务。
作用：
可以优化服务器性能。
当用户还没浏览到一个页面，但程序却已经向服务器发起请求了，那么有没有一种情况，用户看着看着就把页面关闭了，那么，之前的请求不就白费了吗，服务器性能不就损耗了吗？
原理：
利用一变量(值为true和false)，来决定同一业务是否执行，如：false可以让业务执行，true不能让业务进行。
使用方法：
1、定义一个变量，初始值为false，false可以开启业务--表示没有业务进行；
2、当进行一个业务时，把变量设置为true，true不能开启业务--表示有业务在进行；
3、当业务执行完毕，再把变量改为false---可以开启另一业务。
示例：
<body>
<button>开始</button>
<script>
// 节流 使用场景 倒计时案例 移动端分页
// 这一次的业务 没有做完， 不让执行新一次的业务
// 通过一个开关 一个变量 来实现
// 定义一个变量 loadding
// 如果 loadding 等于 true 不让继续执行 return
// 如果 loadding 等于false 就让继续执行
let loadding = false;
const button = document.querySelector('button');
button.addEventListener('click', function () {
// 判断是否允许执行
if (loadding) {
return;
}
// 设置 loadding =true
loadding = true;
func();
});
// 要做的业务
function func() {
console.log('开始执行业务');
setTimeout(function () {
console.log('业务执行完毕');
loadding = false;
}, 2000);
}
</script>
</body>
同源策略&跨域
概念：
同源：
同源指的是两个 URL 地址具有相同的协议、主机名、端口号。
协议：
同源策略
同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。
浏览器的同源策略规定：不允许非同源的 URL 之间进行资源的交互。
同源策略仅局限于ajax请求。
跨域：
同源指的是两个 URL 的协议、主机名、端口号完全一致，反之，则是跨域。
浏览器允许发起跨域请求。但跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！
**---也就是说，跨域无法实现交互，**例如：
前端跨域问题的表现：
跨域问题的解决：
JSONP 和 CORS 是实现跨域数据请求的两种技术方案。
CORS方案 ：
概念：
CORS 是解决跨域数据请求的终极解决方案，全称是 Cross-origin resource sharing。
实现：
使用CORS 技术解决跨域，需要浏览器和服务器同时支持，二者缺一不可：
- 浏览器要支持 CORS 功能（主流的浏览器全部支持，IE 不能低于 IE10）；
- 服务器要开启 CORS 功能（需要后端开发者为接口开启 CORS 功能）。
其实cors方案解决，主要还是要后端配置。
JSONP方案：
JSONP 是实现跨域数据请求的一种技术解决方案。它只支持 GET 请求，不支持 POST、DELETE 等其它请求。
JSONP不是ajax技术。
---只要用到了 XMLHttpRequest 对象，发起的就是 Ajax 请求！
实现原理：
利用script的src属性，我们可以请求远程js文件，在自己电脑上运行。
那么后端只要把我们需要的数据写在js文件里，我们远程执行后端的js文件，那么就可以拿到我们需要的数据。
注意：
数据如何拿，还需要看后端给的文档。
