JS——http协议详述以及个人笔记

已于 2024-04-20 16:47:36 修改
阅读量1.2k 收藏 1
点赞数
分类专栏： 千峰学员笔记 笔记 文章标签： javascript http 网络
于 2022-09-21 21:57:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fzy927/article/details/126978761
版权

HTTP协议

首先，通过简单的分析，http的请求流程（同时，也是浏览器输入URL敲击回车的过程）大概是：一，建立链接：TCP/IP协议作为底层，使用浏览器URL解析，然后可以通过DNS查询：域名系统，也就是相当于一种将域名翻译成ip地址的翻译官，在各层服务器查询其ip地址（递归查询），然后使用TCP连接（传输控制协议）：稳定、可靠、基于字节流；二、发送请求：前端向后端发送数据包，后端就使用http协议解读；三、返回相应，与发送请求相反，给前端发送数据包，然后前端根据http协议解读；四、断开链接：因为服务器访问量很大，一般访问结束都会自动断开，不造成服务器堵塞。
下面让我们来看看完整的流程吧

一、HTTP请求的完整流程
https://vue3js.cn/interview/http/after_url.html
URL解析
协议
http://
默认80端口
https://
默认443端口
主机
两种形式
域名形式
www.baidu.com
localhost
IP+端口形式
12.34.56.78:80
IP
12.34.56.78
宇宙中的唯一主机（具有唯一性）
0~255 * 4段
端口
:80
该主机中的唯一进程（应用程序）
0~65535
0~1024为系统保留端口
路径
查询参数
哈希（锚点）
DNS查询
Domain Name Server
将域名解析为IP+端口
TCP连接
客户端发送请求报文
服务端返回响应报文
客户端渲染页面
图解
渲染过程图解
连接断开
渲染流程图详述：HTML左手把负责交互效果的script拿到手里，右手把负责渲染样式的CSS也拿到手里，然后合成一棵DOM 树；于此同时，CSS把自己所有的属性值总合起来也归类成一棵CSS规则树；然后两者合一，合成一棵渲染树，实现渲染效果，但是呢，因为JS的交互性，数据会时不时的更新，这个过程就叫做回流（reflow），无论更新多少次，最后一次都叫做有效回流，前面的都是无效回流，当JS完成有效回流后再次与渲染树结合，完成重绘过程，最终显示出来，这就是整个渲染流程了。

二、TCP/IP协议（管连接）
OSI七层网络模型 <#ID_1017168846>
Transmission Control Protocol
传输控制协议
TCP协议宗旨
稳定连接 + 可靠传输
客户端确认
我能往服务端发送数据报文
我能接收服务端发来的数据报文
服务端能向我发送数据报文
服务端能接收我发送的数据报文
服务端确认
我能往客户端发送数据报文
我能接收客户端发来的数据报文
客户端能向我发送数据报文
客户端能接收我发送的数据报文
UDP协议：连上，发送数据，完事
直播
影视娱乐
游戏
User Datagram Protocol 用户报文协议
连接：三次握手
1 客户端：在吗服服
C向S发送消息
2 服务端：在的客客，能看到信息吗
S向C回复消息
可以确认
C端可以发送消息
S端能收到消息
3 客户端：是的服服
C回复S的消息
可以确认
C端能接收消息
S端能发送消息
图解
三次握手详细流程
三次握手详细述说：首先是客户端向服务器发起请求建立连接，然后，服务器给客户端发起回应以及发起请求连接，最后，客户端会再次向服务器发起回应，总共三次过程。注意：无论是客户端和服务器都是做出针对性请求以及应答，并且不会携带数据
断开：四次挥手
1 client：分手吧服服
2 server：好的客客
3 server：这是服服的最后一条信息了哦（收到请回复）
4 client：嗯，这也是客客的最后一条信息，勿回（系统提示：客户端已断开与您的连接）
图解
在这里插入图片描述
四次挥手的详细述说：注意：前者三次握手本质上是连接，而四次挥手是断开连接。首先呢，是客户端发起请求断开连接，然后服务器端针对性的确认应答，并且，向客户端发起请求断开连接，最后客户端对服务器端针对性确认应答。注意：此过程中，客户端以及服务器端都不会携带数据包。双方确认断开连接，保证可靠传输不丢包。之后才是真正的数据传输

