一.前后端是如何交互的?
通信协议(Communication Protocol) 是指通信双方对数据传送控制的一种约定
前端与服务端的数据传输基于HTTP协议 HTTP协议是基于请求响应模型 它是为Web浏览器与Web服务器之间的通信而设计的
请求响应模型:
先有请求再有响应
请求和响应是成对出现的 一个请求对应一个响应
二.HTTP和HTTPS
HTTP 是一个用于传输超媒体文档( 例如HTML ) 的应用层协议
HTTPS 简单讲是HTTP的安全版 在HTTP下加入了SSL层
SSL( Secure Sockets Layer 安全套接层 ) 主要用于Web的安全传输协议 在传输层对网络连接进行加密 保障在Internet上数据传输的安全
HTTP 默认端口为80 HTTPS 默认端口为443
HTTP通信由两部分组成: 客户端请求消息与服务器响应消息
三.HTTP请求解析
HTTP请求消息由请求行 (request line) ,请求头 (header) ,空行和请求体4部分组成
请求行由请求方式 ,URL 和HTTP协议版本3个部分组成 他们之间使用空格隔开
请求头用来描述客户端的基本信息，从而把客户端相关的信息告知服务器
比如：
User-Agent用来说明当前是什么类型的浏览器
Content-Type 用来描述发送到服务器的数据格式
Accept用来描述客户端能够接收什么类型的返回内容
Accept-Language 用来描述客户端能够接收哪种类型语言的文本内容
下面是常见的请求头信息
请求体中存放的，是通过POST方式提交到服务器的数据
注意：只有POST请求才有请求体，GET请求没有请求体！
四.浏览器发送HTTP请求的过程
1.当用户在浏览器地址栏中输入一个URL并按回车键后 浏览器会向HTTP服务器发送HTTP请求 HTTP请求方式主要分为GET,POST两种方法
URL（Uniform / Universal Resource Locator的缩写）：统一资源定位符，是用于完整地描述Internet上网页和其他资源的地址的一种标识方法
2.当我们在浏览器输入URLhttp://localhost:8081/biwu_edu/index.html的时候，浏览器发送一个请求去获取http://localhost:8081/biwu_edu/index.html的html文件，服务器把文件通过网络传输给浏览器
3.浏览器解析服务端响应回来的HTML，发现其中引用了很多其他文件，比如图片，CSS文件，JS文件，浏览器会自动再次发送请求去获取图片，CSS文件，或者JS文件
请求的基本格式
scheme://host[:port#]/path/…/[?query-string]
- scheme：协议(例如：http, https, ftp)
- host：服务器的IP地址或者域名
- port#：服务器的端口（如果是走协议默认端口，缺省端口80）
- path：访问资源的路径
- query-string：参数，发送给http服务器的数据
GET和POST
GET请求携带的参数会跟在url后面，通过?连接起来 ?号的左边是url，右边是参数
POST请求的参数是在请求体里面的
- 通过浏览器地址栏提交url，这种方式是属于get请求
- 通过超链接的方式提交请求，也是属于get请求
- 除了form的method=post，其它的方式都是属于get请求
- GET是从服务器上获取数据，POST是向服务器传送数据
- GET请求参数显示，都显示在浏览器网址上，HTTP服务器根据该请求所包含URL中的参数来产生响应内容，即“Get”请求的参数是URL的一部分。 例如：
http://www.baidu.com/s?wd=Chinese - POST请求参数在请求体当中，消息长度没有限制而且以隐式的方式进行发送，通常用来向HTTP服务器提交量比较大的数据（比如请求中包含许多参数或者文件上传操作等），请求的参数包含在“Content-Type”消息头里，指明该消息体的媒体类型和编码，
注意：使用Get方式提交表单，因为有可能会导致安全问题 !!! 比如说在登陆表单中用Get方式，用户输入的用户名和密码将在地址栏中暴露无遗
五.请求头部分信息详解
1.Connection (链接类型)
- Connection：表示客户端与服务连接类型
- Client 发起一个包含
Connection:keep-alive的请求，HTTP/1.1使用keep-alive为默认值。 - Server收到请求后：
- 如果 Server 支持 keep-alive，回复一个包含 Connection:keep-alive 的响应，不关闭连接；
- 如果 Server 不支持 keep-alive，回复一个包含 Connection:close 的响应，关闭连接。
- 如果client收到包含
Connection:keep-alive的响应，向同一个连接发送下一个请求，直到一方主动关闭连接。 - keep-alive在很多情况下能够重用连接，减少资源消耗，缩短响应时间，比如当浏览器需要多个文件时(比如一个HTML文件和相关的图形文件)，不需要每次都去请求建立连接
2.User-Agent (用户代理)
User-Agent：客户端信息
3.Referer (页面跳转处)
- Referer：表明产生请求的网页来自于哪个URL，用户是从该 Referer页面访问到当前请求的页面。这个属性可以用来跟踪Web请求来自哪个页面，是从什么网站来的等。
- 有时候遇到下载某网站图片，需要对应的referer，否则无法下载图片，那是因为人家做了防盗链，原理就是根据referer去判断是否是本网站的地址，如果不是，则拒绝，如果是，就可以下载；
4.Cookie （Cookie）
- Cookie：浏览器用这个属性向服务器发送Cookie。Cookie是在浏览器中寄存的小型数据体，它可以记载和服务器相关的用户信息，也可以用来实现会话功能。
5.Content-Type (POST数据类型)
- Content-Type：POST请求里用来表示的内容类型。
- 举例：Content-Type = Text/XML; charset=gb2312：
- 指明该请求的消息体中包含的是纯文本的XML类型的数据，字符编码采用“gb2312”
六.HTTP响应解析
HTTP响应也由四个部分组成，分别是： 状态行、响应头信息、空行、响应正文
响应状态码
HTTP 响应状态码（HTTP Status Code），也属于 HTTP 协议的一部分，用来标识响应的状态
响应状态码会随着响应消息一起被发送至客户端浏览器，浏览器根据服务器返回的响应状态码，就能知道这次 HTTP 请求的结果是成功还是失败了
响应状态代码由三位数字组成（范围是100-599），第一个数字定义了响应的类别，后两个数字用来对状态码进行细分
HTTP 状态码共分为 5 种类型
100~199：表示服务器成功接收部分请求，要求客户端继续提交其余请求才能完成整个处理过程。
200~299：表示服务器成功接收请求并已完成整个处理过程。- 200：请求成功，对应的英文描述OK
- 201：已创建，请求成功并创建了新的资源，对应的英文描述Created
300~399：请求重定向- 301：请求的资源已被永久的移动到新的URI，返回信息会包括新的URI，浏览器会自动定向到新URI，后面新的请求都会使用新的URI代替。对应的英文描述Moved Permanently
- 302：所请求的页面已经临时转移至新的url，对应的英文描述Found
- 304：使用缓存资源服务端未修改，服务端返回此状态码时，不会返回任何资源（响应消息中不包含响应体），客户端会从本地缓存中打开资环，对应的英文描述Not Modified
400~499：客户端的请求有错误（前端需要关注的）- 400：请求语法格式错误当前请求无法被服务端理解，例如请求参数错误。对应的英文描述Bad Request
- 401：当前请求需要用户验证。对应的英文描述Unauthorized
- 403：服务器拒绝请求，权限不够，对应的英文描述Forbidden
- 404：请求资源不存在，对应的英文描述Not Found（最常见）
- 408：请求超时。服务器等待客户端发送的请求时间过长，超时。对应的英文描述Request Timeout
500~599：服务器端出现错误，常用500（请求未完成。服务器遇到不可预知的情况），与客户端无关，是属于服务端内部问题。（服务端端问题与前端没关系）