前后端数据交互与HTTP协议

目录

1.前后端通信是什么？

后端向前端发送数据

 前端向后端发送数据

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

前后端通信的过程

 概念解释

前后端的通信方式

1.使用浏览器访问网页

2.HTML的标签

3.Ajax 和 Fetch

HTTP协议

HyperText Transfer Protocol    超文本传输协议

http报文

http保文是什么？

http报文格式

HTTP方法

常用的HTTP方法

get 和 post方法的对比

HTTP状态码

---

1.前后端通信是什么？

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

后端向前端发送数据

访问页面（后端向前端发送数据的过程）

 前端向后端发送数据

用户注册

 点击注册，浏览器会把填写的数据传递给服务器，服务器会对其进行一些处理然后存在数据库中。这样也就创建好了用户信息。

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

前后端通信的过程

前后端通信的过程是在 “请求 -  响应” 的过程中完成。

 概念解释

前端：浏览器端

客户端：只要能和服务器通信的就叫客户端（浏览器是属于客户端的一种）

        eg：命令行工具cmd，也能访问到客户端

分析：虽然能访问到百度的服务器，但是却不能像浏览器一样，将返回的数据进行渲染成页面。

 后端：服务器端

前后端的通信方式

1.使用浏览器访问网页

通过浏览器向服务器请求资源

在浏览器地址栏输入网址，按下回车。

2.HTML的标签

在浏览器解析HTML标签的时候，遇到一些特殊的标签，会再次向服务器发送请求。

link  /  img  / srcipt / iframe(很少用)

扩展知识：浏览器请求资源时，是异步的，并不是需要等一次请求结束才会进行下一次。而是一次请求的同时可以进行下一次请求。

为什么是异步的？ 因为如果是同步的，就必须要等一次请求结束才会进行下次请求，如果某次请求的数据特别大，那么就会一直等待请求完毕，若是网络不好，请求时间就会过长。

所以一般浏览器都会允许多个并发请求(异步)，谷歌浏览器一般允许同一域名下有6个并发请求(重点)：

eg：一个网页上的图片，并不全部在是同一域名的服务器上，如果把图片都放在同一域名下，它们就会去争那6个并发资格(可能导致页面图片加载不同步显示)，如果把它们放在不同的域名下，每个域名都有6个并发资格，所以它们在很大程度上可以并发获取。

eg：精灵图  很多小图片放在一张大图片上。如果不这样做，太多的小图片会占用并发请求通道，需要请求多次，而合在一张图片上，只需要请求一次。

还有一些标签，浏览器解析时，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求

a标签   /  form标签

3.Ajax 和 Fetch

HTTP协议

HyperText Transfer Protocol    超文本传输协议

HTML  超文本标记语言

超文本：原先一个个单一的文本，通过超链接将其联系起来，由原先的单一的文本变成了可无限延伸，扩展的超级文本，立体文本。

HTTP：就是在超文本的基础上的传输协议

eg：HTML / JS / CSS / 图片 / 字体 / 音频 / 视频 等等文件，都是通过HTTP(超文本传输协议)在浏览器和服务器之间传输

每一次前后端通信，前端需要主动向后端发送请求，后端接收到前端的请求后，可以给出响应。HTTP是一个 请求 - 响应协议

http报文

http保文是什么？

浏览器向服务器发送请求时，请求本身就是信息，叫请求报文

服务器向浏览器发送响应时传输的信息，叫响应报文

http报文格式

请求：

请求头： 起始行 + 首部

请求体

响应

响应头：起始行 + 首部

响应体

get 请求，没有请求体，数据是通过请求头携带

post请求，有请求体，数据通过请求体携带（响应体响应体，get,post都有）

HTTP方法

常用的HTTP方法

GET  /  POST / PUT / DELETE

浏览器发送请求时采用的方法，和响应无关

用来定义对于资源采取什么样的操作，有各自的语义。

get 和 post方法的对比

1.语义

GET: 获取数据

POST:创建数据

2.发送数据

GET 通过地址在请求头中携带数据

能携带的数据量和地址的长度有关系，一般最多就几K

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

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

3.缓存

GET可以被缓存，POST不会被缓存

4.安全性

GET 和 POST 都不安全

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

HTTP状态码

1.HTTP状态码是什么？

定义服务器对请求的处理结果，是服务器返回的

2.HTTP状态码的语义

100~199消息：代表请求已经被接收，需要继续处理

ws --> websocket 是vscode的一种插件，使得写的内容在浏览器上自动保存更新。

 200~299 请求成功

200

 300 ~ 399 重定向

原来地址：http://www.imooc.com/

现在地址：https://www.imooc.com/

301 Moved Permanently   永久性移动。（谨慎使用）

分析：访问http://www.imooc.com/ 这个老的网址，并不会直接把数据返回过来，而是跳转到新的网址 https://www.imooc.com/ 后再把数据返回回来。

 会把网址缓存到用户的本地缓存中，下一次，直接重用户缓存里面，找到这个地址进行跳转。

302 Moved Temporarily  临时性移动

不会缓存，每次都会向服务器发送请求，确认一些要跳转的位置。

304  Not Modified  没有修改

本地有一个缓存，但不知道过期没有，就向服务器发送请求看过期没有，没有的话，就返回304，表示这个缓存没有修改，可以使用。

400~499 请求错误

404 Not Found  

一般的话，错误是在前端这边，请求的网址错误啊什么的。。。

500~599 服务器错误

500 Internal Server Error