web开发基础http协议的通信过程与请求/响应报文(代码片段)

ZSYL ZSYL     2023-02-14     512

关键词:

查看HTTP协议的通信过程

学习目标

  • 能够使用谷歌浏览器的开发者工具查看HTTP协议的通信过程

1. 谷歌浏览器开发者工具的使用

首先需要安装Google Chrome浏览器,然后Windows和Linux平台按 F12 调出开发者工具, mac OS选择 视图 -> 开发者-> 开发者工具或者直接使用 alt+command+i 这个快捷键,还有一个多平台通用的操作就是在 网页右击选择检查

开发者工具的效果图:

开发者工具的标签选项说明:

  • 元素(Elements):用于查看或修改HTML标签
  • 控制台(Console):执行js代码
  • 源代码(Sources):查看静态资源文件,断点调试JS代码
  • 网络(Network):查看http协议的通信过程

开发者工具使用效果图:

开发者工具的使用说明:

  1. 点击Network标签选项
  2. 在浏览器的地址栏输入百度的网址,就能看到请求百度首页的http的通信过程
  3. 这里的每项记录都是请求+响应的一次过程

2. 查看HTTP协议的通信过程

查看http请求信息效果图:

查看http响应信息效果图:

3. 小结

  • 谷歌浏览器的开发者工具是查看http协议的通信过程利器,通过Network标签选项可以查看每一次的请求和响应的通信过程,调出开发者工具的通用方法是在网页右击选择检查。
  • 开发者工具的Headers选项总共有三部分组成:
    1. General: 主要信息
    2. Response Headers: 响应头
    3. Request Headers: 请求头
  • Response选项是查看响应体信息的

HTTP 请求报文

学习目标

  • 能够知道HTTP请求报文的结构

1. HTTP 请求报文介绍

HTTP 最常见的请求报文有两种:

  1. GET 方式的请求报文
  2. POST 方式的请求报文

说 明:

  • GET: 获取web服务器数据
  • POST: 向web服务器提交数据

2. HTTP GET 请求报文分析

HTTP GET 请求报文效果图:

GET 请求报文说明:

---- 请求行 ----
GET / HTTP/1.1  # GET请求方式 请求资源路径 HTTP协议版本
---- 请求头 -----
Host: www.itcast.cn  # 服务器的主机地址和端口号,默认是80
Connection: keep-alive # 和服务端保持长连接
Upgrade-Insecure-Requests: 1 # 让浏览器升级不安全请求,使用https请求
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36  # 用户代理,也就是客户端的名称
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8 # 可接受的数据类型
Accept-Encoding: gzip, deflate # 可接受的压缩格式
Accept-Language: zh-CN,zh;q=0.9 #可接受的语言
Cookie: pgv_pvi=1246921728; # 登录用户的身份标识

---- 空行 ----

GET 请求原始报文说明:

GET / HTTP/1.1\\r\\n
Host: www.itcast.cn\\r\\n  
Connection: keep-alive\\r\\n
Upgrade-Insecure-Requests: 1\\r\\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\\r\\n
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8\\r\\n
Accept-Encoding: gzip, deflate\\r\\n
Accept-Language: zh-CN,zh;q=0.9\\r\\n
Cookie: pgv_pvi=1246921728; \\r\\n
\\r\\n  (请求头信息后面还有一个单独的'\\r\\n'不能省略)

说 明:

  • 每项数据之间使用: \\r\\n

3. HTTP POST 请求报文分析

HTTP POST 请求报文效果图:

请求体效果图:

POST 请求报文说明:

---- 请求行 ----
POST /xmweb?host=mail.itcast.cn&_t=1542884567319 HTTP/1.1 # POST请求方式 请求资源路径 HTTP协议版本
---- 请求头 ----
Host: mail.itcast.cn # 服务器的主机地址和端口号,默认是80
Connection: keep-alive # 和服务端保持长连接
Content-Type: application/x-www-form-urlencoded  # 告诉服务端请求的数据类型
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36 # 客户端的名称
---- 空行 ----
---- 请求体 ----
username=hello&pass=hello # 请求参数

