http协议与响应请求原理

文章目录

  • 一、基本概念
    • 1. 客户端与服务器
    • 2. URL地址
    • 3. 分析网页的打开过程
  • 二、HTTP协议简介
    • 1. 通信
    • 2. 通信协议
    • 3. HTTP
      • ① 简介
      • ② HTTP协议的交互模型
      • ③ 基于浏览器的开发者工具分析通信过程
  • 三、HTTP请求
    • 1. HTTP请求消息的组成部分
      • ① 请求行
      • ② 请求头部
      • ③ 空行
      • ④ 请求体
    • 2. 客户端如何发送HTTP请求
      • ①默认事件
      • ②Ajax发送请求
  • 四、HTTP响应
    • 1. HTTP响应消息
    • 2. HTTP响应消息的组成部分
      • ① 状态行
      • ② 响应头部
      • ③ 空行
      • ④ 响应体
    • 3. 服务端如何响应HTTP请求
  • 五、HTTP请求方法
  • 六、HTTP请求参数
    • 1. 查询字符串
    • 2. URL编码与解码
  • 七、HTTP content-type
  • 八、HTTP响应状态代码
    • 1. ==2** 成功相关==的响应状态码
    • 2. ==3** 重定向相关==的响应状态码
    • 3. ==4** 客户端错误相关==的响应状态码
    • 4. ==5** 服务端错误相关==的响应状态码
  • 九、HTTP Cookie


一、基本概念

1. 客户端与服务器

网站应用程序主要分为两大部分:客户端和服务器端。
客户端:在浏览器中运行的部分,就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。
服务器端:在服务器中运行的部分,负责存储数据和处理应用逻辑。
http协议与响应请求原理_第1张图片



2. URL地址

统一资源定位符,又叫URL(Uniform Resource Locator),是专为标识Internet网上资源位置而设的一种编址方式,我们平时所说的网页地址指的即是URL。

URL地址一般由三部组成:

  • 客户端与服务器之间的通信协议
  • 存有该资源的服务器IP或域名
  • 资源在服务器上具体的存放位置
https://top.baidu.com/board?platform=pc&sa=pcindex_entry
通信协议://服务器IP或域名:端口/资源所在位置标识
  • 通信协议:http超文本传输协议,提供了一种发布和接收HTML页面的方法。
  • IP地址: IP是Internet Protocol Address的简写,代表互联网协议地址,互联网中设备的唯一标识。
  • 域名:由于IP地址难于记忆,所以产生了域名的概念,所谓域名就是平时上网所使用的网址。虽然在地址栏中输入的是网址, 但是最终还是会将域名转换为ip才能访问到指定的网站服务器。http://www.baidu.com => http://183.232.231.172/
  • 端口:端口是计算机与外界通讯交流的出口,用来区分服务器电脑中提供的不同的服务。


3. 分析网页的打开过程

http协议与响应请求原理_第2张图片
客户端与服务器之间的通信过程,网页中的每一个资源,都是通过 请求 – 处理 – 响应 的方式从服务器获取回来的。



二、HTTP协议简介

1. 通信

通信,就是 信息的传递和交换
通信三要素:

  • 通信的 主体
  • 通信的 内容
  • 通信的 方式

互联网中的通信
比如:服务器 把 图片资源 通过 响应 的方式发送给 客户端浏览器
其中,
通信的主体是服务器和客户端浏览器;
通信的内容是图片资源;
通信的方式是响应;



2. 通信协议

通信协议(Communication Protocol)是指通信的双方完成通信所 必须遵守的规则和约定
通俗的理解:通信双方 采用约定好的格式 来发送和接收消息,这种 事先约定好的通信格式,就叫做通信协议

互联网中的通信协议
客户端与服务器之间要实现网页内容的传输,则通信的双方必须遵守 网页内容的传输协议
网页内容又叫做 超文本,因此网页内容的传输协议又叫做 超文本传输协议



3. HTTP

① 简介

HTTP 协议 即超文本传送协议 (HyperText Transfer Protocol) ,它规定了客户端与服务器之间进行网页内容传输时,
所必须遵守的传输格式。
例如:
⚫客户端 要以HTTP协议要求的格式把数据提交到服务器
⚫服务器 要以HTTP协议要求的格式把内容响应给客户端


