【前端】NodeJS：HTTP协议

子非鱼921

于 2024-08-09 12:29:34 发布

阅读量983

点赞数 28

分类专栏：【前端】NodeJS 文章标签：前端 http 网络协议 javascript node.js 开发语言

本文链接：https://blog.csdn.net/weixin_45980065/article/details/140994534

版权

【前端】NodeJS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTTP协议

1 概念

HTTP（hypertext transport protocol）协议：超文本传输协议。
是一种基于TCP/IP的应用层通信协议。
这个协议详细规定了浏览器和万维网服务器之间互相通信的规则。
协议中主要规定了两个方面的内容。
客户端：用来向服务器发送数据，可以被称之为请求报文。
服务端：向客户端返回数据，可以被称之为响应报文。
报文：可以简单理解为就是一堆字符串。

2 请求报文的组成

请求行
请求头
空行
请求体

3 HTTP的请求行

请求方法（get、post、put、delete等）
请求 URL（统一资源定位器）
例如：http://www.baidu.com:80/index.html?a=100&b=200#logo
http：协议（https、ftp、ssh等）
www.baidu.com 域名
80 端口号
/index.html 路径
a=100&b=200 查询字符串
#logo 哈希（锚点链接）
HTTP协议版本号

4 请求头

格式：『头名：头值』
常见的请求头有：

请求头	解释
Host	主机名
Connection	连接的设置 keep-alive（保持连接），close（关闭连接）
Cache-Control	缓存控制 max-age = 0 （没有缓存）
Upgrade-Insecure-Requests	将网页中的http请求转化为https请求（很少用）老网站升级
User-Agent	用户代理，客户端字符串标识，服务器可以通过这个标识来识别这个请求来自哪个客户端，一般在PC端和手机端的区分
Accept	设置浏览器接收的数据类型
Accept-Encoding	设置接收的压缩方式
Accept-Language	设置接收的语言q=0.7为喜好系数，满分为1
Cookie	后面单独讲

5 HTTP的请求体

请求体内容的格式是非常灵活的，
（可以是空）=> GET请求，
（也可以是字符串，还可以是JSON）=> POST请求
例如：
字符串：keywords=手机&price=2000
JSON：{“keywords”:“手机”,“price”:2000}

6 响应报文的组成

响应行
HTTP/1.1 200 OK
HTTP/1.1：HTTP协议版本号
200：响应状态码（404：Not Found，500：Internal Server Error）
还有一些状态码，参考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
OK：响应状态描述
响应状态码和响应字符串关系是一一对应的。
响应头
Cache-Control：缓存控制，private私有的，只允许客户端缓存数据
Connection：链接设置
Content-Type：text/html;charset=utf-8设置响应体的数据类型以及字符集，响应体为html，字符集utf-8
Content-Length：响应体的长度，单位为字节
空行
响应体
响应体内容的类型是非常灵活的，常见的类型有 HTML、CSS、JS、图片、JSON。

7 创建HTTP服务

7.1 操作步骤

http.createServer里的回调函数的执行时机：当接收到HTTP请求的时候，就会执行。

//导入 http 模块
const http = require('http');

//创建服务对象 create 创建 server 服务
// request 意为请求. 是对请求报文的封装对象, 通过 request 对象可以获得请求报文的数据
// response 意为响应. 是对响应报文的封装对象, 通过 response 对象可以设置响应报文
const server = http.createServer((request, response) => {
	response.end('Hello HTTP server');
});

//监听端口, 启动服务
server.listen(9000, () => {
	console.log('服务已经启动, 端口 9000 监听中...');
});

7.2 测试

浏览器请求对应端口：http://127.0.0.1:9000

7.3 注意事项

命令行ctrl+c停止服务
当服务启动后，更新代码必须重启服务才能生效
响应内容中文乱码的解决办法：

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

端口号被占用
Error: listen EADDRINUSE: address already in use :::9000
解决方法：
1 关闭当前正在运行监听端口的服务（使用较多）
2 修改其他端口号
HTTP协议默认端口是80。HTTPS协议的默认端口是443，HTTP服务开发常用端口有 3000，8080，8090，9000 等。
如果端口被其他程序占用，可以使用资源监视器找到占用端口的程序，然后使用任务管理器关闭对应的程序。

8 浏览器查看HTTP报文

在这里插入图片描述

8.1 查看请求行和请求头

在这里插入图片描述

8.2 查看请求体

在这里插入图片描述

8.3 查看URL查询字符串

在这里插入图片描述