POST 请求原始报文说明:

POST /xmweb?host=mail.itcast.cn&_t=1542884567319 HTTP/1.1\\r\\n
Host: mail.itcast.cn\\r\\n
Connection: keep-alive\\r\\n
Content-Type: application/x-www-form-urlencoded\\r\\n
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.100 Safari/537.36\\r\\n
\\r\\n(请求头信息后面还有一个单独的'\\r\\n'不能省略)
username=hello&pass=hello

说明:

  • 每项数据之间使用: \\r\\n

4. 小结

  • 一个HTTP请求报文可以由 请求行、请求头、空行和请求体4个部分组成。
  • 请求行是由三部分组成:
    1. 请求方式
    2. 请求资源路径
    3. HTTP 协议版本
  • GET 方式的请求报文没有请求体,只有请求行、请求头、空行组成
  • POST 方式的请求报文可以有请求行、请求头、空行、请求体四部分组成,注意:POST方式可以允许没有请求体,但是这种格式很少见

GET 和POST请求对比效果图:

HTTP响应报文

学习目标

  • 能够知道HTTP响应报文的结构

1. HTTP响应报文分析

HTTP 响应报文效果图:


响应报文说明:

--- 响应行/状态行 ---
HTTP/1.1 200 OK # HTTP协议版本 状态码 状态描述
--- 响应头 ---
Server: Tengine # 服务器名称
Content-Type: text/html; charset=UTF-8 # 内容类型
Transfer-Encoding: chunked # 发送给客户端内容不确定内容长度,发送结束的标记是0\\r\\n, Content-Length表示服务端确定发送给客户端的内容大小,但是二者只能用其一。
Connection: keep-alive # 和客户端保持长连接
Date: Fri, 23 Nov 2018 02:01:05 GMT # 服务端的响应时间
--- 空行 ---
--- 响应体 ---
<!DOCTYPE html><html lang="en"> …</html> # 响应给客户端的数据

原始响应报文说明:

HTTP/1.1 200 OK\\r\\n
Server: Tengine\\r\\n
Content-Type: text/html; charset=UTF-8\\r\\n
Transfer-Encoding: chunked\\r\\n
Connection: keep-alive\\r\\n
Date: Fri, 23 Nov 2018 02:01:05 GMT\\r\\n
\\r\\n(响应头信息后面还有一个单独的'\\r\\n'不能省略)
<!DOCTYPE html><html lang="en"> …</html>

说明:

每项数据之间使用: \\r\\n

2. HTTP 状态码介绍

HTTP 状态码是 用于表示web服务器响应状态的3位数字代码

状态码说明
200请求成功
307重定向
400错误的请求,请求地址或者参数有误
404请求资源在服务器不存在
500服务器内部源代码出现错误

3. 小结

  • 一个HTTP响应报文是由 响应行、响应头、空行和响应体4个部分组成。

  • 响应行是由三部分组成: HTTP 协议版本 状态码 状态描述,最常见的状态码是200


加油!

感谢!

努力!

浅谈http请求与响应

 HTTP协议用于客户端和服务器之间的通信,请求访问的一段是客户端,提供资源响应的一段是服务器端。HTTP通信是采用请求应答的方式来进行的,客户端发出请求,服务器响应。如果没有客户端的请求,服务器端是不进行任... 查看详情

http通信与web框架

流程 客户端将请求打包成HTTP的请求报文(HTTP协议格式的请求数据)采用TCP传输发送给服务器端服务器接收到请求报文后按照HTTP协议进行解析服务器根据解析后获知的客户端请求进行逻辑执行服务器将执行后的结果封装成HTT... 查看详情

http请求报文和http响应报文

...网络与Web服务器建立连接,该连接是通过TCP来完成的,该协议与IP协议共同构建Internet,即著名的TCP/IP协议族,因此Internet又被称作是TCP/IP网络。HTTP 查看详情

http请求和http响应详细解析