② HTTP协议的交互模型

HTTP 协议采用了 请求/响应 的交互模型
http协议与响应请求原理_第3张图片


③ 基于浏览器的开发者工具分析通信过程

  1. 打开 Chrome 浏览器
  2. Ctrl+Shift+I 打开 Chrome 的开发者工具
  3. 切换到 Network 面板
  4. 选中 Doc 页签
  5. 刷新页面,分析客户端与服务器的通信过程

下图表示网页的每个资源的请求过程
http协议与响应请求原理_第4张图片
点击其中一个资源可查看具体的请求过程
http协议与响应请求原理_第5张图片
每个请求都有一个返回结果
http协议与响应请求原理_第6张图片




三、HTTP请求

由于 HTTP 协议属于客户端浏览器和服务器之间的通信协议。因此,客户端发起的请求叫做 HTTP 请求,客户
端发送到服务器的消息,叫做 HTTP 请求消息(又称HTTP请求报文)

1. HTTP请求消息的组成部分

HTTP 请求消息(Request Headers) 由

  • 请求行(request line)
  • 请求头部( header )
  • 空行
  • 请求体

这 4 个部分组成。
http协议与响应请求原理_第7张图片

① 请求行

请求行由

  • 请求方式
  • URL
  • HTTP 协议版本

3 个部分组成,他们之间使用空格隔开。
在这里插入图片描述
http协议与响应请求原理_第8张图片

② 请求头部

请求头部 用来 描述客户端的基本信息,从而 把客户端相关的信息告知服务器
请求头部由多行 键/值对 (字段)组成,每行的键和值之间用英文的冒号分隔。
http协议与响应请求原理_第9张图片

  • 请求头部 – 常见的请求头字段
    头部字段 说明
    Host 要请求的服务器域名
    Connection 客户端与服务器的连接方式(close 或 keepalive)
    Content-Length 用来描述请求体的大小
    Accept 客户端可识别的响应内容类型列表
    User-Agent 产生请求的浏览器类型
    Content-Type 客户端告诉服务器实际发送的数据类型
    Accept-Encoding 客户端可接收的内容压缩编码形式
    Accept-Language 用户期望获得的自然语言的优先顺序

http协议与响应请求原理_第10张图片
关于更多请求头字段的描述,可以查看 MDN 官方文档…

③ 空行

最后一个请求头字段的后面是一个空行,通知服务器 请求头部至此结束
请求消息中的空行,用来 分隔请求头部与请求体

http协议与响应请求原理_第11张图片

④ 请求体

请求体中存放的,是要通过 POST 方式 提交到服务器的数据。
http协议与响应请求原理_第12张图片
注意:只有 POST 请求才有请求体,GET 请求没有请求体!



2. 客户端如何发送HTTP请求

①默认事件

GET方式 POST方式
浏览器地址栏 Form表单提交
link标签的href属性
script标签的src属性
img标签的src属性
Form表单提交
a标签的href属性

http协议与响应请求原理_第13张图片

②Ajax发送请求




四、HTTP响应

1. HTTP响应消息

响应消息就是 服务器响应给客户端的消息内容,也叫作响应报文

2. HTTP响应消息的组成部分

HTTP响应消息由

  • 状态行
  • 响应头部
  • 空行
  • 响应体

4 个部分组成,如下图所示:
http协议与响应请求原理_第14张图片

① 状态行

状态行由

  • HTTP 协议版本
  • 状态码
  • 状态码的描述文本

3 个部分组成,他们之间使用空格隔开;
在这里插入图片描述
http协议与响应请求原理_第15张图片

② 响应头部

响应头部 用来 描述服务器的基本信息。响应头部由多行 键/值对(字段) 组成,每行的键和值之间用英文的冒号分隔。
http协议与响应请求原理_第16张图片
响应头部常见字段,如下图

http协议与响应请求原理_第17张图片
关于更多响应头字段的描述,可以查看 MDN 官方文档…
HTTP 响应头信息 | 菜鸟教程 (runoob.com)

③ 空行

在最后一个响应头部字段结束之后,会紧跟一个空行,用来通知客户端响应头部至此结束
响应消息中的空行,用来 分隔响应头部与响应体
在这里插入图片描述

