前端通信与HTTP协议

一、初识前后端通信

1、前后端通信是什么

• 前端和后端数据交互的过程，可以看做是浏览器和服务器之间数据交互的过程

2、后端向前端发送数据

• 访问页面： 就是一个典型的后端向前端发送数据的例子

3、前端向后端发送数据

• 用户注册， 用户填写信息，提交到服务器，注册成功

二、前后端通信的过程与概念解释

1、前后端通信的过程

在请求和相应中完成的

image.png

2、 概念解释

• 前端：一般指浏览器端，属于客户端的一种
• 客户端： 只要是能和服务器端通信的就叫客户端
• 后端：服务端

三、前后端通信的方式

1、使用浏览器访问网页

在浏览器中输入网址，按下回车，获取到网页内容

2、HTML的标签

• 浏览器在解析html标签的时候，遇到一些特殊的标签，会再次向服务器发送请求，例如：link、img、script、iframe
  chrome浏览器同一个域名下默认可以同时并发发送6个请求。
• 浏览器解析的时候，不会像服务器发送其你去，但是用户可以使用它们像服务器发送请求。如：a、form。

3、Ajax和Fetch

四、初识HTTP

1、HTTP是什么

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

2、HTTP请求和响应的过程

image.png

五、HTTP报文

1、HTTP报文是什么

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

3、HTTP报文格式

• 请求
  • 请求头：起始行+首部
  • 请求体： 携带数据
• 响应
  • 响应头：起始行+首部

  • 响应体

    
    
    image.png
• GET 请求，没有请求体，数据通过请求头携带
• POST 请求，有请求体，数据通过请求体携带

六、HTTP方法

1、常用的HTTP方法

• 浏览器发送请求时采用的方法，和相应无关。
• GET、POST 、PUT、 DELETE

2、HTTP 方法的语义

• GET 获取数据，资源、文件。
• POST 创建数据， 一般用于注册
• PUT 更新数据，一般用于修改个人信息，修改密码
• DELETE 删除数据、一般用于删除一条评论

３、RESTful 接口设计

• 一种借口涉及风格，充分利用HTTP方法的语义

七、GET和POST

1、GET 方式

• 通过在请求头中携带数据
• 能携带的数据量和地址的长度有关系，一般最多就几k
• 可以被缓存

2、POST方式

• 既可以通过地址在请求头中携带数据，也可以在请求体中携带数据
• 能携带的数据量理论上是无限的
• 不会被缓存

携带少量的数据，可以使用GET请求，大量的数据可以使用post请求

八、HTTP状态码

1、定义服务器对请求的处理结果，是服务器返回的。
2、HTTP状态码的语义

• 100~199 消息： 代表请求已被接收，正在处理，一般websocket使用
• 200 ~ 299 成功
• 300 ~ 399 重定向
  • 301 永久性重定向，会缓存
  • 302 临时性重定向，不会缓存
  • 304 文件没有修改
• 400 ~ 499 请求错误
  • 404 找不到资源
• 500 ~ 599 服务器错误