2023/3/20日笔记一、前后端数据交互二、HTTP协议三、Cookie（1~5）认识Cookie、Cookie

1-1、初识前后端通信

1.前后端通信是什么

前端和后端数据交互的过程
浏览器和服务器之间数据交互的过程

2.后端向前端发送数据

访问页面

3.前端向后端发送数据

用户注册

代码案例

无

1-2、前后端通信的过程与概念解释

1.前后端通信的过程

前后端的通信是在 ‘请求-相应’ 中完成的

2.概念解释

前端：浏览器端
客户端：只要能和服务器通信的就叫客户端
命令行工具 cmd
- curl https:www.imooc.com

-后端：服务器端

代码案例

无

1-3、前后端的通信方式

1.浏览器访问网页

在浏览器地址栏输入网址，按下回车

2.HTMl 的标签

浏览器在解析 HTML 标签的时候，遇到一些特殊的标签，会再次向服务器发送请求
- link/img/script/iframe
还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求
- a/form

3.Ajax 和 Fetch

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1-3、前后端的通信方式</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <a href="https://imooc.com">慕课网</a>

    <form action="https://imooc.com" method="post">
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <input type="submit" value="注册">
    </form>
    <img src="E:\QQ\Vscode\项目部\ES6\Promise的注意事项和应用\“大美女”.gif" alt="">
    <script src="###"></script>
    <script>
        // 1.浏览器访问网页
        // 在浏览器地址栏输入网址，按下回车

        // 2.HTMl 的标签
        // 浏览器在解析 HTML 标签的时候，遇到一些特殊的标签，会再次向服务器发送请求
        // link/img/script/iframe

        // 还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求
        // a/form

        // 3.Ajax 和 Fetch
    </script>
</body>
</html>

2-1、初识HTTP

1.HTTP 是什么

HyperText Transfer Protocol：超文本传输协议
HTML:超文本标记语言
超文本：原先一个个单一的文本，通过超链接将其联系起来。由原先的单一文本变成了可无限延伸、扩展的超级文本、立体文本
HTML、JS、CSS、图片、字体、音频、视频等等文件，都是通过HTTP（超文本传输协议）在服务器和浏览器之间传输
每一次前后端通信，前端需要主动向后端发出请求，后端接收到前端的请求后，可以给出响应
HTTP 是一个请求-响应协议

2.HTTP 请求响应的过程

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-1、初识HTTP</title>
</head>
<body>
    <script>
        // 1.HTTP 是什么
        // HyperText Transfer Protocol
        // 超文本传输协议
        // HTML:超文本标记语言

        // 超文本：原先一个个单一的文本，通过超链接将其联系起来。由原先的单一文本变成了可无限延伸、扩展的超级文本、立体文本
        // HTML、JS、CSS、图片、字体、音频、视频等等文件，都是通过HTTP（超文本传输协议）在服务器和浏览器之间传输

        // 每一次前后端通信，前端需要主动向后端发出请求，后端接收到前端的请求后，可以给出响应
        // HTTP 是一个请求-响应协议

        // 2.HTTP 请求响应的过程
        // https://www.imooc.com
    </script>
</body>
</html>

2-2、HTTP报文

1.HTTP 报文是什么

浏览器向服务器发送请求时，请求本身就是信息，叫请求报文
服务器向浏览器发送响应时传输的信息，这叫响应报文

2.HTTP 报文格式

请求
请求头：起始行+首部
请求体
GET 请求，没有请求体，数据通过请求头携带
POST 请求，有请求体，数据通过请求体携带
响应
响应头：起始行+首部
响应体

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-2、HTTP报文</title>
</head>
<body>
    <form action="https://imooc.com" method="get">
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <input type="submit" value="注册">
    </form>
    <form action="https://imooc.com" method="post">
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <input type="submit" value="注册">
    </form>
    <script>
    </script>
</body>
</html>

2-3、HTTP方法

1.常用的 HTTP 方法

浏览器发送请求时采用的方法，和响应无关
GET、POST、PUT、DELETE
用来定义对于资源采取什么样的操作的，有各自的语义

2.HTTP 方法的语义

GET 获取数据

获取资源（文件）

POST 创建数据

PUT 更新数据

修改个人信息，修改密码

DELETE 删除数据

删除一条评论

增删改查

这些方法虽然各有各自的语义，但是并不是强制性的

3.RESTful 接口设计

