2023/3/20日笔记

42 阅读7分钟

1-1、初识前后端通信

1.前后端通信是什么

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

2.后端向前端发送数据

  • 访问页面

3.前端向后端发送数据

  • 用户注册

代码案例

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

1.前后端通信的过程

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

2.概念解释

  • 前端:浏览器端
  • 客户端:只要能和服务器通信的就叫客户端
  • 命令行工具 cmd

-后端:服务器端

代码案例

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 请求响应的过程

image.png

代码案例

<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 接口设计

代码案例

<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 的情况下才可以发送给服务端

Domain、Path、Secure 都要满足条件,还不能过期的 Cookie 才能随着请求发送到服务器端

代码案例