2022.4.23 学习笔记
目录
四、跨域与JSONP
4.1 了解同源策略和跨域
4.1.1 同源策略
1. 什么是同源
如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。
例如，下表给出了相对于 http://www.test.com/index.html 页面的同源检测：
2. 什么是同源策略
同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。
MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：
① 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
② 无法接触非同源网页的 DOM
③ 无法向非同源地址发送 Ajax 请求
4.1.2 跨域
1. 什么是跨域
同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。
出现跨域的根本原因：浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
网页：http://www.test.com/index.html
接口：http://www.api.com/userlist
2. 浏览器对跨域请求的拦截
注意：浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到！
3. 如何实现跨域数据请求
现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。
JSONP：出现的早，兼容性好（兼容低版本IE）。是前端程序员为了解决跨域问题，被迫想出来的一种临时解决方案。缺点是只支持 GET 请求，不支持 POST 请求。
CORS：出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。
4.2 JSONP
4.2.1 什么是JSONP
JSONP (JSON with Padding) 是 JSON 的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。
4.2.2 JSONP的实现原理
由于浏览器同源策略的限制，网页中无法通过 Ajax 请求非同源的接口数据。但是 <script> 标签不受浏览器同源策略的影响，可以通过 src 属性，请求非同源的 js 脚本。
因此，JSONP 的实现原理，就是通过 <script> 标签的 src 属性，请求跨域的数据接口，并通过函数调用的形式，接收跨域接口响应回来的数据。
4.2.3 自己实现一个简单的JSONP
定义一个 success 回调函数：
通过 <script> 标签，请求接口数据：
4.2.4 JSONP的缺点
由于 JSONP 是通过 <script> 标签的 src 属性，来实现跨域数据获取的，所以，JSONP 只支持 GET 数据请求，不支持 POST 请求。
注意：JSONP 和 Ajax 之间没有任何关系，不能把 JSONP 请求数据的方式叫做 Ajax，因为 JSONP 没有用到 XMLHttpRequest 这个对象。
4.2.5 jQuery中的JSONP
jQuery 提供的 $.ajax() 函数，除了可以发起真正的 Ajax 数据请求之外，还能够发起 JSONP 数据请求，例如：
默认情况下，使用 jQuery 发起 JSONP 请求，会自动携带一个 callback=jQueryxxx 的参数，jQueryxxx 是随机生成的一个回调函数名称。
4.2.6 自定义参数及回调函数名称
在使用 jQuery 发起 JSONP 请求时，如果想要自定义 JSONP 的参数以及回调函数名称，可以通过如下两个参数来指定：
4.2.7 jQuery中JSONP的实现过程
jQuery 中的 JSONP，也是通过 <script> 标签的 src 属性实现跨域数据访问的，只不过，jQuery 采用的是动态创建和移除 <script> 标签的方式，来发起 JSONP 数据请求。
- 在发起 JSONP 请求的时候，动态向 <header> 中 append 一个 <script> 标签；
- 在 JSONP 请求成功以后，动态从 <header> 中移除刚才 append 进去的 <script> 标签；
4.3 案例-淘宝搜索
4.3.1 要实现的UI效果
4.3.2 获取用户输入的搜索关键词
为了获取到用户每次按下键盘输入的内容，需要监听输入框的 keyup 事件，示例代码如下：
4.3.3 封装getSuggestList函数
将获取搜索建议列表的代码，封装到 getSuggestList 函数中，示例代码如下：
4.3.4 渲染建议列表的UI结构
1. 定义搜索建议列表
2. 定义模板结构
3. 定义渲染模板结构的函数
4. 搜索关键词为空时隐藏搜索建议列表
4.3.5 输入框的防抖
4.3.6 缓存搜索的建议列表
1. 定义全局缓存对象
2. 将搜索结果保存到缓存对象中
3. 优先从缓存中获取搜索建议
4.4 防抖和节流
4.4.1 防抖
1. 什么是防抖
防抖策略（debounce）是当事件被触发后，延迟 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。
2. 防抖的应用场景
用户在输入框中连续输入一串字符时，可以通过防抖策略，只在输入完后，才执行查询的请求，这样可以有效减少请求次数，节约请求资源；
3. 实现输入框的防抖
var timer = null // 1. 定义防抖动的延时定时器 timer
function debounceSearch(keywords) { // 2. 定义防抖的函数
timer = setTimeout(function() {
// 500ms之后再发起 JSONP 请求
getSuggestList(keywords)
}, 500)
}
$('#ipt').on('keyup', function() { // 3. 在触发 keyup 事件时，立即清空 timer
clearTimeout(timer)
// ...省略其他代码
debounceSearch(keywords)
})4.4.2 节流
1. 什么是节流
节流策略（throttle），顾名思义，可以减少一段时间内事件的触发频率。
2. 节流的应用场景
① 鼠标连续不断地触发某事件（如点击），只在单位时间内只触发一次；
② 懒加载时要监听计算滚动条的位置，但不必每次滑动都触发，可以降低计算的频率，而不必去浪费 CPU 资源；
3. 节流阀的概念
高铁卫生间是否被占用，由红绿灯控制，红灯表示被占用，绿灯表示可使用。假设每个人上卫生间都需要花费5分钟，则五分钟之内，被占用的卫生间无法被其他人使用。上一个人使用完毕后，需要将红灯重置为绿灯，表示下一个人可以使用卫生间。下一个人在上卫生间之前，需要先判断控制灯是否为绿色，来知晓能否上卫生间。
节流阀为空，表示可以执行下次操作；不为空，表示不能执行下次操作。当前操作执行完，必须将节流阀重置为空，表示可以执行下次操作了。每次执行操作前，必须先判断节流阀是否为空。
4. 节流案例 – 鼠标跟随效果
① 渲染UI结构并美化样式
② 不使用节流时实现鼠标跟随效果
③ 使用节流优化鼠标跟随效果
4.4.3 总结防抖和节流的区别
- 防抖：如果事件被频繁触发，防抖能保证只有最后一次触发生效！前面 N 多次的触发都会被忽略！
- 节流：如果事件被频繁触发，节流能够减少事件触发的频率，因此，节流是有选择性地执行一部分事件！
五、 HTTP协议加强
5.1 HTTP协议简介
5.1.1 什么是通信
通信，就是信息的传递和交换。
通信三要素：通信的主体、通信的内容、通信的方式
1. 现实生活中的通信
案例：张三要把自己考上传智专修学院的好消息写信告诉自己的好朋友李四。
其中：通信的主体是张三和李四；通信的内容是考上传智专修学院；通信的方式是写信。
2. 互联网中的通信
案例：服务器把传智专修学院的简介通过响应的方式发送给客户端浏览器。
其中，通信的主体是服务器和客户端浏览器；通信的内容是传智专修学院的简介；通信的方式是响应。
5.1.2 什么是通信协议
1. 简介
通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。
通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议。
2. 互联网中的通信协议
客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。
网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText Transfer Protocol） ，简称 HTTP 协议。
5.1.3 HTTP
1. 什么是HTTP协议
HTTP 协议即超文本传送协议 (HyperText Transfer Protocol) ，它规定了客户端与服务器之间进行网页内容传输时，所必须遵守的传输格式。
例如：
- 客户端要以HTTP协议要求的格式把数据提交到服务器
- 服务器要以HTTP协议要求的格式把内容响应给客户端
2. HTTP协议的交互模型
HTTP 协议采用了 请求/响应 的交互模型。
5.2 HTTP请求消息
5.2.1 什么是HTTP请求消息
由于 HTTP 协议属于客户端浏览器和服务器之间的通信协议。因此，客户端发起的请求叫做 HTTP 请求，客户端发送到服务器的消息叫做 HTTP 请求消息。
注意：HTTP 请求消息又叫做 HTTP 请求报文。
5.2.2 HTTP请求消息的组成部分
HTTP 请求消息由请求行（request line）、请求头部（ header ） 、空行 和 请求体 4 个部分组成。
1. 请求行
请求行由请求方式、URL 和 HTTP 协议版本 3 个部分组成，他们之间使用空格隔开。
2. 请求头部
请求头部用来描述客户端的基本信息，从而把客户端相关的信息告知服务器。比如：User-Agent 用来说明当前是什么类型的浏览器；Content-Type 用来描述发送到服务器的数据格式；Accept 用来描述客户端能够接收什么类型的返回内容；Accept-Language 用来描述客户端期望接收哪种人类语言的文本内容。
请求头部由多行 键/值对 组成，每行的键和值之间用英文的冒号分隔。
请求头部 – 常见的请求头字段
关于更多请求头字段的描述，可以查看 MDN 官方文档：HTTP Headers - HTTP | MDN
3. 空行
最后一个请求头字段的后面是一个空行，通知服务器请求头部至此结束。请求消息中的空行，用来分隔请求头部与请求体。
4. 请求体
请求体中存放的，是要通过 POST 方式提交到服务器的数据。
注意：只有 POST 请求才有请求体，GET 请求没有请求体！
get请求消息：
post请求消息：
5.3 HTTP响应消息
5.3.1 什么是HTTP响应消息
响应消息就是服务器响应给客户端的消息内容，也叫作响应报文。
5.3.2 HTTP响应消息的组成部分
HTTP响应消息由状态行、响应头部、空行 和 响应体 4 个部分组成，如下图所示：
1. 状态行
状态行由 HTTP 协议版本、状态码和状态码的描述文本 3 个部分组成，他们之间使用空格隔开。
2. 响应头部
响应头部用来描述服务器的基本信息。响应头部由多行 键/值对 组成，每行的键和值之间用英文的冒号分隔。
常见的响应头字段
关于更多响应头字段的描述，可以查看 MDN 官方文档：HTTP Headers - HTTP | MDN
3. 空行
在最后一个响应头部字段结束之后，会紧跟一个空行，用来通知客户端响应头部至此结束。响应消息中的空行，用来分隔响应头部与响应体。
4. 响应体
响应体中存放的，是服务器响应给客户端的资源内容。
5.4 HTTP请求方法
HTTP 请求方法，属于 HTTP 协议中的一部分，请求方法的作用是：用来表明要对服务器上的资源执行的操作。最常用的请求方法是 GET 和 POST。
| 序号 | 方法 | 描述 |
| 1 | GET | (查询)发送请求来获得服务器上的资源，请求体中不会包含请求数据，请求数据放在协议头中。 |
| 2 | POST | (新增)向服务器提交资源（例如提交表单或上传文件）。数据被包含在请求体中提交给服务器。 |
| 3 | PUT | (修改)向服务器提交资源，并使用提交的新资源，替换掉服务器对应的旧资源。 |
| 4 | DELETE | (删除)请求服务器删除指定的资源。 |
| 5 | HEAD | HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体。 |
| 6 | OPTIONS | 获取http服务器支持的http请求方法，允许客户端查看服务器的性能，比如ajax跨域时的预检等。 |
| 7 | CONNECT | 建立一个到由目标资源标识的服务器的隧道。 |
| 8 | TRACE | 沿着到目标资源的路径执行一个消息环回测试，主要用于测试或诊断。 |
| 9 | PATCH | 是对 PUT 方法的补充，用来对已知资源进行局部更新 。 |
5.5 HTTP响应状态代码
5.5.1 什么是HTTP响应状态码
HTTP 响应状态码（HTTP Status Code），也属于 HTTP 协议的一部分，用来标识响应的状态。
响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次 HTTP 请求的结果是成功还是失败了。
5.5.2 HTTP响应状态码的组成及分类
HTTP 状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字用来对状态码进行细分。
HTTP 状态码共分为 5 种类型：
完整的 HTTP 响应状态码，可以参考 MDN 官方文档： HTTP 响应状态码 - HTTP | MDN
1. 2** 成功相关的响应状态码
2** 范围的状态码，表示服务器已成功接收到请求并进行处理。常见的 2** 类型的状态码如下：
2. 3** 重定向相关的响应状态码
3** 范围的状态码，表示服务器要求客户端重定向，需要客户端进一步的操作以完成资源的请求。常见的 3** 类型的状态码如下：
3. 4** 客户端错误相关的响应状态码
4** 范围的状态码，表示客户端的请求有非法内容，从而导致这次请求失败。常见的 4** 类型的状态码如下：
4. 5** 服务端错误相关的响应状态码
5** 范围的状态码，表示服务器未能正常处理客户端的请求而出现意外错误。常见的 5** 类型的状态码如下：
219
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