http协议与响应请求原理_第18张图片

④ 响应体

响应体中存放的,是服务器响应给客户端的资源内容
http协议与响应请求原理_第19张图片
在这里插入图片描述
服务器端可以给客户端响应多种格式的资源,比如文本、图片、音频、视频等等…
注意:在响应资源之前需要通过设置响应头中的响应头部里的Content-Type字段,来告诉客服端当前响应资源的格式,便于客户端解析



3. 服务端如何响应HTTP请求

不同的框架搭建的服务端会有各自相应的api来处理,比如nodejs搭建的服务端会有nodejs自己的那一套。




五、HTTP请求方法

HTTP 请求方法,属于 HTTP 协议中的一部分,请求方法的作用是:用来表明要对服务器上的资源执行的操作。最常用的请求方法是 GETPOST

序号 方法 描述
1 GET (查询)发送请求来获得服务器上的资源,请求体中不会包含请求数据,请求数据放在协议头中。
2 POST (新增)向服务器提交资源(例如提交表单或上传文件)。数据被包含在请求体中提交给服务器。
3 PUT (修改)向服务器提交资源,并使用提交的新资源,替换掉服务器对应的旧资源。
4 DELETE (删除)请求服务器删除指定的资源。
5 HEAD HEAD 方法请求一个与 GET 请求的响应相同的响应,但没有响应体。
6 OPTIONS 获取http服务器支持的http请求方法,允许客户端查看服务器的性能,比如ajax跨域时的预检等。
7 CONNECT 建立一个到由目标资源标识的服务器的隧道。
8 TRACE 沿着到目标资源的路径执行一个消息环回测试,主要用于测试或诊断。
9 PATCH 是对 PUT 方法的补充,用来对已知资源进行局部更新 。



六、HTTP请求参数

请求参数存储在请求头中的 (POST请求)请求体 或 URL(GET请求)中。

1. 查询字符串

定义:查询字符串(URL 参数)是指在 URL 的末尾加上用于向服务器发送信息的字符串(变量)。

格式:将英文的 ? 放在URL 的末尾,然后再加上 参数=值 ,想加上多个参数的话,使用 & 符号进行分隔。以这个形式,可以将想要发送给服务器的数据添加到 URL 中。

// 不带参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks
// 带两个参数的 URL 地址
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记

GET请求参数 就是 查询字符串



2. URL编码与解码

URL 地址中,只允许出现英文相关的字母、标点符号、数字,因此,在 URL 地址中不允许出现中文字符。

如果 URL 中需要包含中文这样的字符,则必须对中文字符进行编码(转义)。

URL编码的原则:使用安全的字符(没有特殊用途或者特殊意义的可打印字符)去表示那些不安全的字符。

URL编码原则的通俗理解:使用英文字符去表示非英文字符。

http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=西游记
// 经过 URL 编码之后,URL地址变成了如下格式:
http://www.liulongbin.top:3006/api/getbooks?id=1&bookname=%E8%A5%BF%E6%B8%B8%E8%AE%B0

浏览器提供了 URL 编码与解码的 API,分别是:

  • encodeURI() 编码的函数
  • decodeURI() 解码的函数
var str = encodeURI('测试字符');
// 输出字符串%E6%B5%8B%E8%AF%95%E5%AD%97%E7%AC%A6
console.log(str);
var newStr = decodeURI(str)
// 输出字符串 '测试字符'
console.log(newStr);

由于浏览器会自动对 URL 地址进行编码操作,因此,大多数情况下,开发者不需要关心 URL 地址的编码与解码操作。

为什么要进行URL编码_Dong-CSDN博客





七、HTTP content-type

在这里插入图片描述
GET请求中,通常会以 查询字符串 (Content-Type: application/x-www-form-urlencoded)的形式传递 请求参数, 比如:name=zhangsan&age=20&sex=男

GET请求中,通常会以 json (Content-Type: application/json)的形式传递 请求参数, 比如:{name: 'zhangsan', age: '20', sex: '男'},参数值传递的时候需要通过JSON.stringify()把json对象转换为 字符串格式

