网络请求HTTP协议

文章目录

1.前后端分离优势

早期的网页都是通过后端渲染来完成的：服务器端渲染（SSR，server side render）：

客户端发出请求 -> 服务端接收请求并返回相应HTML文档 -> 页面刷新，客户端加载新的HTML文档；

服务器端渲染的缺点：

当用户点击页面中的某个按钮向服务器发送请求时，页面本质上只是一些数据发生了变化，而此时服务器却要将重绘的整个页面再返回给浏览器加载，这显然有悖于程序员的“DRY（ Don‘t repeat yourself ）”原则；
而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档，这本身也会给网络带宽带来不必要的开销。

有没有办法在页面数据变动时，只向服务器请求新的数据，并且在阻止页面刷新的情况下，动态的替换页面中展示的数据呢？

答案正是“AJAX”。

AJAX是“Asynchronous JavaScript And XML”的缩写(异步的JavaScript和XML)，是一种实现无页面刷新获取服务器数据的技术。

AJAX最吸引人的就是它的“异步”特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

你可以使用AJAX最主要的两个特性做下列事 :

在不重新加载页面的情况下发送请求给服务器；
接受并使用从服务器发来的数据。

这里有两幅图给大家理解一下:

服务器端渲染

前后端分离

2.HTTP协议的解析

2.1 HTTP的介绍

什么是HTTP呢？我们来看一下维基百科的解释：

超文本传输协议（英语：HyperText Transfer Protocol，缩写：HTTP）是一种用于分布式、协作式和超媒体信息系统的应用层协议；
HTTP是万维网的数据通信的基础，设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法；
通过HTTP或者HTTPS协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识；

HTTP是一个客户端（用户）和服务端（网站）之间请求和响应的标准。

通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80）；

我们称这个客户端为用户代理程序（user agent）；

响应的服务器上存储着一些资源，比如HTML文件和图像。

我们也称这个响应服务器为源服务器（origin server）；

我们网页中的资源通常是被放在Web资源服务器中，由浏览器自动发送HTTP请求来获取、解析、展示的。

目前我们页面中很多数据是动态展示的：

比如页面中的数据展示、搜索数据、表单验证等等，也是通过在JavaScript中发送HTTP请求获取的；

2.2 HTTP的组成

一次HTTP请求主要包括：请求（Request）和响应（Response）(如下图所示)

请求又包含请求行、请求头、请求体 (如下图所示)

响应也包含响应行、响应头、响应体 (如下图所示)

2.3 HTTP的版本

HTTP/0.9

发布于1991年；
只支持GET请求方法获取文本数据，当时主要是为了获取HTML页面内容；

HTTP/1.0

发布于1996年；
支持POST、HEAD等请求方法，支持请求头、响应头等，支持更多种数据类型(不再局限于文本数据) ；
但是浏览器的每次请求都需要与服务器建立一个TCP连接，请求处理完成后立即断开TCP连接，每次建立连接增加了性能损耗；

HTTP/1.1(目前使用最广泛的版本)

发布于1997年；
增加了PUT、DELETE等请求方法；
采用持久连接(Connection: keep-alive)，多个请求可以共用同一个TCP连接；

HTTP/2.0, 2015年

HTTP/3.0, 2018年

2.4 HTTP请求方式

在RFC中定义了一组请求方式，来表示要对给定资源执行的操作：

GET：GET 方法请求一个指定资源的表示形式，使用 GET 的请求应该只被用于获取数据。
HEAD：HEAD 方法请求一个与 GET 请求的响应相同的响应，但没有响应体。

比如在准备下载一个文件前，先获取文件的大小，再决定是否进行下载；
POST：POST 方法用于将实体提交到指定的资源。
PUT：PUT 方法用请求有效载荷（payload）替换目标资源的所有当前表示；
DELETE：DELETE 方法删除指定的资源；
PATCH：PATCH 方法用于对资源应部分修改；
CONNECT：CONNECT 方法建立一个到目标资源标识的服务器的隧道，通常用在代理服务器，网页开发很少用到。
TRACE：TRACE 方法沿着到目标资源的路径执行一个消息环回测试。

在开发中使用最多的是GET、POST请求；

在后续的后台管理项目中，我们也会使用PATCH、DELETE请求；

2.5 HTTP请求头字段

在request对象的header中也包含很多有用的信息，客户端会默认传递过来一些信息(如下) :

content-type: 这次请求携带的数据的类型

application/x-www-form-urlencoded：表示数据被编码成以 ‘&’ 分隔的键 – 值对，同时以 ‘=’ 分隔键和值
application/json：表示是一个json类型；
text/plain：表示是文本类型；
application/xml：表示是xml类型；
multipart/form-data：表示是上传文件；

content-length：文件的大小长度

keep-alive :

http是基于TCP协议的，但是通常在进行一次请求和响应结束后会立刻中断；
在http1.0中，如果想要继续保持连接：
- 浏览器需要在请求头中添加 connection: keep-alive；
- 服务器需要在响应头中添加 connection:keey-alive；
- 当客户端再次放请求时，就会使用同一个连接，直接一方中断连接；
在http1.1中，所有连接默认是 connection: keep-alive的；
- 不同的Web服务器会有不同的保持 keep-alive的时间；
- Node中默认是5s中；

accept-encoding：告知服务器，客户端支持的文件压缩格式，比如js文件可以使用gzip编码，对应 .gz文件；

accept：告知服务器，客户端可接受文件的格式类型；

user-agent：客户端相关的信息；

2.6 HTTP响应状态码

Http状态码（Http Status Code）是用来表示Http响应状态的数字代码：

Http状态码非常多，可以根据不同的情况，给客户端返回不同的状态码；

常见HTTP状态码	状态描述	信息说明
200	OK	客户端请求成功
201	Created	POST请求，创建新的资源
301	Moved Permanently	请求资源的URL已经修改，响应中会给出新的URL
400	Bad Request	客户端的错误，服务器无法或者不进行处理
401	Unauthorized	未授权的错误，必须携带请求的身份信息
403	Forbidden	客户端没有权限访问，被拒接
404	Not Found	服务器找不到请求的资源。
500	Internal Server Error	服务器遇到了不知道如何处理的情况。
503	Service Unavailable	服务器不可用，可能处理维护或者重载状态，暂时无法访问