【Node进阶之路】五. HTTP协议

jadon_z
139 阅读11分钟

1. 概念

HTTP（hypertext transport protocol）协议；中文叫超文本传输协议，是一种基于TCP/IP的应用层通信协议。

这个协议详细规定了 浏览器 和万维网 服务器 之间互相通信的规则。

协议中主要规定了两个方面的内容

  • 客户端：用来向服务器发送数据，可以被称之为请求报文
  • 服务端：向客户端返回数据，可以被称之为响应报文

报文：可以简单理解为就是一堆字符串

2. 请求报文组成

  • 请求行
  • 请求头
  • 空行
  • 请求体

3. HTTP的请求行

  • 请求方法（get、post、put、delete等）

  • 请求 URL（统一资源定位器）

    例如：www.baidu.com:80/index.html?…

    • http： 协议(https、ftp、ssh等)
    • www.baidu.com 域名
    • 80 端口号
    • /index.html 路径
    • a=100&b=200 查询字符串
    • #logo 哈希（锚点链接）

  • HTTP协议版本号

4. HTTP请求头

格式：『头名：头值』

常见的请求头有：

请求头解释
Host主机名
Connection连接的设置keep-live(保持连接)；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

      还有一些状态码，参考：developer.mozilla.org/zh-CN/docs/…

    • OK：响应状态描述

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

  • 响应头

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

  • 空行

  • 响应体

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

7. 创建HTTP服务

使用nodejs创建HTTP服务

7-1 操作步骤

//1. 导入 http 模块
const http = require('http');
//2. 创建服务对象 create 创建 server 服务
// request 意为请求. 是对请求报文的封装对象, 通过 request 对象可以获得请求报文的数据
// response 意为响应. 是对响应报文的封装对象, 通过 response 对象可以设置响应报文
const server = http.createServer((request, response) => {
response.end('Hello HTTP server');
});
//3. 监听端口, 启动服务
server.listen(9000, () => {
console.log('服务已经启动, 端口 9000 监听中...');
});

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

7-2 测试

浏览器请求对应端口

http://127.0.0.1:9000

7-3 注意事项

  1. 命令行 Ctrl + c停止服务

  2. 当服务启动后，更新代码必须重启服务后才能生效

  3. 响应内容中文乱码的解决办法

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

  4. 端口号被占用

    Error: listen EADDRINUSE: address already in use :::9000
    1. 关闭当前正在运行监听端口的服务 （ 使用较多 ）
    2. 修改其他端口号

  5. HTTP 协议默认端口是 80 。HTTPS 协议的默认端口是 443, HTTP 服务开发常用端口有 3000， 8080，8090，9000 等

如果端口被其他程序占用，可以使用 资源监视器 找到占用端口的程序，然后使用 任务管理器 关闭 对应的程序

8. 浏览器查看HTTP报文

点击步骤

1699858695353.png

8-1 查看请求行和请求头

1699858742369.png

8-2 查看请求体

1699858763183.png

8-3 查看URL查询字符串

1699858797948.png

8-4 查看响应行与响应头

1699858852720.png

8-5 查看响应体

1699858882619.png

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(){});

注意事项：

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

9-1. 练习

按照以下要求搭建 HTTP 服务

请求类型（方法）请求地址响应体结果
get/login登录页面
get/register注册页面
//1、引入http模块
const http = require("http");
//2、建立服务
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(pathname === "/register" && method == "GET"){
response.end("注册页面");
}else if(pathname==="/login" && method == "GET"){
response.end("登录页面");
}else{
response.end("<h1>404 Not Found</h1>")
}
});
//3、监听端口
server.listen(8000,()=>{
console.log('服务启动中....');
})

10. 设置HTTP响应报文

作用语法
设置响应状态码response.statusCode
设置响应状态描述response.statusMessage （ 用的非常少 ）
设置响应头信息response.setHeader('头名', '头值')
设置响应体response.write('xx')
response.end('xxx')
write 和 end 的两种使用情况：
//1. write 和 end 的结合使用 响应体相对分散
response.write('xx');
response.write('xx');
response.write('xx');
response.end(); //每一个请求，在处理的时候必须要执行 end 方法的
//2. 单独使用 end 方法 响应体相对集中
response.end('xxx');

