HTTP协议及模块

推荐网友总结笔记：阮一峰老师互联网协议

https://blog.csdn.net/weixin_44121529/article/details/124039484

HTTP协议介绍

概念

• HTTP(HyperTextTransferProtocol)：超文本传输协议。

• HTTP协议是基于TCP/IP协议的。

• 这个协议详细规定了浏览器和服务器之间互相通信的规则。
• 协议主要规定了两个方面的内容：
  • 客户端：请求报文，用来向服务器发送数据
  • 服务端：响应报文，用来向客户端返回数据

注意：JavaScript/CSS/图片资源会自动发起请求

报文：粗略理解 就是一堆字符串

电脑可以安装fiddler软件，查看HTTP请求报文和响应报文。

请求报文

请求报文的组成：请求行 请求头 空行 请求体

请求行

请求行的组成：请求方法、 URL统一资源定位器、HTTP协议版本号

• 请求方法：get post put delete

  

• URL 统一资源定义为（就是输入在浏览器地址栏的内容） 用来定义服务器上的资源

  

  • 协议
  • 主机名 ： 用来定位唯一服务器主机
  • 端口号： 端口号为80可以省略不写：
  • 请求资源路径： 路径以/符号开头，路径用来定位服务器上的某个资源
  • 查询字符串（请求参数）：查询字符串用来传递数据，其他额外的要求。

  url举例：http://www.baidu.com:80/index.html?a=100&b=200#logo

  其中，#logo是锚点链接，定位到当前页面的某个资源

• HTTP协议版本号

请求头

HTTP请求头的数据格式：键值对

常见的请求头有：

请求体

请求体的内容的格式非常灵活。

• get请求的请求体：一般为空

• post请求的请求体：可以是字符串、JSON等

  例如：

  • 字符串：keywords=手机&price=2000
  • JSON：{“keywords”:”手机”,”price”:2000}

响应报文

响应报文的组成：响应行 响应头 空行 响应体

响应行

• HTTP协议版本号
• 响应状态码
• 响应状态描述

响应状态码和响应字符串关系是一一对应的。

响应头

数据格式：键值对

常见的响应头

• Cache-Control:缓存控制 private 私有的，只允许客户端缓存数据
• Connection:链接设置
• Content-Type:text/html;charset=utf-8 设置响应体的数据类型以及字符集,响应体为html，字符集utf-8
• Content-Length:响应体的长度，单位为字节

响应体

响应体内容的类型是非常灵活的，常见的类型有 HTML、CSS、JS、图片、JSON、视频等

IP协议

• 每一个接入互联网的设备都会有一个IP地址。

• IP也称为IP地址，是一串数字，本身就是一个数字表示。。IPv4是32位，IPv6是64位。

• IP按比特显示非常不方便，所以每8位比特一组，转换为10进制数字，再把10进制数字合成在一起，每组之间用.隔开。

• IP的作用：标识网络中的设备，实现设备间的通信。

IP分类

32位提供的ip数量约43亿。

2022年，联合国宣布世界人口达到80亿。

ip不够用，怎么办？

共享ip

公网ip:

局域网ip、私网ip:

本地回环IP：127.0.0.1

端口

一台现代计算机有$2^{16}=65536$个端口（范围0-65535）

一个应用程序可以实现一个或多个端口

端口是应用程序的数字标识。

端口的作用：可以实现不同主机应用程序之间的通信。（相同主机不同应用程序也可以把？）

HTTP服务

注意点

停止服务：在node.js的启动服务的命令行按住ctrl+c

代码更新问题：如果代码更新了必须要重新启动服务，才会返回新的内容

中文乱码问题：响应体中有中文会乱码，设置响应头返回的字符集

response.setHeader("content-type","text/html;charset=utf-8")

端口被占用：

Error:listen EADDRINUSER:address already in use:::9000

​ 关闭当前正在运行监听端口的服务（使用较多）

• 如果就想用某个端口怎么办？而且不知道是被哪个程序占用的？

  资源监视器找到指定端口的程序，记住PID。

  再去资源管理器中根据PID关闭这个程序。

​ 修改其他端口号

默认端口：

• HTTP默认端口是80，如果访问80端口，那么可以不写端口直接写IP地址即可。（方便用户向服务器发送请求）

• HTTPS协议的默认端口是443。

• HTTP服务开发常用端口有3000、8080、8090、9000等，

favicon.ico请求是谷歌的默认行为，会访问获得网页的图标，（网页标签栏的左边的小图标）。

借助浏览器的network 就可以查看请求报文和响应报文的内容。

响应头

多个重名的响应头属性，属性值用数组的方式复制

响应体：write和end都是设置响应体。

一般用write设置了响应体，就不用end设置响应体的内容了end()内为空即可。

write可以写多次，但是end方法只能写一次并且必须写一次、