一种接口设计风格，充分利用 HTTP 方法的语义
通过用户 ID 获取个人信息，使用 GET方法
www.imooc.com/api/http/ge…
GET
www.imooc.com/api/http/us…
注册新用户，使用 POST方法
www.imooc.com/api/http/ad…
POST
www.imooc.com/api/http/us…
修改一个用户，使用 POST方法
www.imooc.com/api/http/mo…
PUT
www.imooc.com/api/http/us…
删除一个用户，使用 POST 方法
www.imooc.com/api/http/de…
DELETE
www.imooc.com/api/http/us…

代码案例

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2-3、HTTP方法</title>
</head>
<body>
    <script>
        // 1.常用的 HTTP 方法
        // 浏览器发送请求时采用的方法，和响应无关

        // GET、POST、PUT、DELETE

        // 用来定义对于资源采取什么样的操作的，有各自的语义
        
        // 2.HTTP 方法的语义
        // GET 获取数据
        // 获取资源（文件）

        // POST 创建数据
        // 注册

        // PUT 更新数据
        // 修改个人信息，修改密码

        // DELETE 删除数据
        // 删除一条评论

        // 增删改查

        // 这些方法虽然各有各自的语义，但是并不是强制性的

        // 3.RESTful 接口设计
        // 一种接口设计风格，充分利用 HTTP 方法的语义

        // 通过用户 ID 获取个人信息，使用 GET方法
        // https://www.imooc.com/api/http/getUser?id=1
        
        // GET
        // https://www.imooc.com/api/http/user?id=1
        
        // 注册新用户，使用 POST方法
        // https://www.imooc.com/api/http/addUser
        
        // POST
        // https://www.imooc.com/api/http/user
        
        // 修改一个用户，使用 POST方法
        // https://www.imooc.com/api/http/modifyUser
        
        // PUT
        // https://www.imooc.com/api/http/user
        
        
        // 删除一个用户，使用 POST 方法
        // https://www.imooc.com/api/http/deleteUser
        
        // DELETE
        // https://www.imooc.com/api/http/user
        
    </script>
</body>
</html>

2-4、GET和POST方法的对比

1.语义

GET：获取数据
POST：创建数据

2.发送数据

GET 通过地址在请求头中携带数据
能携带的数据量和地址长度有关系，一般最多就几k
POST 既可以通过地址在请求头中携带数据，也可以通过请求体携带数据
能携带的数据量理论上是无限的
携带少量数据，可以使用 GET 请求，大量的数据可以使用 POST 请求

3.缓存

GET 可以被缓存，POST 不会被缓存

4.安全性

?username=alex
GET 和 POST 都不安全
GET 的数据会直接体现在地址栏中，很容易被看见
POST 的数据如果遇到懂行的，会直接打开控制台去翻你于后台的交互数据来查找到
所以他们两个都是半斤八两，都谈不上安全，硬要比就是 POST 比 GET 能防止一些非专业人士的盗取隐私
发送密码或其他敏感信息时不要使用 GET，主要是避免直接被他人窥屏或通过历史记录找到你的密码

代码案例

无

2-5、HTTP状态码

1.HTTP 状态码是什么

定义服务器对请求的处理结果，是服务器返回的

2.HTTP 状态码的语义

100~199 消息：代表请求已被接受，需要继续处理
websocket
200~299 成功
200 成功
300~399 重定向
www.imooc.com/
www.imooc.com/
301 Moved Permanently:永久性的移动获取：除非手动清空浏览器的缓存，否则永久都会用这个网址，一般不会用这种方法，因为无法去控制
302 Moved Temporarily：临时性移动获取：不会去缓存，每一次都会向服务器发送请求，确认后再跳转
304 Not Modified:最常见，代表没有修改：本地发送请求确认缓存是否过期，如果没过期就返回304，不用修改，继续使用
400~499 请求错误
400 Bad Request 要么就是这网站已经关闭了访问，或者就是你的网络无法连接到该网站
404 Not Found 同上
500~599 服务器错误
500 Internal Server Error：比较常见，服务器内部错误，遇到一种从未遇见的错误，无法完成对请求的处理

代码案例

无

3-1、初识Cookie

1.Cookie 是什么

Cookie 全称 HTTP Cookie，简称 Cookie
是浏览器存储数据的一种方式
因为存储在用户本地，而不是存储在服务器上，是本地存储
一般会自动随着浏览器每次请求发送到服务器端

2.Cookie 有什么用

利用 Cookie 跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个网页的停留时间等

3.在浏览器中操作 Cookie

不要在 Cookie 中保存密码等敏感信息

代码案例

无

3-2、Cookie的基本用法

1.写入 Cookie

