HTTP 协议基础入门教程
前后端数据的交换一般是基于 HTTP 协议。
HTTP 协议包括客户端和服务端两个实体,客户端发送请求给服务端,服务端返回响应给客户端。
在 HTTP 中,数据称为资源,可以是 html 文档、图片、也可以是普通文本。资源是通过 URL 进行定位的。
URL
当客户端需要访问服务端资源时,首先需要知道资源的 url,例如打开 bilibili 网站:
http://www.bilibili.com
或者请求某篇博文下的所有评论。
http://jsonplaceholder.typicode.com/comments?postId=1
URL 的组成部分有:
- http:// - 协议 Protocal
- jsonplaceholder.typicode.com - 主机 Host
- /comments - 路径 path
- ?postId=1 - 查询参数
服务端收到 url 会解析它们并返回相应的数据。
发送 HTTP 请求
HTTP 请求包括下边几个部分
GET /comments?postId=1 HTTP/1.1
请求头 request headers
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
...
请求体(如果有) request body
....
- 请求方式, 告知服务器要进行的操作,GET是默认请求方式,意思是从服务端获取资源,另外还有几个其他常用的方式:
- POST - 创建资源
- PUT - 更新资源
- DELETE - 删除资源
- 区别是 GET 和 DELETE 一般没有请求体。而POST 和 PUT 通常带有请求体,用于向服务端发送资源信息。
接下来是:
- 请求资源的路径和查询参数
- HTTP 版本
- 请求头,包含额外的信息来帮助服务器决定如何进行响应,比如使用 accept 设置接收响应资源的类型
- 请求体,是需要发送给服务器的数据
接收响应
服务端在处理请求之后发送响应给客户端。内容有:
HTTP/1.1 200 OK
Date: Sat, 02 May 2020 08:21:09 GMT
Content-Type: application/json; charset=utf-8
Cache-Control: max-age=14400
[
{
"postId": 1,
"id": 1,
"name": "id labore ex et quam laborum",
"email": "Eliseo@gardner.biz",
"body": "laudantium enim quasi est quidem magnam voluptate ipsam eos\ntempora quo necessitatibus\ndolor quam autem quasi\nreiciendis et nam sapiente accusantium"
}
]
...
- HTTP 协议版本
- 响应状态码,表明响应的结果
- 100-199 一般信息
- 200-299 成功响应
- 300-399 重定向
- 400-499 客户端错误
- 500-599 服务端错误
接下来是:
- 状态码含义的简要描述
- 响应头,与请求头类似,包含额外的响应信息,比如告知客户端如何控制缓存和 cookie。
- 响应体(如果有)- 是服务端返回的数据
无状态
HTTP 协议是无状态的,每次客户端发出的请求都被认为是从全新的客户端发出来的,如果需要记录状态则需要使用 cookie 和 session 来保持会话,实现登录和购物车之类的功能。
HTTP/2
现在 HTTP/2已经可以正式开始使用了,它跟 HTTP 1.1不同的是:
- 数据通过二进制形式传输,不再是文本形式
- 多路复用 - 建立连接后一次可以发送多个 HTTP 请求
- 压缩 http headers,减少负载
- 支持 server push
好了,这就是今天的前后端交互之 HTTP 协议,看完这些你应该了解前端应用发送请求和接收响应时,各项参数的含义了。如果有帮助别忘了三连加关注,我是峰华,感谢观看!
一系列的课程让你成为高级前端工程师。课程覆盖工作中所有常用的知识点和背后的使用逻辑,示例全部都为工作项目简化而来,学完即可直接上手开发!
即使你已经是高级前端工程师,在课程里也可能会发现新的知识点和技巧,让你的工作更加轻松!
《React 完全指南》课程,包含 React、React Router 和 Redux 详细介绍,所有示例改编自真实工作代码。点击查看详情。
《Vue 3.x 全家桶完全指南与实战》课程,包括 Vue 3.x、TypeScript、Vue Router 4.x、Vuex 4.x 所有初级到高级的语法特性详解,让你完全胜任 Vue 前端开发的工作。点击查看详情。
《React即时通信UI实战》课程,利用 Storybook、Styled-components、React-Spring 打造属于自己的组件库。
《JavaScript 基础语法详解》本人所著图书,包含 JavaScript 全面的语法知识和新特性, 可在京东、当当、淘宝等各大电商购买