有且只能有一个end方法（类似于return函数）

创建HTTP服务

浏览器查看HTTP报文

获取HTTP请求报文

设置HTTP响应报文

网页资源的基本加载过程

网络资源的加载是循序渐进的

• 浏览器获得服务器响应的HTML，
• 解析HTML、按顺序发送HTML中对其他资源的请求，如CSS、JavaScript、图片等。

网页在加载的过程中，向浏览器发送了几次请求？

• 发送了不止一次请求，当HTML文件中含有其他资源，就需要再发送请求。

静态资源服务

• 静态资源

  内容长时间不发生改变的资源（针对生产环境，不是开发环境），例如图片、视频、CSS文件、JS文件、HTML文件，字体文件等。

• 动态资源

  内容经常更新的资源，如百度首页，网易首页，京东搜索列表页面等。因为这些首页有推荐内容，这些推荐内容需要经常改变。

不要和静态网页和动态网页的概念搞混。

网站根目录或静态资源目录

HTTP服务在哪个文件夹中寻找静态资源，那个文件夹就是静态资源目录，也称之为网站根目录。

简单理解

即 端口号后的/ 第一个文件 在哪个目录下，哪个就是静态资源目录，也是网站根目录。

用户在地址栏输入url:协议+主机名+端口/请求的资源路径，把协议+主机名+端口 换成静态资源目录即可，也就是静态资源目录/请求的资源路径

网页中的URL

网页中的URL分为两大类：相对路径与绝对路径

绝对路径

绝对路径可靠性强，在项目中运用的多。

但是这些大多绝对路径都是通过拼接得到的，而不是直接写死的

相对路径

相对路径在发送请求时，需要与当前页面的URL路径进行计算，得到完整的URL后，再发送请求,学习阶段用的较多。

如果当前网页的URL为http://www.atguigu.com/course/h5.html

HTML文件中的相对路径，和当前HTML文件所在的路径有关。

小结

• 绝对路径：和当前html文件的路径无关，拼接完整的url不需要使用当前路径，只需要使用url协议、主机、端口。
• 相对路径：和当前html文件所在的路径有关系，拼接成完整的url需要使用url协议、主机、端口和当前路径信息。

网页中使用URL的场景小结

使用了URL就代表请求了资源

包括但不限于：

• a标签的href
• link标签的href
• script标签的src
• img标签的src
• video auido标签的src
• form中的action
• AJAX请求中的URL

设置资源类型（mime类型）

• 媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准；用来表示文档、文件或字节流的性质和格式。

• 语法：mime 类型结构： [type]/[subType]

  • HTTP 服务可以设置响应头 Content-Type 来表明响应体的 MIME 类型，浏览器会根据该类型决定如何处理资源。
  • 为了解决中文乱码，有时需要把字符集设置：charset=utf-8写在MIME类型的后面，用；分割。

• 下面是常见文件对应的mime类型

  html: 'text/html',
  css: 'text/css',
  js: 'text/javascript',
  png: 'image/png',
  jpg: 'image/jpeg',
  gif: 'image/gif',
  mp4: 'video/mp4',
  mp3: 'audio/mpeg',
  json: 'application/json'
  

  对于未知的资源类型，可以选择 application/octet-stream 类型

  浏览器在遇到该类型的响应时，会对响应体内容进行独立存储，实现下载效果

• 值得注意的事情：

  注意：现在服务器返回一个HTML文档，不设置响应报文的响应内容，返回的HTML中有中文也不会乱码。

  原因：

  • html文档中的meta标签指定了文档字符集的编码格式，所以浏览器会按照这种方式编码。

  • 同时，该HTML页面中引用的css/js/图片没有必要设置字符集，当资源回到网页的时候，会用HTML的字符集格式自动解析。
  • 但是单独打开各个外部资源的方式里面是乱码的

  优先级：设置响应头的优先级更高，如果二者不一样优先以响应头设置的内容为准。

GET和POST场景

• GET 请求的情况：
  • 在地址栏直接输入 url 访问
  • 点击 a 链接
  • link 标签引入 css
  • script 标签引入 js
  • img 标签引入图片
  • form 标签中的 method 为 get （不区分大小写）
  • ajax 中的 get 请求
• POST 请求的情况：
  • form 标签中的 method 为 post（不区分大小写）
  • AJAX 的 post 请求

GET和POST请求的区别

GET和POST是HTTP协议请求的两种方式。

• 作用：

  GET主要用来获取数据。

  POST用来提交数据。

• 参数显示位置：

  GET带参数的请求添加在URL之后，在地址栏输入url访问就是get请求;

  POST带参数请求是将参数放在请求体中

• 安全性：

  POST请求相对GET安全一些，因为在浏览器中参数会暴露在地址栏

• 请求大小限制：

  GET请求大小有限制，一般为2K

  POST请求没有大小限制。