不能一起设置，只能一个一个设置

2.读取 Cookie

读取的是一个由名值对构成的字符串，每个名值对之间由"; "（一个分号和一个空格）隔开

代码案例

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-2、Cookie的基本用法</title>
</head>

<body>
    <script>
        // 1.写入 Cookie
        document.cookie = 'username=zs';
        document.cookie = 'age=18';

        // document.cookie = 'username=zs; age=18'

        // 2.读取 Cookie
        console.log(document.cookie);

    </script>
</body>

</html>

3-3/4/5、Cookie的属性

1. Cookie 的名称（Name）和值（Value）

最重要的两个属性，创建 Cookie 时必须填写，其他属性可以使用默认值
Cookie 的名称或值如果包含非英文字母，则写入时需要使用 encodeURIComponent() 编码，读取时使用 decodeURIComponent() 解码
一般名称使用英文字母，不要用中文，值可以使用中文，但是要编码

2.失效（到期）时间

对于失效的 Cookie，会被浏览器清除
如果没有设置失效（到期）时间，这样的 Cookie 称为会话 Cookie
它存在内存中，当会话结束，也就是浏览器关闭时，Cookie 消失
想长时间存在，设置 Expires 或 Max-Age
expires
- 值为 Date 类型
max-age
- 值为数字，表示当前时间 + 多少秒后过期，单位是秒

3.Domain 域

Domain 限定了访问 Cookie 的范围
使用 JS 只能读写当前域或父域的 Cookie，无法读写其他域的 Cookie
www.imooc.com m.imooc.com 当前域
父域：.imooc.com

4.path 路径

path 限定了访问 Cookie 的范围（同一个域名下）
使用 JS 只能读写当前路径或当前路径的上一级路径的 Cookie，无法读写下级路径的 Cookie

当 Name、Domain、Path 这 3 个字段都相同的时候，才是同一个 Cookie

5.HttpOnly

设置了 HttpOnly 属性的 Cookie 不能通过 JS 去访问

6.Secure 安全标志

Secure 限定了只有在使用了 https 而不是 http 的情况下才可以发送给服务端

2023/3/20日笔记

1-1、初识前后端通信

1.前后端通信是什么

2.后端向前端发送数据

3.前端向后端发送数据

代码案例

无

1-2、前后端通信的过程与概念解释

1.前后端通信的过程

2.概念解释

代码案例

无

1-3、前后端的通信方式

1.浏览器访问网页

2.HTMl 的标签

3.Ajax 和 Fetch

代码案例

2-1、初识HTTP

1.HTTP 是什么

HyperText Transfer Protocol：超文本传输协议

HTML:超文本标记语言

超文本：原先一个个单一的文本，通过超链接将其联系起来。由原先的单一文本变成了可无限延伸、扩展的超级文本、立体文本

HTML、JS、CSS、图片、字体、音频、视频等等文件，都是通过HTTP（超文本传输协议）在服务器和浏览器之间传输

每一次前后端通信，前端需要主动向后端发出请求，后端接收到前端的请求后，可以给出响应

HTTP 是一个请求-响应协议

2.HTTP 请求响应的过程

代码案例

2-2、HTTP报文

1.HTTP 报文是什么

2.HTTP 报文格式

代码案例

2-3、HTTP方法

1.常用的 HTTP 方法

GET、POST、PUT、DELETE

2.HTTP 方法的语义

GET 获取数据

POST 创建数据

PUT 更新数据

DELETE 删除数据

增删改查

这些方法虽然各有各自的语义，但是并不是强制性的

3.RESTful 接口设计

一种接口设计风格，充分利用 HTTP 方法的语义

通过用户 ID 获取个人信息，使用 GET方法

GET

注册新用户，使用 POST方法

POST

修改一个用户，使用 POST方法

PUT

删除一个用户，使用 POST 方法

DELETE

代码案例

2-4、GET和POST方法的对比

1.语义

2.发送数据

3.缓存

4.安全性

代码案例

无

2-5、HTTP状态码

1.HTTP 状态码是什么

2.HTTP 状态码的语义

100~199 消息：代表请求已被接受，需要继续处理

200~299 成功

300~399 重定向

400~499 请求错误

500~599 服务器错误

代码案例

无

3-1、初识Cookie

1.Cookie 是什么

2.Cookie 有什么用

3.在浏览器中操作 Cookie

代码案例

无

3-2、Cookie的基本用法

1.写入 Cookie

2.读取 Cookie

代码案例

3-3/4/5、Cookie的属性