为什么前端要了解HTTP协议,当你和后端进行合作的时候,需要访问后端的数据接口,这时候和后端进行接口对接就有两个必要了解的要点:HTTP协议和AJAX技术。AJAX是一种技术,访问服务器数据的一种技术,HTTP协议:是一种规定约成,我们前端使用AJAX技术访问后端数据时时要采用HTTP协议去请求信息,所以HTTP和AJAX是由非常紧密的关系。 下面让我们来了解一下HTTP协议。
AJAX在上一期文章中:AJAX-基本了解和掌握(前端必掌握在后台与服务器交换数据)-CSDN博客
目录
八、 HTTP 请求头 HTTP Request Header
九、HTTP 响应头 HTTP Response Header
一、前端开发发展历程
1、 服务器端渲染
服务器端渲染(SSR,server side render): 早期的网页都是通过后端渲染来完成的
- 客户端发出请求
- 服务端接收请求并返回相应HTML文档
- 页面刷新,客户端加载新的HTML文档
缺点 :
- 当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数据发生了变化,而此时服务器却要将重绘的整个页面再返回给浏览器加载,这显然有悖于程序员的“DRY( Don‘t repeat yourself )”原则
- 而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档,这本身也会给网络带宽带来不必要的开销
2、前后端分离
前端只需要独立编写客户端代码,后端也只需要独立编写服务端代码提供数据接口, 前端通过AJAX请求来访问后端的数据接口,将Model展示到View中即可。
二、HTTP简介
HTTP协议:超文本传输协议(Hypertext Transfer Protocol,HTTP)
- 是一个简单的请求-响应协议
- 它通常运行在TCP之上
- 它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应
- 请求和响应消息的头以ASCII形式给出
- 而 消息内容则具有一个类似MIME的格式。
- 这个简单模型是早期Web成功的有功之臣,因为它使开发和部署非常地直截了当。
三、发展阶段
1、0.9
0.9协议是适用于各种数据信息的简洁快速协议,是一个交换信息的无序协议,仅仅限于文字。由于无法进行内容的协商,在双发的握手和协议中,并没有规定双发的内容是什么,也就是图片是无法显示和处理的。 只支持get请求。
2、1.0
支持POST、HEAD等请求方法,支持请求头、响应头等,支持更多种数据类型(不再局限于文本数据)但是浏览器的每次请求都需要与服务器建立一个TCP连接,请求处理完成后立即断开TCP连接,每次建立连接增加了性能损耗
3、1.1(目前使用最广泛的版本)
在1.0协议中,双方规定了连接方式和连接类型,这已经极大扩展了HTTP的领域, 增加了PUT、DELETE等请求方法,采用持久连接(Connection: keep-alive),多个请求可以共用同一个TCP连接
4、2.0
HTTP2.0的前身是HTTP1.0和HTTP1.1。虽然之前仅仅只有两个版本,但这两个版本所包含的协议规范之庞大,足以让任何一个有经验的工程师为之头疼。网络协议新版本并不会马上取代旧版本。实际上,1.0和1.1在之后很长的一段时间内一直并存,这是由于网络基础设施更新缓慢所决定的。
四、工作原理
HTTP是基于客户/服务器模式,且面向连接的。典型的HTTP事务处理有如下的过程:
(1)客户与服务器建立连接;
(2)客户向服务器提出请求;
(3)服务器接受请求,并根据请求返回相应的文件作为应答;
(4)客户与服务器关闭连接。
特性:
客户与服务器之间的HTTP连接是一种一次性连接。它限制每次连接只处理一个请求,当服务器返回本次请求的应答后便立即关闭连接,下次请求再重新建立连接。这种一次性连接主要考虑到WWW服务器面向的是Internet中成千上万个用户,且只能提供有限个连接,故服务器不会让一个连接处于等待状态,及时地释放连接可以大大提高服务器的执行效率。
HTTP是一种无状态协议,即服务器不保留与客户交易时的任何状态。这就大大减轻了服务器记忆负担,从而保持较快的响应速度。HTTP是一种面向对象的协议。允许传送任意类型的数据对象。它通过数据类型和长度来标识所传送的数据内容和大小,并允许对数据进行压缩传送。当用户在一个HTML文档中定义了一个超文本链后,浏览器将通过TCP/IP协议与指定的服务器建立连接。
HTTP支持持久连接,在HTTP / 0.9和1.0中,连接在单个请求/响应对之后关闭。在HTTP / 1.1中,引入了保持活动机制,其中连接可以重用于多个请求。这样的持久性连接可以明显减少请求延迟,因为在发送第一个请求之后,客户端不需要重新协商TCP 3-Way-Handshake连接。另一个积极的副作用是,通常,由于TCP的缓慢启动机制,连接随着时间的推移而变得更快。
五、运作方式
HTTP是基于请求/响应范式的。
一个客户机与服务器建立连接后,发送一个请求给服务器,请求方式的格式为,统一资源标识符、协议版本号,后边是MIME信息包括请求修饰符、客户机信息和可能的内容。服务器接到请求后,给予相应的响应信息,其格式为一个状态行包括信息的协议版本号、一个成功或错误的代码,后边是MIME信息包括服务器信息、实体信息和可能的内容。
其实简单说就是任何服务器除了包括HTML文件以外,还有一个HTTP驻留程序,用于响应用户请求。你的浏览器是HTTP客户,向服务器发送请求,当浏览器中输入了一个开始文件或点击了一个超级链接时,浏览器就向服务器发送了HTTP请求,此请求被送往由IP地址指定的URL。驻留程序接收到请求,在进行必要的操作后回送所要求的文件。在这一过程中,在网络上发送和接收的数据已经被分成一个或多个数据包(packet),每个数据包包括:要传送的数据;控制信息,即告诉网络怎样处理数据包。TCP/IP决定了每个数据包的格式。如果事先不告诉你,你可能不会知道信息被分成用于传输和再重新组合起来的许多小块。
许多HTTP通讯是由一个用户代理初始化的并且包括一个申请在源服务器上资源的请求。最简单的情况可能是在用户代理(UA)和源服务器(O)之间通过一个单独的连接来完成。
当一个或多个中介出现在请求/响应链中时,情况就变得复杂一些。中介有三种:代理(Proxy)、网关(Gateway)和通道(Tunnel)。一个代理根据URI的绝对格式来接受请求,重写全部或部分消息,通过URI的标识把已格式化过的请求发送到服务器。网关是一个接收代理,作为一些其它服务器的上层,并且如果必须的话,可以把请求翻译给下层的服务器协议。一个通道作为不改变消息的两个连接之间的中继点。当通讯需要通过一个中介(例如:防火墙等)或者是中介不能识别消息的内容时,通道经常被使用。
六、报文格式
HTTP报文由从客户机到服务器的请求和从服务器到客户机的响应构成。
请求报文格式如下:
请求行 - 通用信息头 - 请求头 - 实体头 - 报文主体
请求行以方法字段开始,后面分别是URL字段和HTTP协议版本字段,并以CRLF结尾。SP是分隔符。除了在最后的CRLF序列中CF和LF是必需的之外,其他都可以不要。有关通用信息头,请求头和实体头方面的具体内容可以参照相关文件。
应答报文格式如下:
状态行 - 通用信息头 - 响应头 - 实体头 - 报文主体
状态码元由3位数字组成,表示请求是否被理解或被满足。原因分析是对原文的状态码作简短的描述,状态码用来支持自动操作,而原因分析用来供用户使用。客户机无需用来检查或显示语法。有关通用信息头,响应头和实体头方面的具体内容可以参照相关文件。
七、HTTP的请求方式
HTTP规范定义了9种请求方法,每种请求方法规定了客户和服务器之间不同的信息交换方式,常用的请求方法是GET和POST。服务器将根据客户请求完成相应操作,并以应答块形式返回给客户,最后关闭连接。
- GET:GET 方法请求一个指定资源的表示形式,使用 GET 的请求应该只被用于获取数据。
- POST:POST 方法用于将实体提交到指定的资源
- HEAD:HEAD 方法请求一个与 GET 请求的响应相同的响应,但没有响应体,比如在准备下载一个文件前,先获取文件的大小,再决定是否进行下载
- PUT:PUT 方法用请求有效载荷(payload)替换目标资源的所有当前表示
- DELETE:DELETE 方法删除指定的资源
- PATCH:PATCH 方法用于对资源应部分修改
- CONNECT:CONNECT 方法建立一个到目标资源标识的服务器的隧道,通常用在代理服务器,网页开发很少用到
- TRACE:TRACE 方法沿着到目标资源的路径执行一个消息环回测试
- OPTIONS :返回服务器针对特殊资源所支持的 HTML 请求方式 或 允许客户端查看服务器的性能。
八、HTTP 请求头 HTTP Request Header
1、content - type : 是这次请求携带的数据的类型
- application/x-www-form-urlencoded :表示数据被编码成以 '&' 分隔的键 - 值对,同时以 '=' 分隔键和值
- application/json:表示是一个json类型
- text/plain:表示是文本类型
- application/xml:表示是xml类型
- multipart/form-data:表示是上传文件
2 、content-length:文件的大小长度
3 、keep-alive:
- http是基于TCP协议的,但是通常在进行一次请求和响应结束后会立刻中断
- 在http1.0中,如果想要继续保持连接
- 浏览器需要在请求头中添加 connection: keep-alive
- 服务器需要在响应头中添加 connection:keey-alive
- 当客户端再次放请求时,就会使用同一个连接,直接一方中断连接
- 在http1.1中,所有连接默认是 connection: keep-alive的
- 不同的Web服务器会有不同的保持 keep-alive的时间
- Node中默认是5s中
4 、accept-encoding:
- 告知服务器,客户端支持的文件压缩格式,比如js文件可以使用gzip编码,对应 .gz文件
- 主要用于请求文件 : 如果支持gzip压缩格式,则会请求该文件,浏览器会自动解压并解析
5 、accept:告知服务器,客户端可接受文件的格式类型 主要用于请求数据,例如 : 是否支持json、xml的数据类型,如果支持即可返回
6 、user-agent:客户端相关的信息
九、HTTP 响应头 HTTP Response Header
前端不常用
十、状态码响应码
Http状态码(Http Status Code)是用来表示Http响应状态的数字代码 :
消息 | 描述 |
---|---|
100 Continue | 服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。 |
101 Switching Protocols | 服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。 |
消息 | 描述 |
---|---|
200 OK | 请求成功(其后是对GET和POST请求的应答文档。) |
201 Created | 请求被创建完成,同时新的资源被创建。 |
202 Accepted | 供处理的请求已被接受,但是处理未完成。 |
203 Non-authoritative Information | 文档已经正常地返回,但一些应答头可能不正确,因为使用的是文档的拷贝。 |
204 No Content | 没有新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以确定用户文档足够新,这个状态代码是很有用的。 |
205 Reset Content | 没有新文档。但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容。 |
206 Partial Content | 客户发送了一个带有Range头的GET请求,服务器完成了它。 |
消息 | 描述 |
---|---|
300 Multiple Choices | 多重选择。链接列表。用户可以选择某链接到达目的地。最多允许五个地址。 |
301 Moved Permanently | 所请求的页面已经转移至新的url。 |
302 Found | 所请求的页面已经临时转移至新的url。 |
303 See Other | 所请求的页面可在别的url下被找到。 |
304 Not Modified | 未按预期修改文档。客户端有缓冲的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。 |
305 Use Proxy | 客户请求的文档应该通过Location头所指明的代理服务器提取。 |
306 Unused | 此代码被用于前一版本。目前已不再使用,但是代码依然被保留。 |
307 Temporary Redirect | 被请求的页面已经临时移至新的url。 |
消息 | 描述 |
---|---|
400 Bad Request | 服务器未能理解请求。 |
401 Unauthorized | 被请求的页面需要用户名和密码。 |
402 Payment Required | 此代码尚无法使用。 |
403 Forbidden | 对被请求页面的访问被禁止。 |
404 Not Found | 服务器无法找到被请求的页面。 |
405 Method Not Allowed | 请求中指定的方法不被允许。 |
406 Not Acceptable | 服务器生成的响应无法被客户端所接受。 |
407 Proxy Authentication Required | 用户必须首先使用代理服务器进行验证,这样请求才会被处理。 |
408 Request Timeout | 请求超出了服务器的等待时间。 |
409 Conflict | 由于冲突,请求无法被完成。 |
410 Gone | 被请求的页面不可用。 |
411 Length Required | "Content-Length"未被定义。如果无此内容,服务器不会接受请求。 |
412 Precondition Failed | 请求中的前提条件被服务器评估为失败。 |
413 Request Entity Too Large | 由于所请求的实体的太大,服务器不会接受请求。 |
414 Request-url Too Long | 由于url太长,服务器不会接受请求。当post请求被转换为带有很长的查询信息的get请求时,就会发生这种情况。 |
415 Unsupported Media Type | 由于媒介类型不被支持,服务器不会接受请求。 |
416 Requested Range Not Satisfiable | 服务器不能满足客户在请求中指定的Range头。 |
417 Expectation Failed | 执行失败。 |
423 | 锁定的错误。 |
消息 | 描述 |
---|---|
500 Internal Server Error | 请求未完成。服务器遇到不可预知的情况。 |
501 Not Implemented | 请求未完成。服务器不支持所请求的功能。 |
502 Bad Gateway | 请求未完成。服务器从上游服务器收到一个无效的响应。 |
503 Service Unavailable | 请求未完成。服务器临时过载或宕机。 |
504 Gateway Timeout | 网关超时。 |
505 HTTP Version Not Supported | 服务器不支持请求中指明的HTTP版本。 |