...网络与Web服务器建立连接,该连接是通过TCP来完成的,该协议与IP协议共 查看详情

文加图,理解http请求与响应(代码片段)

...过网络与Web服务器建立连接,该连接是通过TCP来完成的,该协议与IP协议共同构建Internet,即 查看详情

http请求/响应包格式

一、什么是http协议?转载:http://blog.csdn.net/daijin888888/article/details/51025634      由w3c制订的一种网络应用层协议,定义了浏览器与web服务器之间通信的过程以及通信时所使用的数据格式。     ... 查看详情

浅谈http协议

...媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。 概述:HTTP协议是基于C/S架构进行通信的,而HTTP协议的服务器端实现程序有httpd、nginx等,其客户端的实现程序主要是Web浏览器,例如Firefox、InternetExplorer、Googlechr... 查看详情

http协议

...媒体信息系统的应用层协议。HTTP是万维网的数据通信的基础。   HTTP工作原理HTTP协议定义Web客户端如何从Web服务器请求Web页面,以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器... 查看详情

http协议基本原理

...步骤HTTP请求格式HTTP响应格式VERYUSEFUL!!!使用谷歌浏览器的开发者工具查看HTTP头哎呀,本文依旧使用markdown语法进行编写排版HTTPHTTP协议的概念http(超文本传输协议):是一个基于请求与响应模式的、无状态的、应用层的协议,常... 查看详情

一个完整的http请求响应过程

...sionControlProtocol/InternetProtocol),包含了一系列构成互联网基础的网络协议,是Internet的核心协议,通过20多年的发 查看详情

django框架导读(代码片段)

...(HyperTextTransportProtocol)是超文本传输协议#基于TCP/IP协议基础上的应用层协议,底层实现仍为socket#基于请求-响应模式:通信一定是从客户端开始,服务器端接收到客户端一定会做出对应响应#无状态:协议不对任何一次通信状态... 查看详情

web-socket

参考技术AWebSocket是HTML5的新协议,允许服务器端向客户端发送数据,是一种全双工、双向的通信方式,并且它可以保持长时间通信。长时间通信:类比HTTP协议是一次请求,一次响应,两次请求之间不存在任何关系,除非加入cooki... 查看详情

http的通信机制?

...传送协议(Hypertext Transfer Protocol ),是Web联网的基础,也是手机联网常用的协议之一,HTTP协议是建立在TCP协议之上的一种应用。HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应,在请求结束后,会... 查看详情

http中的请求头和响应头属性解析

HTTP中的请求头和响应头属性解析下面总结一下平时web开发中,HTTP请求的相关过程以及重要的参数意义一次完整的HTTP请求所经历的7个步骤说明:HTTP通信机制是在一次完整的HTTP通信过程中,web浏览器与web服务器之间将完成下列7... 查看详情

http请求报文和http响应报文(代码片段)

...网络与Web服务器建立连接,该连接是通过TCP来完成的,该协议与IP协议共同构建Internet,即著名的TCP/IP协议族,因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议,根据规则,只有低层协议建立之后才能,才能进... 查看详情

http请求与响应协议

HTTP(hypertexttransportprotocol),即超文本传输协议。这个协议详细规定了浏览器和万维网服务器之间互相通信的规则HTTP就是一个通信规则,通信规则规定了客户端发送给服务器的内容格式,也规定了服务器发送给客户端的内容格... 查看详情

http请求详解(代码片段)

使用http协议进行前后端通信web使用一种名为HTTP(HyperTextTransferProtocol),超文本传输协议作为规范,完成从客户端到服务端等一系列运作过程。web是建立在HTTP协议上通信的。 1.HTTP通信机制是在一次完整的HTTP通信过程中,Web... 查看详情

http协议http请求和响应

...,所有的HTTP通信都被构造成一对HTTP请求和HTTP响应,HTTP协议的请求与响应报文都是由“首部header”和“主体body”两部分组成的。其中主体部分是请求和响应的数据,首部部分则规定了请求和响应的内容格式。对于HTTP请求报文,... 查看详情