8.4 查看响应行与响应头

在这里插入图片描述

8.5 查看响应体

在这里插入图片描述

9 获取HTTP请求报文

想要获取请求的数据，需要通过request对象。

含义	语法	重要程度
请求方法	request.method	*
请求版本	request.httpVersion
请求路径	request.url	*
URL 路径	require(‘url’).parse(request.url).pathname	*
URL 查询字符串	require(‘url’).parse(request.url, true).query	*
请求头	request.headers	*
请求体	request.on(‘data’, function(chunk){}); request.on(‘end’, function(){});

注意事项：

request.url只能获取路径以及查询字符串，无法获取URL中的域名以及协议的内容。
request.headers将请求信息转化成一个对象，并将属性名都转化成了『小写』。
关于路径：如果访问网站的时候，只填写了 IP 地址或者是域名信息，此时请求的路径为『 / 』。
关于 favicon.ico：这个请求是属于浏览器自动发送的请求。

//导入 http 模块
const http = require('http');

//创建服务对象
const server = http.createServer((request, response) => {
	//获取请求的方法
	console.log(request.method);
  	//获取请求的 url
  	console.log(request.url); // 只包含 url 中的路径与查询字符串
  	//获取 HTTP 协议的版本号
  	console.log(request.httpVersion);
  	//获取 HTTP 的请求头
  	console.log(request.headers.host);
  	response.end('http'); // 设置响应体
});

//监听端口, 启动服务
server.listen(9000, () => {
  	console.log('服务已经启动....')
});

/*
	提取HTTP报文中的请求体
*/
//导入 http 模块
const http = require('http');

//创建服务对象
const server = http.createServer((request, response) => {
  	//声明一个变量
  	let body = '';
  	//绑定 data 事件
  	request.on('data', chunk => {
    	body += chunk;
  	})
  	//绑定 end 事件
  	request.on('end', () => {
    	console.log(body);
    	// 响应
    	response.end('Hello HTTP');
  	});
});

//监听端口, 启动服务
server.listen(9000, () => {
  	console.log('服务已经启动....')
});

/*
	提取HTTP报文中URL路径和查询字符串（法一）
*/
//导入 http 模块
const http = require('http');
//导入 url 模块
const url = require('url');

//创建服务对象
const server = http.createServer((request, response) => {
  	//解析 request.url http://127.0.0.1:9000/search?keyword=200
  	//console.log(request.url);
  	let res = url.parse(request.url, true);
  	//路径
  	let pathname = res.pathname;
  	//查询字符串
  	let keyword = res.query.keyword;
  	console.log(res, pathname, keyword);
  	response.end('url');
});

//监听端口, 启动服务
server.listen(9000, () => {
  	console.log('服务已经启动....')
});

/*
	提取HTTP报文中URL路径和查询字符串（法二）
*/
//导入 http 模块
const http = require('http');

//创建服务对象
const server = http.createServer((request, response) => {
  	//实例化 URL 的对象
  	// let url = new URL('/search?a=100&b=200', 'http://127.0.0.1:9000');
  	let url = new URL(request.url, 'http://127.0.0.1');
  	//输出路径
  	console.log(url.pathname);
  	//输出 keyword 查询字符串
  	console.log(url.searchParams.get('keyword'));
  	response.end('url new');
});

//监听端口, 启动服务
server.listen(9000, () => {
  	console.log('服务已经启动....')
});

9.1 练习

按照以下要求搭建HTTP服务：

请求类型(方法)	请求地址	响应体结果
get	/login	登录页面
get	/reg	注册页面

//导入 http 模块
const http = require('http');

//创建服务对象
const server = http.createServer((request, response) => {
  	//获取请求的方法
  	let {method} = request; //对象的解构赋值
  	//获取请求的 url 路径
  	let {pathname} = new URL(request.url, 'http://127.0.0.1');
  	response.setHeader('content-type', 'text/html;charset=utf-8');
  	//判断
  	if(method === 'GET' && pathname === '/login'){
    	//登录的情形
    	response.end('登录页面');
  	}else if(method === 'GET' && pathname === '/reg'){ 
  		//register 注册
    	response.end('注册页面');
  	}else{
    	response.end('Not Found');
  	}
});

//监听端口 启动服务
server.listen(9000, () => {
  	console.log('服务已经启动.. 端口 9000 监听中....');
})

10 设置HTTP响应报文

作用	语法
设置响应状态码	response.statusCode
设置响应状态描述	response.statusMessage （用的非常少）
设置响应头信息	response.setHeader(‘头名’, ‘头值’)
设置响应体	response.write(‘xx’), response.end(‘xxx’)

