前后端数据交互入门(HTTP协议篇)

日暮里的猫
295 阅读5分钟

文章来源: 课程简介_哔哩哔哩_bilibili

1. 前后端通信是什么

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

后端向前端发送数据 - 页面加载/刷新页面

前端向后端发送数据 - 用户注册

2.前后端通信的过程与概念解释

前后端通信的过程

image.png

前后端通信的过程就是在请求-响应之间完成的

概念解释

  • 前端: 又叫浏览器端
  • 客户端: 只要能和服务器通信的就叫客户端, 例如浏览器/命令行工具(curl + 网址)等
  • 后端: 又叫服务器端

3. 前后端通信方式

  • 使用浏览器访问网页
    • 在浏览器地址栏中输入网址, 并按下回车
  • HTML的标签:
    • 浏览器在解析HTML标签的时候, 会遇到一些特殊的标签, 会再次向服务器发出请求(浏览器解析页面时发起并行请求)
    • 例如Chrome在同一个域名下可以同时发起6个并行请求
    • 常见发起请求的标签
      • link
      • img
      • script
      • iframe
    • 还有一些标签, 浏览器解析时不会向服务器发起请求, 但是用户可以使用他们向服务器发送请求
      • a
      • form
  • Ajax和Fetch

4. 初识HTTP

  • HTTP是什么
    • HTTP: 超文本传输协议
      • 超文本: 原来单一的文本, 通过标签/超链接的形式联系起来, 有单一文本变成了理论上可无限延伸与拓展的超级文本与立体文本(3D渲染, three.js等)
      • HTML, CSS, JS, 图片, 字体, 音视频等, 都是通过超文本传输协议在浏览器和服务端之间传输的
      • 每一次前后端通信, 前端需要主动向后端发出请求, 后端接收到前端的请求后, 也可以给出响应
      • HTTP是一个请求-响应协议
  • HTTP请求响应的过程image.png
    • image.png
      • Size中, 有的是向服务器获取的, memory cache是内存缓存, disk cache是硬盘缓存

5.HTTP报文

  • HTTP报文是什么
    • 浏览器向服务器发送请求时, 请求本身就是信息, 叫做请求报文
    • 服务器向浏览器发送响应时传输的信息, 叫做响应报文
  • HTTP报文格式image.png
    • 请求
      • 请求头(Headers的Request Headers): 起始行+首部
      • 请求体: 起始行+首部(GET请求没有请求体)
        • GET请求没有请求体, 数据通过请求头携带
        • POST请求的请求体为Headers的Form Data, 数据通过请求体携带
    • 响应
      • 响应头(Headers的Response Headers): 起始行+首部
      • 响应体(Response): 起始行+首部+主体

6. HTTP方法

常用的HTTP方法

HTTP方法是浏览器发送请求时采用的方法, 与响应无关

GET/POST/PUT/DELETE

HTTP方法是用来定义对于资源采取什么样的操作的, 有各自的语义

HTTP方法的语义

增删改查(POST/DELETE/PUT/GET)

  • GET获取数据(获取资源)
  • POST创建数据(注册)
  • PUT更新数据(修改个人信息, 修改密码)
  • DELETE删除数据(删除一条自己的评论)

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

RESTful接口设计

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

通过上述的例子我们发现, 仅仅对一个用户信息增删改查就要花费四个接口至之多, 这时我们就引出了RESTful的接口设计风格, 即:通过一个接口就实现增删改查四种操作

它的实现原理可以简单的理解为后端对客户端request过来的数据进行判断, 判断是GET请求还是POST请求, 进而做出不同的响应

7. GET和POST方法的对比

语义

GET: 获取数据

POST: 创建数据

发送数据

GET通过地址在请求头中携带数据, 能够携带的数据量和地址的长度有关, 一般最多几K

POST既可以通过地址在请求头中携带数据, 也可以通过请求体携带数据, 能携带的数据量理论上是无限的

如果携带少量数据, 可以使用GET请求, 大量的数据可以使用POST请求

缓存

GET可以被缓存, POST不会被缓存, 这是由于浏览器通常会缓存地址, 而GET正是通过在请求头中携带数据的一种请求方式

安全性

GET和POST都不安全, 但GET更不安全一点

发送密码或者其他敏感信息时不要使用GET, 主要是避免直接被他人窥屏或通过历史记录找到你的密码

8. HTTP状态码

HTTP状态码是什么

HTTP状态码: 定义服务器对请求的处理结果, 是服务器返回的

HTTP状态码的语义

100-199

  • 请求已被接受, 但需要继续处理 (例如websocket)

200-299: 成功

  • 200(成功)

300-399: 重定向

  • 301 - Moved Permanently(永久性重定向, 重定向的位置会被浏览器缓存下来)
  • 302 - Move Temporarily(临时性跳转)
  • 304 - Not Modified(文件没有被修改)

400-499: 前端错误, 例如代码写错了, 请求到了错误的地址

  • 404 - Not Found
  • 400 - Bad Request

500-599: 服务器错误

  • 500 - Internal Server Error
avatar
文章
阅读
粉丝