前后端数据交互

前后端数据交互

  • 网页上所有的数据都是来源于后端,比如淘宝或者京东的秒杀,用户的登陆或者注册,这些都需要借助于后端来存储数据。我们前端需要做的就是把数据发送给后端,后端发送给我们的数据我们要拿到把它显示到页面上,这个过程就是前后端数据交互的过程,简称交互。

  • 前端发送数据给后端的方式

    • 表单
    • ajax
  • 表单登陆的案例

<form action="https://www.baidu.com" method="get">
    <input type="text" name="username">
    <input type="text" name="age">
    <button>登陆</button>
</form>
<form action="https://www.baidu.com" method="post">
    <input type="text" name="username">
    <input type="text" name="age">
    <button>登陆</button>
button>
</form>

请求方式

GET 请求

  • 参数以 querystring 的形式发送,也就是直接拼接在 请求路径的后面
  • GET 请求会被浏览器主动缓存
  • GET 请求根据不同的浏览器对长度是有限制的
    • IE: 2083 个字符
    • FireFox: 65536 个字符
    • Safari: 80000 个字符
    • Opera: 190000 个字符
    • Chrome: 8182 个字符
    • APACHE(server): 理论上接受的最大长度是 8192 个字符(有待商榷)
  • 对参数的类型有限制,只接受 ASCII 码的格式
  • GET 请求是明文发送,相对不安全

POST 请求

  • 参数以 request body的形式发送,也就是放在请求体中
  • POST 请求不会被浏览器主动缓存,除非手动设置
  • POST 请求理论上是没有限制的,除非服务端做了限制
  • 对参数类型没有限制,理论上可以传递任意数据类型,只不过要和请求头对应
  • POST 请求是密文发送,相对安全

区别

  1. get请求参数会显示在地址栏,post不会,get没有post安全(安全性角度
  2. get请求参数有长度限制,post不会(数据量角度
  3. get请求参数只能显示ASCII码表支持的字符,有中文或者空格会乱码,post不会(编码乱码角度
  4. get请求会默认被浏览器缓存,post不会被缓存(缓存角度

HTTP协议

含义

http协议是前后端数据交互过程中遵循的协议

协议内容

  1. 前后端建立链接,三次握手

    • 目的:确保前后端都能知道双方正常的收发信息

    • 第一次握手:客户端要向服务端发起连接请求,首先客户端随机生成一个起始序列号x,那客户端向服务端发送SYN=1标识符,序列号seq=x。

    • 第二次握手:服务端收到客户端发过来的报文后,发现SYN=1,知道这是一个连接请求,于是将客户端的起始序列号x存起来,并且随机生成一个服务端的起始序列号y。然后给客户端回复一段报文,回复报文包含SYN和ACK标志(也就是SYN=1,ACK=1)、序列号seq=y、确认号ack=x+1(客户端发过来的序列号+1)。

    • 第三次握手:客户端收到服务端的回复后发现ACK=1并且ack=x+1,于是知道服务端已经收到了序列号为x的那段报文;同时发现SYN=1,知道了服务端同意了这次连接,于是就将服务端的序列号y给存下来。然后客户端再回复一段报文给服务端,报文包含ACK标志位(ACK=1)、ack=y+1(服务端序列号+1)、seq=x+1。当服务端收到报文后发现ACK=1并且ack=y+1,就知道客户端收到序列号为y的报文了,就这样客户端和服务端通过TCP建立了连接。

    • 三次握手图示

  2. 前端向后端发起请求request(前端写代码实现),每一个请求都会有一个请求报文,请求报文在浏览器里面的network下面的request headers里面查看请求头,在payload里面查看请求体(具体的请求数据)

    • 请求头都是键值对的方式(记住几个重要的请求头)
  3. 后端接受到前端发送过来的报文,对前端做出响应response,每一个响应都会有一个响应的报文,响应的报文可以在network里面的response headers查看,在previewresponse里面查看后端返回的数据

  4. 前后端断开链接,四次挥手

    • 目的:确保前后端双方都知道双方即将断开链接

    • 第一次挥手:当客户端的数据都传输完成后,客户端向服务端发出连接释放报文包含FIN标志位(FIN=1)、序列号seq=u

    • 第二次挥手:服务端收到客户端发的FIN报文后给客户端回复确认报文,确认报文包含ACK标志位(ACK=1)、确认号ack=u+1、序列号seq=v。此时服务端处于关闭等待状态,而不是立马给客户端发FIN报文,这个状态还要持续一段时间,因为服务端可能还有数据没发完

    • 第三次挥手:服务端将最后数据(比如50个字节)发送完毕后就向客户端发出连接释放报文,报文包含FIN和ACK标志位(FIN=1,ACK=1)、确认号和第二次挥手一样ack=u+1、序列号seq=w

    • 第四次挥手:客户端收到服务端发的FIN报文后,向服务端发出确认报文,确认报文包含ACK标志位(ACK=1)、确认号ack=w+1、序列号seq=u+1。注意客户端发出确认报文后不是立马释放TCP连接,而是要经过一段时间后才释放TCP连接。而服务端一旦收到客户端发出的确认报文就会立马释放TCP连接,所以服务端结束TCP连接的时间要比客户端早一些。

    • 四次挥手图示

相关推荐

  1. 前后交互数据库与身份认证

    2024-04-02 06:42:01       21 阅读
  2. 前后交互注册 数据储存到数据库

    2024-04-02 06:42:01       22 阅读
  3. SpringMVC实验(四)——前后分离下的数据交互

    2024-04-02 06:42:01       26 阅读
  4. “探索AJAX:前端与后数据交互的利器“

    2024-04-02 06:42:01       16 阅读

最近更新

  1. leetcode705-Design HashSet

    2024-04-02 06:42:01       5 阅读
  2. Unity发布webgl之后打开streamingAssets中的html文件

    2024-04-02 06:42:01       5 阅读
  3. vue3、vue2中nextTick源码解析

    2024-04-02 06:42:01       6 阅读
  4. 高级IO——React服务器简单实现

    2024-04-02 06:42:01       5 阅读
  5. 将图片数据转换为张量(Go并发处理)

    2024-04-02 06:42:01       4 阅读
  6. go第三方库go.uber.org介绍

    2024-04-02 06:42:01       6 阅读
  7. 前后端AES对称加密 前端TS 后端Go

    2024-04-02 06:42:01       7 阅读

热门阅读

  1. veu视图刷新Vue.$set和Vue.$forceUpdate的区别

    2024-04-02 06:42:01       3 阅读
  2. 深入理解VUE的keep-alive

    2024-04-02 06:42:01       2 阅读
  3. 禁止软件访问外网

    2024-04-02 06:42:01       1 阅读
  4. Git简介

    Git简介

    2024-04-02 06:42:01      1 阅读
  5. kafka面试常见问题

    2024-04-02 06:42:01       3 阅读