注意❕:

  • get 请求是不能提交 json 对象数据格式的,传统网站的表单提交也是不支持 json 对象数据格式的
  • 在 http 请求与响应的过程中,请求参数和响应内容无论是什么格式,最终都会被转换为对象字符串进行传输。

HTTP content-type | 菜鸟教程 (runoob.com)
Content-Type - HTTP | MDN (mozilla.org)





八、HTTP响应状态代码

HTTP 响应状态码(HTTP Status Code),也属于 HTTP 协议的一部分,用来标识响应的状态
响应状态码会随着响应消息一起被发送至客户端浏览器,浏览器根据服务器返回的响应状态码,就能知道这次HTTP 请求的结果是成功还是失败了。

http协议与响应请求原理_第20张图片
HTTP 状态码由 三个十进制数字 组成,第一个十进制数字定义了 状态码的类型,后两个数字用来对状态码进行细分。

根据第一个十进制数字, HTTP 状态码共分为 5 种类型:

分类 分类描述
1** 信息,服务器收到请求,需要请求者继续执行操作(实际开发中很少遇到 1** 类型的状态码)
2** 成功,操作被成功接收并处理
3** 重定向,需要进一步的操作以完成请求
4** 客户端错误,请求包含语法错误或无法完成请求
5** 服务器错误,服务器在处理请求的过程中发生了错误

完整的 HTTP 响应状态码,可以参考 MDN 官方文档…


1. 2** 成功相关的响应状态码

2** 范围的状态码,表示服务器已成功接收到请求并进行处理。常见的 2** 类型的状态码如下:

状态码 状态码英文名称 中文描述
200 OK 请求成功。一般用于 GET 与 POST 请求
201 Created 已创建。成功请求并创建了新的资源,通常用于 POST 或 PUT 请求

2. 3** 重定向相关的响应状态码

3** 范围的状态码,表示表示服务器要求客户端重定向,需要客户端进一步的操作以完成资源的请求。常见的 3** 类型的状态码如下:

状态码 状态码英文名称 中文描述
301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI,返回信息会包括新的URI,浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替
302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
304 Not Modified 未修改。所请求的资源未修改,服务器返回此状态码时,不会返回任何资源(响应消息中不包含响应体)。客户端通常会缓存访问过的资源。

3. 4** 客户端错误相关的响应状态码

4** 范围的状态码,表示客户端的请求有非法内容,从而导致这次请求失败。常见的 4** 类型的状态码如下:

状态码 状态码英文名称 中文描述
400 Bad Request 1、语义有误,当前请求无法被服务器理解。除非进行修改,否则客户端不应该重复提交这个请求。
2、请求参数有误。
401 Unauthorized 当前请求需要用户验证。
403 Forbidden 服务器已经理解请求,但是拒绝执行它。
404 Not Found 服务器无法根据客户端的请求找到资源(网页)。
408 Request Timeout 请求超时。服务器等待客户端发送的请求时间过长,超时。

4. 5** 服务端错误相关的响应状态码

5** 范围的状态码,表示服务器未能正常处理客户端的请求而出现意外错误。常见的 5** 类型的状态码如下:

状态码 状态码英文名称 中文描述
500 Internal Server Error 服务器内部错误,无法完成请求。
501 Not Implemented 服务器不支持该请求方法,无法完成请求。只有 GET 和 HEAD 请求方法是要求每个服务器必须支持的,其它请求方法在不支持的服务器上会返回501
503 Service Unavailable 由于超载或系统维护,服务器暂时的无法处理客户端的请求。



九、HTTP Cookie

HTTP cookies - HTTP | MDN (mozilla.org)

cookie:浏览器在电脑硬盘中开辟的一块空间,主要供服务器端存储数据。

  • cookie中的数据是以域名的形式进行区分的。
  • cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除,如果不设置过期时间,那么关闭当前页面时cookie就会被删除
  • cookie中的数据会随着请求被自动发送到服务器端。

http协议与响应请求原理_第21张图片

session:实际上就是一个对象,存储在服务器端的内存中,在session对象中也可以存储多条数据,每一条数据都有一个sessionid做为唯一标识。
注意:当网站服务器重启的时候session会失效
http协议与响应请求原理_第22张图片

你可能感兴趣的