网站导航
> 文章列表 > HTTP详解

HTTP详解

网友: 文章列表 2024-03-21 16:20:47

HTTP详解

一，什么是HTTP

HTTP(全称为“超文本传输协议”)'，是一种应用非常广泛的应用层协议，之前在《初识网络原理》的博客(初识网络原理_徐憨憨！的博客-CSDN博客)中，有详细讲解过TCP/IP五层模型，其中应用层描述了数据的传输，负责应用程序间的沟通。

HTTP作为一个应用层协议，同样需要通过封装和分用来进行交互，HTTP往往是基于传输层的TCP协议实现的，实现了浏览器和服务器之间的交互；例如当我们在浏览器中输入一个百度的网址（URL）时，浏览器就会给百度服务器发送一个HTTP请求，百度的服务器就会给浏览器返回一个HTTP响应：

HTTP详解

这个响应被浏览器解析之后，就展示成我们看到的页面内容，这个过程中，浏览器可能给服务器发送了多个请求，服务器对应的也会返回多个响应，这些响应里就包含了页面HTML，CSS，JavaScript，图片，文字等。

二，HTTP 的工作过程

1.工作过程

核心：浏览器给服务器发送请求，服务器响应浏览器的请求，HTTP就是浏览器和服务器之间交互的桥梁

HTTP详解

2.抓包

现在我们大致知道了HTTP通过发送请求，然后服务器响应请求这样的过程来进行交互的，同时当我们访问一个网站时，可能涉及不止一次的请求/响应的过程，那如何知道http协议交互的详细过程呢？此时就需要借助第三方工具（称为“抓包”工具：fiddler）来看到。

1.fiddler的下载和使用

  1. 进入fiddler下载的官网进行下载安装（https://www.telerik.com/fiddler/）

HTTP详解
HTTP详解

  1. 打开fiddler，安装https证书（因为大部分的hhtp协议都加密成了https）

HTTP详解

3.选取一个抓取的包查看请求和响应

HTTP详解

2.抓包工具的原理

Fidler相当于一个“代理”，当浏览器输入百度的网址进行访问时，就会先把请求发送给Fiddler，Fiddler再把请求转发给百度的服务器，当百度的服务器拿到数据返回时，Fiddler先拿到返回数据，再把数据交给浏览器，所以Fiddler可以清楚的知道浏览器和防服务器之间交互的数据细节。

三，HTTP协议格式

1.HTTP请求：

HTTP详解

首行：【方法】+【URL】+【版本】；

Header：请求的属性，冒号分割的键值对；每组属性之间使用\\n分隔；遇到空行表示Header部分结束；

Body：空行后面的内容是Body，Body允许空字符串，如果Body存在，则在Header中会有一个Content-Length属性来表示Body的长度。

2.HTTP响应：

HTTP详解

首行：【版本号】+【状态码】+【状态码解释】；

Header：请求的属性，冒号分割的键值对；每组属性之间使用\\n分隔；遇到空行表示Header部分结束；

Body：空行后面的内容是Body，Body允许空字符串，如果Body存在，则在Header中会有一个Content-Length属性来表示Body的长度，如果服务器返回了一个HTML页面，那么HTML页面内容就是在Body中。

3.格式图片总结

HTTP详解

思考：为什么HTTP报文中要存在“空行”？

因为HTTP协议并没有规定报头部分的键值对有多少个，空行就相当于是“报头的结束标记”，或者是“报头和正文之间的分隔符”，HTTP在传输层依赖TCP协议，TCP是面向字节流的，如果没有这个空行，就会出现“粘包问题”。

四，HTTP请求

1.URL基本格式

URL(统一资源定位符)就是平时俗称的“网址”，互联网上的每一个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

HTTP详解

假设一个网址如下：

https://v.bitedu.vip/personInf/student?userId=10000&classId=100

https：协议方案名；常见的有http和https，也有其他的类型（例如访问mysql时用的jdbc:mysql）；

user:pass：登录信息；现在的网站进行身份认证一般不再通过URL进行了，一般都会省略；

v.bitedu.vip：服务器地址；此处是一个“域名”，域名会通过DNS系统解析成一个具体的IP地址；

端口号：上面的URL中端口号被省略了，当端口号省略的时候，浏览器会根据协议类型自动决定使用哪个端口；例如http协议默认使用80端口，https协议默认使用443端口；

/personInf/student：带层次的文件路径；

userId=10000&classId=100：查询字符串（query string）；本质是一个键值对，键值对之间使用&分隔，键和值之间使用=分隔；

片段标识：此URL中省略了片段标识，片段标识主要用于页面跳转。

注意：

  1. query string中的内容是键值对结构，其中key和value的取值和个数，完全都是程序员自己约定的，可以通过这样的方式来自定制传输信息给服务器

  1. URL中可以省略的部分：