三、HTTP协议（管数据解读）
请求报文
请求行
POST /user HTTP/1.1
# POST 请求方式
# /user 请求URL（不包含域名）
# HTTP/1.1 请求协议版本
请求头
accept: application/json # 表示客户端希望接受的数据类型**（数据类型为：JSON）**
text/html
text/plain
accept-encoding: gzip #浏览器可接受的压缩算法（例如1111111110转变成1*10^11+…）
Accept-Language: zh-CN,zh;q=0.9
客户能接受的语言
Connection: keep-alive #保持一次TCP连接活跃（直到所有资源加载完毕为止）
Content-Type: application/x-www-form-urlencoded # 客户端发送的实体数据格式（GET请求通常无此字段）
application/x-www-form-urlencoded
表单数据
application/json
JSON数据
Content-Length:123
Host: 127.0.0.1 # 请求的主机名（IP）
cookie: 携带客户端用户信息（CS双方都可以编辑）
If-None-Match
携带上次数据的指纹E-tag
If-Modified-Since
携带上次数据的最后更新时间Last-Modified
user-agent: Mozilla/5.0 # 产生请求的浏览器信息
空行
请求体
# GET 请求是没有请求体数据的
# POST 请求才有请求体数据
完整报文范例
o
响应报文
状态行
HTTP/1.1 200 OK
# HTTP/1.1 服务器使用的 HTTP 协议版本
# 200 响应状态码
# OK 对响应状态码的简单解释
响应头
Content-Type: text/html # 服务端给客户端的数据类型
text/html
text/plain
普通文本
application/json
Content-Length: 11 # 服务端给客户端的数据长度
Content-Encoding: gzip #
------
Cache-Control:xxx
缓存时间
maxAge(3600)
旧版本的Cache-Control
Expires: Wed, 22 Dec 2021 07:56:25 GMT
响应超时时间
E-tag
数据的指纹
If-None-Match=携带指纹的请求头
Last-Modified
最后更新时间
If-Modified-Since=携带数据的最后更新时间的请求头
----------
Server: Apache/2.4.23 (Win32) OpenSSL/1.0.2j PHP/5.4.45 # 服务器类型
Access-Control-Allow-Origin:xxx
允许哪些前端跨域访问我
Date: Jan, 14 Aug 2019 12:42:30 GMT # 服务器时间
Set-Cookie:服务端写入客户端的COOKIE信息
Set-Cookie:isrich=true
Set-Cookie:istall=true
响应体
hello world
# 服务端给客户端的响应数据
常见的 HTTP 响应状态码
1. 100 ~ 199
- 100： 继续请求，前面的一部分内容服务端已经接受到了，正在等待后续内容
- 101： 请求者已经准备切换协议，服务器页表示同意
2. 200 ~ 299
- 2 开头的都是表示成功，本次请求成功了，只不过不一样的状态码有不一样的含义（语义化）
- 200： 标准请求成功（一般表示服务端提供的是网页）
- 201： 创建成功（一般是注册的时候，表示新用户信息已经添加到数据库）
- 203： 表示服务器已经成功处理了请求，但是返回的信息可能来自另一源
- 204： 服务端已经成功处理了请求，但是没有任何数据返回
3. 300 ~ 399
- 3 开头也是成功的一种，但是一般表示重定向
- 301： 永久重定向
- 302： 临时重定向
- 304： 资源未被修改（使用的是缓存的数据）
- 305： 使用代理
4. 400 ~ 499
- 4 开头表示客户端出现错误了
- 400： 请求的语法服务端不认识
- 401： 未授权（你要登录的网站需要授权登录）
- 403： 服务器拒绝了你的请求（账户/角色/权限问题）
- 404： 服务器找不到你请求的 URL
- 407： 你的代理没有授权
- 408： 请求超时
- 410： 你请求的数据已经被服务端永久删除
5. 500 ~ 599
- 5 开头的表示服务端出现了错误
- 500： 服务器内部错误
- 504：网关超时
- 503： 服务器当前不可用（过载或者维护）
- 505： 请求的协议服务器不支持
常见的 HTTP 请求方法（也可以主要分成两类，post与get，因为post提交数据的时候可以实现更改数据）
2. POST： 新建数据
- 参数以 request body的形式发送，也就是放在请求体中
- POST 请求不会被浏览器主动缓存，除非手动设置
- POST 请求理论上是没有限制的，除非服务端做了限制
- 对参数类型没有限制，理论上可以传递任意数据类型，只不过要和请求头对应
- POST 请求数据封装在请求体里，相对安全
4. DELETE： 删除数据
3. PUT/PATCH： 更新数据
1. GET： 获取数据
- 参数以 querystring 的形式发送，也就是直接拼接在 请求路径的后面
- GET 请求会被浏览器主动缓存
- GET 请求根据不同的浏览器对长度是有限制的
- IE： 2083 个字符
- FireFox： 65536 个字符
- Safari： 80000 个字符
- Opera： 190000 个字符
- Chrome： 8182 个字符
- APACHE(server)： 理论上接受的最大长度是 8192 个字符（有待商榷）
- 对参数的类型有限制，只接受 ASCII 码的格式
- GET 请求是明文发送，相对不安全
其它请求方式
1. HEAD： 类似于 GET 的请求，只不过一般没有响应的具体内容，用于获取报文头
2. CONNECT： HTTP/1.1 中预留的方式，一般用于管道链接改变为代理的时候使用
3. OPTIONS： 允许客户端查看服务端性能
GET VS POST的区别
GET请求获取数据，POST请求提交数据
POST请求可以携带数据
可以在数据详情中对操作意图做具体说明
{type:delete,studentid:123}
{type:update,studentid:123,name:“黑哥”}
{type:add,name:“黑哥”}
GET请求的数据在地址栏中，POST请求在请求体里
localhost/login?username=admin&password=123456
GET没有请求体
携带的信息暴露（考虑安全问题）
POST等其他请求也可以携带查询参数
localhost/login
POST请求体中有username=admin&password=123456
信息在请求体中（相对安全）
根本安全主要依赖HTTPS协议
服务端创建一个证书（密钥对）
公钥分发给所有客户端（客户端安装某网站的证书）
服务端自己保留私钥
大家发给服务端的信息通过公钥加密
数据被截获也无法解读
服务通过自己的私钥进行解密
Security安全
GET请求携带的数据量有限
GET请求携带的参数长度不同浏览器限制不一样
POST请求体中携带的数据理论上没有上限
四、RESTful-API风格的API/URL
Representational State Transfer，简称REST，意思：表述性状态转换
倡议内容
路径代表了想访问的资源
localhost:8888/goods/toys/345
345=飞机模型
请求方法代表相对资源执行的操作
POST=想要添加该资源
DELETE=想要删除该资源
PUT/PATCH=想要修改该资源
GET=想要查询该资源
实例：访问玩具信息
请求方式
POST
提交数据
localhost/goods/toys/0
携带数据
{name:xxx,price:xxx,factory:xxx}
DELETE
localhost/goods/toys/345
PUT/PATCH
携带数据
{price:999}
localhost/goods/toys/345
GET
localhost/goods/toys/345
传统风格（getalltoys动宾结构）
localhost:8888/goods/addtoys?page=10
localhost:8888/goods/deletetoys?page=10
localhost:8888/goods/updatetoys?page=10
localhost:8888/goods/getalltoys?page=10
localhost:8888/goods/gettoydetail?cid=12&tid=3435
五、HTTP缓存机制
强制缓存
Cache-Control
max-age
以秒为单位
示意图
在这里插入图片描述

           Expires
               Cache-Control的老版本Header
        no-cache
            前端不使用缓存
        no-store
            前后端皆不使用缓存
        其它
            private
                只允许终端浏览器缓存
            public
                允许所有中间路由环节进行缓存

