【前端】NodeJS：HTTP协议

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);//获取请求的 urlconsole.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>//获取所有的 tdlet 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文件、字体文件等。
• 动态资源：指内容经常更新的资源，例如百度首页、网易首页、京东搜索列表页面等。

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

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 异步 APIfs.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-8if(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('服务已经启动....')
});