协议名：可以省略，省略后默认为http://

ip地址/域名：在HTML中可以省略（比如img，link，script等），省略后表示服务器的ip/域名与

当前HTML所属的ip/域名一致

端口号：可以省略；省略后如果是http协议默认使用80端口，https协议默认使用443端口；

带层次的路径：可以省略；省略后相当于/，有些服务器会在发现/路径的时候自动访问/index.html；

查询字符串：可以省略；

片段标识：可以省略。

2.方法

HTTP详解

GET方法

get方法是最常用的http方法，常用于获取服务器上的某个资源

触发GET请求的方法：

  1. 在浏览器中直接输入URL，此时浏览器就会发送出一个GET请求；

  1. HTML中的link，img，script等标签，也会触发GET请求；

  1. JavaScript中的ajax也能构造GET方法。

GET请求的特点：

  1. 首行的第一部分为GET；

  1. URL的query string可以为空，也可以不为空；

  1. hearder部分有若干个键值对结构；

  1. body部分为空。

POST方法

POST方法也是一种常见的方法，多用于用户提交用户数据给服务器（例如登录页面）

触发POST请求的方法：

  1. HTML的form标签可以构造POST请求；

  1. JavaScript中的ajax也可以构造POST请求。

POST请求的特点：

  1. 首行的第一部分为POST；

  1. URL的query string一般为空（也可以不为空）；

  1. hearder部分有若干个键值对结构；

  1. body部分一般不为空，body内的数据格式通过header中的Content-type指定，body的长度由header中的Content-Length指定。

面试题：GET和POST的区别

核心：本质没有什么区别，只是使用习惯上的区别

  • 语义不同：GET一般用于获取数据，POST一般用于提交数据；

  • GET的body一般为空，需要传递的数据通过query string传递，POST的query string一般为空，需要传递的数据通过body传递；

  • GET请求一般是幂等的，POST请求一般是不幂等的（如果多次请求得到的结果一样，就视为幂等）；

  • GET可以被缓存，POST不能被缓存。

3.请求报头（Header）

header的整体格式是键值对结构，每个键值对占一行，键和值之间使用分号分割

  • HOST：表示服务器主机的地址和端口

  • Content-Length：表示body中的数据长度

  • Content-type：表示请求中的数据格式

  • User-Agent（UA）：表示浏览器/操作系统的属性

  • Referer：表示这个页面是从哪个页面跳转过来的

  • Cookie：Cookie 中存储了一个字符串，这个数据可能是客户端(网页)自行通过 JS 写入的, 也可能来自于服务器(服务器在 HTTP 响应的 header 中通过 Set-Cookie 字段给浏览器返回数据)；往往可以通过这个字段实现 "身份标识" 的功能；每个不同域名下都可以有不同的Cookie，不同网站之间的Cookie并不冲突

五，HTTP响应

1.状态码

状态码表示访问一个页面的结果（是访问成功，还是失败，还是一些其他的情况......）

常见状态码：

  • 200 OK：表示访问成功

  • 404 Not Found：表示没有找到资源

  • 403 Forbidden：表示访问被拒绝，有的页面通常需要用户具有一定 的权限才能访问

  • 500 Internal Server Error：表示服务器内部出现错误

  • 504 Gateway Timeout：表示当前服务器负载比较大，服务器处理单条请求的时候消耗的时间就会很长，就可能导致出现超时的情况

  • 302 Move temporarily：临时重定向

  • 301 Moved Peramnently：永久重定向

HTTP详解

2.响应报头

响应报头的基本格式和请求报头的格式基本一致

六，构造HTTP请求

  1. 利用form表单构造请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--  --><form action="http://www.sougou.com" method="get"><input type="text" name="studentName"><!-- input type=submit 构造了一个特殊的 提交 按钮 value属性描述了按钮中的文本 --><!-- 点击这个按钮就会触发该 form 表单的"提交操作" 也就是构造http请求发送给服务器 --><input type="submit" value="提交"></form>
</body>
</html>
HTTP详解

  1. 利用ajax构造请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 引入 jquery --><script src="https://lib.baomitu.com/jquery/3.6.3/jquery.min.js"></script><script>$.ajax({type: 'get',url: 'https://www.sougou.com?studentName=zhangsan',//此处success就声明了一个回调函数，就会在服务器响应返回到浏览器的时候触发该回调//正是此处的回调体现了 "异步"success: function(data) {//data是响应的正文部分console.log("当服务器返回的响应到大浏览器之后，触发该回调");}});console.log("浏览器立即往下执行后续代码");</script>
</body>
</html>
HTTP详解
网络标签：

相关问题