node.js:http协议笔记代码
2023-09-27 14:22:47 时间
/*
http协议
-网络基础
-网络的服务器基于请求和响应的
1、当在浏览器中输入地址以后发生了什么?
https://lilichao.com/hello/index.html
①DNS解析,获取网站的IP地址
②浏览器需要和服务器建立连接(TCP/IP) ----三次握手
③向服务器发出请求(HTTP协议)
④服务器处理请求,并返回响应(HTTP协议)
⑤浏览器将响应的页面渲染
⑥断开和服务器的连接 ----四次挥手
https:// 协议名
lilichao.com 域名 domain
整个网络中存在无数个服务器,每一个服务器都有它自己的唯一标识
这个标识被称为 IP地址 192.168.1.17
但是IP地址不方便记忆
域名就相当于IP地址的别名
/hello/index.html 网站资源路径
2、客户端如何和服务器建立(断开)连接
-通过三次握手和四次挥手
-三次握手 --->建立连接
-三次握手是客户端和服务器建立连接的过程
1、客户端向服务器发送连接请求
SYN
2、服务器收到连接请求,向客户端返回消息
SYN ACK
3、客户端向服务器发送同意连接的信息
ACK
-四次挥手 --->断开连接
-四次挥手就是客户端和服务器建立断开的过程
1、客户端向服务器发送请求,通过向服务器数据发送完毕,请求断开连接
FIN
2、服务器向客户端返回数据,知道了
ACK
3、服务器向客户端返回数据,收完了,可以断开连接
FIN ACK
4、客户端向服务器发数据,可以断开了
ACK
请求和响应实际上就是一段数据,只是这段数据需要遵循一个特殊的格式
这个特殊的格式由HTTP协议来决定的
TCP/IP 协议族
-TCP/IP协议族中包含了一组协议
这组协议规定了互联网中所有的通信的细节
网络通信的过程由四层组成
应用层
-软件的层面 浏览器 服务器都属于应用层
传输层
-负责对数据进行拆分,把大数据拆分为一个一个小包
网络层
-负责给数据包添加信息
数据链路层
-传输信息
-HTTP协议就是应用层的协议
用来规定客户端和服务器之间通信的报文格式
-报文 ----message
-浏览器和服务器之间通信是基于请求和响应的
-浏览器向服务器发送请求(request)
-服务器向浏览器返回响应(response)
-浏览器向服务器发送请求相当于浏览器给服务器写信
服务器向浏览器返回响应,相当于服务器给浏览器回信
这个信在HTTP协议中就被称为报文
-而HTTP协议就是对这个报文的格式进行规定
-服务器
-一个服务器的主要功能:
1、可以接收到浏览器发送的请求报文
2、可以向浏览器返回响应报文
-请求报文 ---request
-客户端发送给服务器的报文称为请求报文
-请求报文的格式如下:
请求首行
请求头
空行
请求体
-请求首行
-请求首行就是请求报文的第一行
GET /index.html?username=lingxiaohu HTTP/1.1
第一部分 get 表示请求的方式,get表示发送的是get请求
现在常用的方式就是get和post请求
get请求主要用来向服务器请求资源
post请求主要用来向服务器发送数据
第二部分 /index.html?username=lingxiaohu
表示请求资源的路径,
? 后面的内容叫做查询字符串
查询字符串是一个名值对结构,一个名字对应一个值
使用=连接,多个名值对之间使用&分割
username=admin&password=123123
get请求通过查询字符串将数据发送给服务器
由于查询字符串会在浏览器地址栏中直接显示
所以,它安全性较差
同时,由于url地址长度有限制 所以get请求无法发送较大的数据
post请求通过请求体来发送数据
-在chrome中通过 载荷 可以查看
post请求通过请求体发送数据,无法在地址栏直接查看
所以安全性较好
请求体的大小没有限制,可以发送任意大小的数据
如果你需要向服务器发送数据,能用post尽量使用post
第三部分
HTTP/1.1 协议的版本
GET /node.js/http%E5%8D%8F%E8%AE%AE/http%E5%8D%8F%E8%AE%AE.html?username=%E9%9B%B6%E5%B0%8F%E5%94%AC HTTP/1.1
请求头
-请求体也是名值对结构,用来告诉服务器我们浏览器的信息
-每一个请求头都有它的作用:
Accept 浏览器可以接收的文件类型
Accept-Encoding 浏览器允许的压缩的编码、
Accept-Language 客户端浏览器可以接受的语言
User-Agent 用户代理
请求报文:
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*\/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Host: 127.0.0.1:5500
Referer: http://127.0.0.1:5500/node.js/http%E5%8D%8F%E8%AE%AE/http%E5%8D%8F%E8%AE%AE.html
Sec-Fetch-Dest: document
Sec-Fetch-Mode: navigate
Sec-Fetch-Site: same-origin
Sec-Fetch-User: ?1
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36
sec-ch-ua: "Not_A Brand";v="99", "Google Chrome";v="109", "Chromium";v="109"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
空行
-用来分隔请求体和请求体
请求体
-post请求通过请求体来发送数据
网页、css、js、图片这些资源都会作为响应报文中的哪一部分发送
响应报文:
响应首行
响应头
空行
响应体
响应首行
HTTP/1.1 200 OK
200 响应状态码
OK 对响应状态码的描述
-响应状态码的规则
1xx 请求处理中
2xx 表示成功
3xx 表示请求的重定向
4xx 表示客户端错误
5xx 表示服务器的错误
响应头
-响应头也是一个一个的名值对结构,用来告诉浏览器响应的信息
Content-Type ---用来描述响应体的类型
Content-Length ---用来描述响应体的大小
Content-Type: text/html; charset=UTF-8
Content-Length: 2017
空行
-用来分隔响应头和响应体
响应体
-就是服务器返回给客户端的内容
<!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 method="post" action="#">
<input type="text" name="username" />
<button>提交</button>
</form>
<!-- Code injected by live-server -->
<script>
// <![CDATA[ <-- For SVG support
if ('WebSocket' in window) {
(function () {
function refreshCSS() {
var sheets = [].slice.call(document.getElementsByTagName("link"));
var head = document.getElementsByTagName("head")[0];
for (var i = 0; i < sheets.length; ++i) {
var elem = sheets[i];
var parent = elem.parentElement || head;
parent.removeChild(elem);
var rel = elem.rel;
if (elem.href && typeof rel != "string" || rel.length == 0 || rel.toLowerCase() == "stylesheet") {
var url = elem.href.replace(/(&|\?)_cacheOverride=\d+/, '');
elem.href = url + (url.indexOf('?') >= 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf());
}
parent.appendChild(elem);
}
}
var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://';
var address = protocol + window.location.host + window.location.pathname + '/ws';
var socket = new WebSocket(address);
socket.onmessage = function (msg) {
if (msg.data == 'reload') window.location.reload();
else if (msg.data == 'refreshcss') refreshCSS();
};
if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) {
console.log('Live reload enabled.');
sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true);
}
})();
}
else {
console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.');
}
// ]]>
</script>
</body>
</html>
响应报文:
HTTP/1.1 200 OK
Vary: Origin
Access-Control-Allow-Credentials: true
Accept-Ranges: bytes
Cache-Control: public, max-age=0
Last-Modified: Mon, 13 Feb 2023 12:05:38 GMT
ETag: W/"17a-1864aaa93c9"
Content-Type: text/html; charset=UTF-8
Content-Length: 1871
Date: Mon, 13 Feb 2023 13:07:43 GMT
Connection: keep-alive
Keep-Alive: timeout=5
*/
相关文章
- Node.js -- Router模块中有一个param方法
- 《Node.js区块链开发》——1.3 加密货币就是货币
- node.js mysql cheerio superagent 小爬虫 nodemailer
- js 五种绑定彻底弄懂this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解
- 【前端芝士树】Vue.js面试题整理 / 知识点梳理
- 《Node.js入门经典》一2.11 测验
- 识别并避免 Js 内存泄漏,跟低级缺陷say goodbye,让老总对你刮目相看
- Node.js 常用命令
- 基于SpringMVC+Ext.js的权限管理系统(无权限框架)
- 《Node.js区块链开发》——2.3 未来趋势
- 《Node.js区块链开发》——第3章 共识机制,可编程的利益转移规则 3.1 机制,左右产品走向的根源
- JS对象详解
- [js高手之路] es6系列教程 - new.target属性与es5改造es6的类语法
- js判断字符是否存在汉字的方法
- 安装Node.js、npm和环境变量的配置
- Vue.js中过滤器(filter)的使用
- 2023华为OD机试 - 人数最多的站点(JS)
- js获取单选button的值
- Django:django后台传递数据到js中
- JS学习第6天——PC端网页特效(元素偏移量offset、元素可视区client、元素滚动scroll、动画函数封装、节流阀、网页轮播图案例、mouseenter与mouseover区别)
- Node.js npm uuid
- node.js 更新 npm 和 node