前后端数据交互
1-1 初识前后端通信
<script>
// 1 前后端通信是什么
// 前端和后端数据交互的过程
// 浏览器和服务器之间数据交互的过程
// 2 后端向前端发送数据
// 访问页面
// 3 前端向后端发送数据
// 用户注册
</script>
1-2 前后端通信的过程与概念解释
<script>
// 1 前后端通信的过程
// 浏览器向服务器发送请求数据 服务器返回浏览器响应数据
// 前后端的通信是再 '请求-响应' 中完成的
// 2 概念解释
// 前端 : 浏览器端
// 客户端 : 只要能和服务器通信的就叫客户端
// 命令行工具
// curl https:www.........
// 后端 : 服务器端
//
</script>
1-3 前后端的通信方式
<script>
// 1 使用浏览器访问页面
// 再浏览器地址栏输入网址 按下回车
// 2 HTML 的标签
// 浏览器再解析 HTML 标签的时候 遇到一些特殊的标签 会再次向服务器发送请求
// link/img/script/iframe
// 假装有css js img // 懒得写
// 还有一些标签 浏览器解析的时候 不会像服务器发送请求 但是用户可以使用它们像服务器发送请求
// a/form
// 3 Ajax 和 Fetch
</script>
HTTP协议
2-1 初识HTTP
<script>
// 1 HTTP 是什么
// Hyper Text Transfer Protocol
// 超文本传输协议
// HTML : 超文本标记语言
// 超文本 : 原先一个个单一的文本通过超链接将其联系起来 由原先的单一的文本变成了可无限延伸 扩展的超级文本 立体文本
// HTML JS CSS 图片 字体 音频 视频 等等文件 都是通过 HTTP (超文本传输协议) 再服务器和浏览器之间传输
// 每一次前后端通信 前端需要主动向后端发出请求 后端接收到前端的请求后 可以给出响应
// HTTP 是一个请求-响应协议
// 2 HTTP 请求响应的过程
// https://www............
</script>
2-2 HTTP报文
<script>
// 1 HTTP 报文是什么
// 浏览器向服务器发送请求时 请求本身激素信息 叫请求报文
// 服务器向浏览器发送响应时传输的信息 叫响应报文
// 2 HTTP 报文格式
// 请求
// 请求头 : 起始行 + 首部
// 请求体
// GET 请求 : 没有请求体 数据通过请求头携带
// POST 请求 : 有请求体 数据通过请求体携带
// 响应
// 响应头 : 起始行 + 首部
// 响应体
</script>
2-3 HTTP方法
<script>
// 1 常用的 HTTP 方法
// 浏览器发送请求时采用的方法 和响应无关
// GET POST PUT DELETE
// 用来定义对于资源采取什么样的操作的 有各自的语义
// 2 HTTP 方法的语义
// GET 获取数据
// 获取资源 (文件)
// POST 创建数据
// 注册
// PUT 更新数据
// 修改个人信息 修改密码
// DELETE 删除数据
// 删除一条评论
// 增删改查
// 这些方法虽然有各自的语义 但是不是强制性的
// 3 RESTful 接口设计
// 一种接口设计风格 充分利用 HTTP 方法的语义
// 通过用户 ID 获取个人信息 使用 GET 方法
// https://www.imooc/api/http/getUser?id=1
// 注册新用户 使用 POST 方法
// https://www.imooc/api/http/addUser
// 修改一个用户 使用 PUT 方法
// https://www.imooc/api/http/modifyUser
// 删除一个用户 使用 DELETE 方法
// https://www.imooc/api/http/deleteUser
</script>
2-4 GET和POST方法的对比
<script>
// 1 语义
// GET : 获取数据
// POST : 创建数据
// 2 发送数据
// GET : 通过地址在请求头中携带数据
// 能携带的数据和地址的长度有关系 一般最多就几K
// POST 既可以通过地址在请求头中携带数据 也可以通过请求体携带数据
// 能携带的数据量理论上是无限的
// 携带少量数据 可以使用 GET 请求 大量的数据可以使用 POST 请求
// 3 缓存
// GET 可以被缓存 POST 不会被缓存
// 4 安全性
// ?username = alex
// GET 和 POST 都不安全
// 发送密码或其他敏感信息时不要使用 GET 主要是避免之间被他人窥屏或通过历史记录找到你的密码
</script>
2-5、HTTP状态码
<script>
// 1 HTTP 状态码是什么
// 定义服务器对请求的处理结果 是服务器返回的
// 2 HTTP 状态码的语义
// 100~199消息 : 代表请求已被接受 需要继续处理
// websocket
// 200~299 成功
// 200
// 300~399 重定向
// http://www.imooc.com
// https://www.imooc.com
// 301 Moved Permanently
// 302 Move Temporarily
// 304 Not Midified
// 400~499 请求错误
// 400 Bad Request
// 404 Not Found
// 500~599 服务器错误
// 500 Internal Server Error
</script>
Cookie
3-1 初识Cookie
<script>
// 1 Cookie 是什么
// Cookie 全称 HTTP Cookie 简称 Cookie
// 是浏览器储存数据的一种方式
// 因为存储在用户本地 而不是存储在服务器上 是本地存储
// 一般会自动随着浏览器每次请求发送到服务器端
// 2 Cookie 有什么用
// 利用 Cookie 跟踪统计用户访问该网站的习惯 风闻了哪些页面 在每个网页的停留时间等
// 3 在浏览器中操作 Cookie
</script>
3-2 Cookie的基本用法
<script>
// 1 写入 Cookie
// document.cookie = 'username = zs'
// document.cookie = 'age = 18'
// 不能一起设置 只能一个一个设置
// document.cookie = 'username = zs ; age = 18'
// 2 读取 Cookie
// console.log(document.cookie)
// 读取的是一个由名值对构成的字符串 每个值对之间由";"(一个分号一个空格)隔开
</script>
3-3、Cookie的属性1
<script>
// 1 Cookie 的名称 (Name) 和值 (Value)
// 最重要的两个属性 创建Cookie时必须填写 其它属性可以使用默认值
// Cookie 的名称或值如果包含非英文字母 则写入时需要使用 encodeURLComponent() 编码 读取时使用 decodeURLComponent() 编码
// document.cookie = 'username = alex'
// document.cookie = `username = $(encodeURLComponent('张三'))`
// dpcument.cookie = `${encodeURIComponent('用户名')} = ${encodeURIComponent('张三')}`
// 一般名称使用英文字母 不要用中文 值可以用中文 但是要编码
// 2 失效 (到期) 时间
// 对于失效的 Cookie 会被浏览器删除
// 如果没有设置失效 (到期) 时间 这压根的 Cookie 成为会话 Cookie
// 它存在内存中 当会话结束 也就是浏览器关闭时 Cookie 消失
// document.cookie = 'username = alex'
// 想长时间存在 设置 Expires 或 Max-Age
// document.cookie = `username = alex ; expires = ${new Date('2100-1-01 00:00:00')}`
// max-age
// 值为数字 表示当前时间 + 多少秒后过期 单位是秒
// document.cookie = 'username = alex ; max-age = ${24 * 3600 * 30}'
// 如果 max-age 的值是0或负数 则Cookie会被删除
// document.cookie = 'username = alex'
// document.cookie = 'username = alex ; max-age = 0'
// document.cookie = 'username = alex ; max-age = -1'
</script>
3-4 Cookie的属性2
<script>
// 3 Domain 域
// Domain 限定了访问 Cookie 的范围
// 使用 JS 只能读写当前域或父域的 Cookie 无法读写其他域的 Cookie
// document.cookie = 'username = alex ; domain = www.imooc.com'
// www.imooc.com m.imooc.com 当前域
// 父域 : .imooc.com
// 4 Path 路径
// Path 限定了访问 Cookie 的范围 (同一个域名下)
// document.cookie = 'username = alex ; path = course/list'
// document.cookie = 'username = alex ; path = /1.Cookie/'
</script>
3-5 Cookie的属性3
<script>
// 5 HttpOnly
// 设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问
// 6 secure 安全标志
// secure 限定了只要在使用了 https 而不是 http 的情况下才可以发送给服务端
// Domain Path Secure 都要满足条件 还不能过期的 Cookie 才能随着请求发送到服务器
</script>