//导入 http 模块
const http = require('http');

//创建服务对象
const server = http.createServer((request, response) => {
  	//1. 设置响应状态码
  	response.statusCode = 203;
  	response.statusCode = 404;
  	//2. 响应状态的描述 
  	response.statusMessage = 'iloveyou';
  	//3. 响应头
  	response.setHeader('content-type', 'text/html;charset=utf-8');
  	response.setHeader('Server', 'Node.js');
  	response.setHeader('myHeader', 'test test test');
  	response.setHeader('test', ['a','b','c']);
  	//4. 响应体的设置
  	response.write('love');
  	response.write('love');
  	response.write('love');
  	response.write('love'); //有write就不写end了
  	response.end('love'); //设置响应体
  	response.end('xxx'); //设置响应体，只能有一个end执行
});

//监听端口, 启动服务
server.listen(9000, () => {
  	console.log('服务已经启动....')
});

10.1 练习

搭建HTTP服务，响应一个4行3列的表格，并且要求表格有隔行换色效果，且点击单元格能高亮显示。

//导入 http 模块
const http = require('http');

//创建服务对象
const server = http.createServer((request, response) => {
  	response.end(`
    	<!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>
      	<style>
	        td{
	          padding: 20px 40px;
	        }
	        table tr:nth-child(odd){
	          background: #aef;
	        }
	        table tr:nth-child(even){
	          background: #fcb;
	        }
	        table, td{
	          border-collapse: collapse;
	        }
      	</style>
    	</head>
    	<body>
      	<table border="1">
        	<tr><td></td><td></td><td></td></tr>
        	<tr><td></td><td></td><td></td></tr>
        	<tr><td></td><td></td><td></td></tr>
        	<tr><td></td><td></td><td></td></tr>
      	</table>
      	<script>
        //获取所有的 td
        let tds = document.querySelectorAll('td');
        //遍历
        tds.forEach(item => {
          	item.onclick = function(){
            	this.style.background = '#222';
          	}
        })
      	</script>
    	</body>
    	</html>
  	`); //设置响应体
});

//监听端口, 启动服务
server.listen(9000, () => {
  	console.log('服务已经启动....')
});

10.2 练习优化

//导入 http 模块
const http = require('http');
const fs = require('fs');

//创建服务对象
const server = http.createServer((request, response) => {
  	//读取文件内容
  	let html = fs.readFileSync(__dirname + '/table.html'); //将表格单独放一个文件中
  	response.end(html); //设置响应体，end参数可以是字符串或者Buffer
});

//监听端口, 启动服务
server.listen(9000, () => {
  	console.log('服务已经启动....')
});

11 网页资源的基本加载过程

网页资源的加载都是循序渐进的，首先获取HTML的内容，然后解析HTML在发送其他资源的请求，如CSS，Javascript，图片等。

12 静态资源服务

静态资源：指内容长时间不发生改变的资源，例如图片、视频、CSS 文件、JS文件、HTML文件、字体文件等。
动态资源：指内容经常更新的资源，例如百度首页、网易首页、京东搜索列表页面等。

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

12.2 网页中的URL

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

12.2.1 绝对路径

绝对路径可靠性强，而且相对容易理解，在项目中运用较多。

形式	特点
http://atguigu.com/web	直接向目标资源发送请求，容易理解。网站的外链会用到此形式
//atguigu.com/web	与页面 URL 的协议拼接形成完整 URL 再发送请求。大型网站用的比较多
/web	与页面 URL 的协议、主机名、端口拼接形成完整 URL 再发送请求。中小型网站

12.2.2 相对路径

相对路径在发送请求时，需要与当前页面URL路径进行计算，得到完整URL后，再发送请求，学习阶段用的较多。
例如当前网页url为 http://www.atguigu.com/course/h5.html

形式	最终的URL
./css/app.css	http://www.atguigu.com/course/css/app.css
js/app.js	http://www.atguigu.com/course/js/app.js
…/img/logo.png	http://www.atguigu.com/img/logo.png
…/…/mp4/show.mp4	http://www.atguigu.com/mp4/show.mp4

12.2.3 网页中使用URL的场景小结

包括但不限于如下场景：

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

12.3 设置资源类型（mime类型）

媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型）是一种标准，用来表示文档、文件或字节流的性质和格式。
mime 类型结构： [type]/[subType]
例如： text/html text/css image/jpeg image/png application/json
HTTP 服务可以设置响应头 Content-Type 来表明响应体的 MIME 类型，浏览器会根据该类型决定如何处理资源。
对于未知的资源类型，可以选择application/octet-stream类型，浏览器在遇到该类型的响应时，会对响应体内容进行独立存储，也就是我们常见的下载效果。

/*
	常见文件对应的 mime 类型
*/
let mimes = {
  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'
}

require('http').createServer((request,response)=>{
	//获取请求的方法已经路径
	let {url, method} = request;
	//文件夹路径
	let rootDir = __dirname + '/public';
	//拼接文件路径
	let filePath = rootDir + url;
	//读取文件内容
	fs.readFile(filePath,(err,data)=>{
		//判断
		if(err){
			//如果出现错误，响应404状态码
			response.statusCode = 404;
			response.end('<h1>404 Not Found</h1>');
		}else{
			//响应文件内容
			response.end(data);
		}
	})
}).listen(80,()=>{
	console.log('80端口正在启动中....');
})

12.4 GET和POST请求场景小结

GET 请求的情况：

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

POST 请求的情况：

form 标签中的 method 为 post（不区分大小写）
AJAX 的 post 请求

13 GET和POST请求的区别

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

GET 主要用来获取数据，POST主要用来提交数据.
GET 带参数请求是将参数缀到URL之后，在地址栏中输入url访问网站就是GET请求，POST带参数请求是将参数放到请求体中。
POST请求相对GET安全一些，因为在浏览器中参数会暴露在地址栏。
GET请求大小有限制，一般为2K，而POST请求则没有大小限制。

/*
 * 创建一个 HTTP 服务，端口为 9000，满足如下需求
 * GET  /index.html        响应  page/index.html 的文件内容
 * GET  /css/app.css       响应  page/css/app.css 的文件内容
 * GET  /images/logo.png   响应  page/images/logo.png 的文件内容
 */
//导入 http 模块
const http = require('http');
const fs = require('fs');
const path = require('path');
//声明一个变量
let mimes = {
  	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'
}

//创建服务对象
const server = http.createServer((request, response) => {
  	if(request.method !== 'GET'){
    	response.statusCode = 405;
    	response.end('<h1>405 Method Not Allowed</h1>');
    	return;
  	}
  	//获取请求url的路径
  	let {pathname} = new URL(request.url, 'http://127.0.0.1');
  	//声明一个变量
  	let root = __dirname + '/page';
  	// let root = __dirname + '/../';
  	//拼接文件路径
  	let filePath = root + pathname;
  	//读取文件 fs 异步 API
  	fs.readFile(filePath, (err, data) => {
    	if(err){
      		console.log(err);
      		//设置字符集
      		response.setHeader('content-type','text/html;charset=utf-8');
      		//判断错误的代号
	      	switch(err.code){
	        	case 'ENOENT':
	          		response.statusCode = 404;
	          		response.end('<h1>404 Not Found</h1>');
	        	case 'EPERM':
	          		response.statusCode = 403;
	          		response.end('<h1>403 Forbidden</h1>');
	        	default:
		          	response.statusCode = 500;
		          	response.end('<h1>Internal Server Error</h1>');
      		}
      		return;
    	}
    	//获取文件的后缀名
    	let ext = path.extname(filePath).slice(1);
    	//获取对应的类型
    	let type = mimes[ext];
    	if(type){
      		//匹配到了                          text/html;charset=utf-8
      		if(ext === 'html'){
        		response.setHeader('content-type', type + ';charset=utf-8');
      		}else{
        		response.setHeader('content-type', type);
      		}
    	}else{
      		//没有匹配到
      		response.setHeader('content-type', 'application/octet-stream');
    	}
    	//响应文件内容
    	response.end(data);
  	})
});

//监听端口, 启动服务
server.listen(9000, () => {
  	console.log('服务已经启动....')
});

子非鱼921

关注

28
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
【前端】NodeJS：HTTP协议

网页资源的加载都是循序渐进的，首先获取HTML的内容，然后解析HTML在发送其他资源的请求，如CSS，Javascript，图片等。相对路径在发送请求时，需要与当前页面URL路径进行计算，得到完整URL后，再发送请求，学习阶段用的较多。http.createServer里的回调函数的执行时机：当接收到HTTP请求的时候，就会执行。搭建HTTP服务，响应一个4行3列的表格，并且要求表格有隔行换色效果，且点击单元格能高亮显示。浏览器请求对应端口：http://127.0.0.1:9000。
复制链接

扫一扫