强制缓存原理图
强制缓存原理图

协商缓存
缓存内容比对方式
ResponseHeader + ETag
响应内容的指纹（类似于哈希）
RequestHeader + If-None-Match=ETag值
ResponseHeader + LastModified
响应内容的最后修改时间（秒级）
RequestHeader + If-Modified-Since=LastModified值
示例图
headers

    304状态码
        NOT MODIFIED 未更新（滚回去用自己的缓存）
        服务端对比后告诉前端浏览器，内容没有任何变化，请使用浏览器端缓存

示例图
状态码

协商缓存原理图
协商缓存原理图

完整流程
http缓存综述
http缓存综述详细讲述：第一次http请求服务器，服务器会给几个缓存标记，catche-control（强制缓存时间） 、eTag（电子指纹）以及Last-Modified（最后修改时间），当第二次请求该数据的时候回先看强制缓存时间是否过期，如果没有过期，直接读取强制缓存进行渲染，如果过期，看看有没有给etag、last-modified，有的话，再次发起请求，得到数据，一边渲染一边缓存，如果有，两个数据特征，走协商缓存，使用（if-none-match:携带电子指纹）以及（if-modified-since携带最后更新时间），请求服务器，服务器查询最新电子指纹以及最新更新时间，如果指纹未变，时间未变，最后空数据回来，还是读取之前的（1.0版本）的数据缓存；但是如果数据库的结果，发现二者都改变（指纹更有说服力），最新数据jia200加上最新的缓存数据一边渲染一边缓存
刷新动作对缓存的影响
详细介绍

																																																				——如有侵权，请联系本人