10-1. 练习

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

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

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

1699864433938.png

网页资源的加载都是循序渐进的，首先获取 HTML 的内容， 然后解析 HTML 在发送其他资源的请求，如 CSS，Javascript，图片等。 理解了这个内容对于后续的学习与成长有非常大的帮助。

12. 静态资源服务

静态资源是指 内容长时间不发生改变的资源 ，例如图片，视频，CSS 文件，JS文件，HTML文件，字体文 件等

动态资源是指 内容经常更新的资源 ，例如百度首页，网易首页，京东搜索列表页面等

12-1. 网站根目录或静态资源目录

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

思考：vscode 中使用 live-server 访问 HTML 时， 它启动的服务中网站根目录是谁？(其实就是你使用vscode打开的当前文件夹)

12-2. 网页中的URL

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

12-2-1 绝对路径

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

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

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

例如当前网页 url 为 www.atguigu.com/course/h5.h…

形式最终的URL
./css/app.csswww.atguigu.com/course/css/…
js/app.jswww.atguigu.com/course/js/a…
../img/logo.pngwww.atguigu.com/img/logo.pn…
../../mp4/show.mp4www.atguigu.com/mp4/show.mp…
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 类型，浏览器会根据该类型决定如何处理资源

下面是常见文件对应的 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 类型，浏览器在遇到该类型的响应时，会对响应体内容进行独立存储，也就是我们常见的 下载 效果

//导入 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) => {
    // 获取请求URL的路径
    let { pathname } = new URL(request.url, 'http://127.0.0.1');

    // 指定网站根目录
    let root = __dirname + 'page';
    // 拼接文件路径
    let filePath = root + pathname;

    // 读取文件，fs 异步
    fs.readFile(filePath, (err, data) => {
        if (err) {
            response.statusCode = 500;
            response.setHeader('content-type', 'text/html;charset=utf-8'); //设置响应头
            response.end('文件读取失败');
            return
        }
        // 获取文件的后缀名
        let ext = path.extname(filePath).slice(1);
        // 获取对应的类型
        let type = mimes[ext];
        if(type) {
            // 匹配到了            
            response.setHeader('content-type', type);
        }else {
            // 没有匹配到
            response.setHeader('content-type', 'application/octet-stream');
        }
        // 响应文件内容
        response.end(data);
    })
});
//监听端口, 启动服务
server.listen(9000, () => {
    console.log('服务已经启动....')
});

注意：虽然浏览器会自动识别响应体的mime类型，但是在代码中写了会更加规范一些。

解决乱码问题

只需在上面代码中的setHeader中拼接上字符集charset=utf-8

response.setHeader('content-type', type + ';charset=utf-8');

补充

  1. 在HTML的标签meta中也可以设置字符集，那么就产生了一个问题：设置响应头中的字符集和html中meta标签的字符集，哪个优先级更高？

    经过验证，设置响应头中的字符集优先级高于meta标签字符集。

  2. 大多数网站的相应的静态资源中，html类型的都是有字符集，而其他类型如css、js等文件都没有在响应头中设置字符集，这是因为尽管这些文件中会有中文，但是回到html页面中都会执行html中的字符集。故我们通常只需给html类型的响应文件设置字符集：

    // 匹配到了
if(ext === 'html') {
   response.setHeader('content-type', type + ';charset=utf-8');
} else {
   response.setHeader('content-type', type);
}

12-4. 完善错误处理

在访问静态资源时，有时会出现以下几种错误，我们可以通过返回的错误码处理

  1. 未找到文件：ENOENT
  2. 禁止访问: EPERM
  3. 请求方式错误(非GET)
  4. 未知错误
//创建服务对象
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 filePath = root + pathname;

    // 读取文件，fs 异步
    fs.readFile(filePath, (err, data) => {
        if (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) {
            // 匹配到了            
            response.setHeader('content-type', type);
        }else {
            // 没有匹配到
            response.setHeader('content-type', 'application/octet-stream');
        }
        // 响应文件内容
        response.end(data);
    })
});

13. GET和POST请求

13-1. 场景小结

GET请求的情况：

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

POST请求的情况

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

13-2. GET和POST请求的区别

GET 和 POST 是 HTTP 协议请求的两种方式。主要有如下几个区别：

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