原生JS的HTTP请求相关知识
xwzshjydxx的博客
06-02 4740
一个完整的HTTP响应由状态码、响应头集合和响应主体组成。在收到响应后，这些都可以通过XHR对象的属性和方法使用，主要有以下4个属性 在接收到响应后，第一步是检查status属性，以确定响应已经成功返回。一般来说，可以将HTTP状态码为200作为成功的标志。此时，responseText属性的内容已经就绪，而且在内容类型正确的情况下，responseXML也可以访问了。此外，状态码为304表示请求的资源并没有被修改，可以直接使用浏览器中缓存的版本；当然，也意味着响应是有效的。无论内容类型是什么，响应主体的内
JS//HTTP 协议
weixin_37877794的博客
02-28 1346
JS//（先占坑）2
【Nodejs】四、HTTP协议
最新发布
aaaa_aaab的博客
08-15 1653
文章来自于李强老师nodejs讲解时的内容总结，记录后便于之后复习使用
js中--http协议
tangyu520lehua的博客
09-20 805
js中--http协议
node.js（http协议）
qq_42676363的博客
11-26 305
七层网络协议 应用层：浏览器（http，FTP,DNS,SMTP,TeInet）(邓哥) 表示层：加密，格式转换（怕别人偷看，加密摩斯电码） 会话层：解除或者建立和其他节点的联系（邓哥在想追这个女孩，不再搭理其他女孩） 传输层：TCP/UDP（TCP：告诉我送到了，我再睡觉；UDP：你去送吧，我睡觉去了） 网络层：IP,ICMP,RIP,BGP（送信地址） 数据链路层：如何传输（搭乘什...
js中的http协议 、响应数据、接口文档
qq_56756602的博客
09-20 633
js中的http协议 、响应数据、接口文档
JS-网络协议
rfalcon的博客
05-18 955
JS部分自学笔记 网络分层 物理层、数据链路层、网络层（IP）、传输层（TCP/UDP）、应用层（HTTP、HTTPS） TCP：面向连接的协议 1.建立连接（三次握手） ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200518212317671.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JmYWx
七天学习微信小程序开发（一）—— 学习笔记
JCManZZ的博客
04-30 2467
文章目录前言目标第一天 —— 前端配置和编写微信开发微信小程序的代码结构常用标签(wxml)常用样式(wxss)界面布局的技术任务第二天 —— 深度学习微信前端编写（一）程序底部图标页面数据for循环if语句任务第三天 —— 深度学习微信前端编写 （二）文本框和按钮的事件获取用户信息点击按钮发送消息关于微信前端样式的补充任务第四天 —— 后端环境配置和编写node.js的安装方法egg框架的安装...
JavaSE实战——网络编程
李春春的专栏
09-24 2539
本篇博客主要介绍了Java基础的网络编程部分。涉及到基本的网络元素，诸如IP地址、端口、协议、套接字等；接着介绍了面向无连接的UDP用户数据报协议、面向连接的TCP传输控制协议，并实现了发送端接收端聊天、客户端服务端互访的基本功能；然后详述Tomcat的搭建和相关配置、并部署在MyEclipse上，以及基于HTTP1.1协议的浏览器、服务器请求应答头消息的获取和解释；最后简要介绍了URL对象，HTTP协议版本和常见网络架构。
《HTTP小书》读书笔记（4）响应之状态码（关键词：计算机网络/HTTP/响应/状态码）
Henry1991back的博客
09-25 569
100型响应当客户端发送 Expect:100-Continue时, 服务端可以响应 100 Continue 为允许，或者不许可(417 Expectation Failed) 。100 Continue 状态码通知客户端可以继续发送请求。在发送大文件之前，客户端可以首先发出询问，如果在服务器不接受大文件的话，服务器就可以直接拒绝继续。否则，服务器只能从请求头内提取内容大小，当发现不符合条件的时候
C#读书笔记
源流
12-21 2805
此书为《C#入门经典（C#6.0&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;Visual Studio 2015）（第七版）》，购于2016年底 购买此书是因为工作需要接触部分C#代码，而那时我对面向对象编程的概念认识尚浅，工作接触的代码又比较庞大，于是寄希望于此书，希望能快速上手C#，了解基本的知识，避免闹笑话。 刚拿到这本书时，我急于求成，加上书前半部分的内容也很入门（读书时跳过了），约2、3周便利用闲暇时
Java开发面试题——很有帮助的
m0_46891419的博客
06-19 3318
面试题 一、Java 1.运行机制 1)Java跨平台原理 Java实现跨平台是JVM(Java虚拟机)起的作用。如果是C/C++的编译方式，一旦换了一个平台，那么就需要重新编译一份对应的可执行代码，但是Java则不同，编译好了一份Java字节码，换到不同的平台上时，并不需要重新编译，前提是这些平台上都安装了相应平台的JVM，JVM不是跨平台的。 2)垃圾回收器的基本原理是什么？垃圾回收器可以马上回收内存吗？有什么办法主动通知虚拟机进行垃圾回收？ 垃圾回收器通常是作为一个单独的低级别的线程运行，在不可预知的
node.JS HTTP协议的概念和用法
紫月i的博客
11-19 231
HTTP协议的概念： 它是超文本传输协议，规定了如何从网站服务器传输超文本到本地浏览器，是客户端和服务器请求和应答的标准 报文： 在HTTP请求和响应的过程中传递的数据库就叫报文，包括要传送的数据和一些附加信息，并且要遵守规定好的格式。 请求报文： 客户端向服务器端发送请求的数据 响应报文： 服务器端接收到请求报文时，对客户端的响应数据 在浏览器的开发者工具的NetWork中,Request Headers就是请求报文，Response Headers就是响应报文 请求方式： get ： 请求数据(请求地
HTTP请求协议
jssd的博客
05-26 388
http请求格式 请求以键值对形式发送 请求头 请求方式, 请求地址, http协议版本 请求方式: get请求方式, post请求方式 请求行 消息报头, 一般用于说明客户端使用的一些附加信息 请求数据 请求方式 HTTP1.0 定义了三种请求方式: GET POST HEAD 方式 HTTP1.1 新增了5种请求方式: OPTIONS, PUT, DELETE, TRACE,...
Node.js网络通信方式：Http协议
成长ing中的w的专栏
12-23 906
上篇介绍了UDP协议通信，本篇介绍Http协议：一种通用、无状态的应用层协议。
HTTP协议
weixin_34310785的博客
07-02 72
HTTP（超文本传输协议）是一个基于请求与响应模式的、无状态的、应用层的协议，常基于TCP的连接方式，HTTP1.1版本中给出一种持续连接的机制，绝大多数的Web开发，都是构建在HTTP协议之上的Web应用。 1、常用的HTTP方法有哪些？ GET： 用于请求访问已经被URI（统一资源标识符）识别的资源，可以...
Node.js -- HTTP协议和网络基础概念
2302_79523175的博客
04-23 867
本节相关内容都可以在进行查看，深入了解相关内容。
javascript笔记整理系列 - HTTP协议
博客转至https://chengyanzhao.github.io，CSDN不再更新。
03-07 591
1 协议简介　在浏览器中输入http://www.darkclouds.top/ssqworks/introduction时，浏览器会有如下反映： 1. 通过www.darkclouds.top找到服务器ip地址。 2. 通过服务器ip确定服务器。 3. 尝试通过80端口与服务器建立TCP连接。（80端口是HTTP的默认通信端口） 4. 如果服务器存在并且接受了该连接，浏览器会发送如下内容：
Node.js HTTP 使用详解
小朱
06-21 422
关于HTTP部分大致分为如下的重要点： 直接通过http对象使用的有：  1. http.STATUS_CODES  2. http.createServer  3. http.request(http.ClientRequest)  4. http.get  5. http.globalAgent  6. http.IcomingMessage 作为回调参数使用的对象有
Python编程入门教程——王纯业笔记
- 字典（dictionary）：详述了字典的创建、访问和更新，以及键值对的操作。 3. 控制结构： - 条件语句（if）：解释了如何使用if进行条件判断。 - 循环语句（for, while, break, continue, range()）：介绍了循环...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值