4、Node.js---HTTP协议

已于 2023-03-28 11:19:31 修改
阅读量199 收藏 1
点赞数
分类专栏： Node.js 文章标签： http 网络协议 网络
于 2023-03-19 13:35:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ezzbb/article/details/129647956
版权

（一）什么是HTTP协议？

超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议

 （二）请求报文结构

请求体有非空和空的

请求行 

1、 请求方法： 

2、URL：

（Uniform Resource Locator,统一资源定位器）

URL组成：协议名+主机名（定位网络上的计算机）+路径（定位服务器中的资源）

3、 HTTP版本号：

请求头

 1、键值对格式

2、主要记录了浏览器相关信息

3、User-Agent：记录浏览器的平台、版本号

4、Accept：浏览器能够处理的数据类型

5、Accept-Encoding：当前浏览器能支持浏览器的方式

6、Accept-Language：当前浏览器所支持的语言

7、Upgrade-Insecure-Request：升级HTTP为HTTPS提高安全性

HTTP 标头（header） - HTTP | MDN       （详细学习HTTP）

请求体

请求体的格式没有定义，用的比较多的是键值对（JSON格式）

（三）响应报文结构与响应行 

响应行结构：

 响应状态码： 

响应状态描述：基本和响应状态码对应 

HTTP 响应状态码 - HTTP | MDN   （陌生响应状态码可在此处查询）

响应头：

1、Server：记录服务器所使用的技术

2、Date：记录响应时间

3、Content-Type:声明响应体格式与字符集。（重要）

响应体： 

常见的响应体格式：

 扩展：

HTTP抓取工具：

Fiddler抓包工具简介，安装及使用教程详解_Sunny蔬菜小柠的博客-CSDN博客

==================================分隔线=================================

（一）创建HTTP服务端

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

//创建服务对象
const server = http.createServer((request,response)=>{
    response.end('Hello HTTP Server');//设置响应体
});

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

可以看到9000端口已经被node.js的脚本程序占用了，那么谁能给他发送请求呢？浏览器能！

（二）HTTP服务的注意事项：

找到被占用的端口，记住他的PID ，打开任务管理器

找到对应的PID，右击停止。

 （三）用过浏览器查看HTTP报文

网页右击检查

 写一个页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="http://127.0.0.1:9000/" method="post" >
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>
</body>
</html>

按提交就会跳转：http://127.0.0.1:9000/

 

源代码是这一串字符串 

（四）获取HTTP请求报文

 （五）提取URL中的路径（第一种方法）

//导入Http模块
const  http = require('http');
//1、导入url模块
const url = require('url');

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

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

提取URL中的路径（第二种方法）

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


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

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

HTTP请求联系

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

//创建服务对象
const server = http.createServer((request,response)=>{
  //获取请求方法
    let {method}= request;//解构赋值的方式，因为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') {
        response.end('注册页面');
    }else {
        response.end('Not Found')
    }
});

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

 （五）设置HTTP响应报文

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

//创建服务对象
const server = http.createServer((request,response)=>{
    //设置响应那个状态码
    response.statusCode=203;

    //设置响应状态的描述
    response.statusMessage='nihao'; //在一般状态下，响应状态描述一般跟响应码一一对应，所以这一块了解即可

    //响应头
    response.setHeader('content-type','text/html;charset=utf-8')
    //响应头还可以设置别的
    response.setHeader('Server','Node.js')//Server是用来标识服务端的名字
    //自定义响应头
    response.setHeader('myHeader','woshichengxuyuan')
    //设置多个同名响应头
    response.setHeader('test',['a','b','c']);

    //响应体设置
    response.write('nihao');//write方法可以多次调用，end方法只能有一个
    response.write('hello');
    response.end('Not Found')//设置响应体

});

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

 HTTP响应练习

js代码：

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

//创建服务对象
const server = http.createServer((request,response)=>{
    //读取文件内容
    let html= fs.readFileSync(__dirname+'/01.html')
    response.end(html)//设置响应体

});

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

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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>

 

练习：实现网页引入外部资源

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <link rel="stylesheet" href="01.css">
</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 src="01.js"></script>
</body>
</html>

css代码：

td{
    padding: 20px 40px;
}
table tr:nth-child(odd){
    background: #aef;
}
table tr:nth-child(even){
    background: #fcb;
}
table,td{
    border-collapse: collapse;
}

js代码：

//获取所有的td
let tds = document.querySelectorAll('td');
//遍历
tds.forEach(item =>{
    item.onclick = function(){
        this.style.background='#222'
    }
})

功能代码：

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

//创建服务对象
const server = http.createServer((request,response)=>{
    //获取请求url的路径
    let {pathname} = new URL(request.url,'http://127.0.0.1');
    if (pathname==='/'){
        //读取文件内容
        let html= fs.readFileSync(__dirname+'/01.html')
        response.end(html)//设置响应体
    }else  if(pathname==='/01.css'){
        //读取文件内容
        let css= fs.readFileSync(__dirname+'/01.css')
        response.end(css)//设置响应体
    }else if (pathname==='/01.js'){
        //读取文件内容
        let js= fs.readFileSync(__dirname+'/01.js')
        response.end(js)//设置响应体
    }else {
        response.statusCode=404
        response.end('<h1>404 Not Found</h1>')
    }


});

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

结果：

html响应html页面

 css响应css页面

js响应js页面

但是这种方法很麻烦，要写很多if-else，还有更好的方法吗？

 （六）用HTTP模块搭建静态资源服务

主要代码：

//导入Http模块
const  http = require('http');
const fs = require('fs')
//创建服务对象
const server = http.createServer((request,response)=>{
    //获取请求url的路径
    let {pathname} = new URL(request.url,'http://127.0.0.1');
    //拼接文件路径
    let filePath=__dirname+'/page'+pathname;
    // console.log(filePath)
    //读取文件fs 异步API
    fs.readFile(filePath,(err,data)=>{
        if (err){
            response.statusCode=500;
            response.end('读取失败');
            return;
        }
        //响应文件内容
        response.end(data)
    })

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

结果： 

（七） 网站根目录或静态资源目录

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

（八）网页URL之绝对路径

网页中的 URL 主要分为两大类：相对路径与绝对路径
绝对路径：
绝对路径可靠性强，而且相对容易理解，在项目中运用较多

 第一种和第三种用的比较多。

（八）网页URL之相对路径

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

 ./是当前文件夹，../是上一级目录

（九）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'

规范一点写法，但是没必要。

//导入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 filePath=__dirname+'/page'+pathname;

    //读取文件fs 异步API
    fs.readFile(filePath,(err,data)=>{
        if (err){
            response.statusCode=500;
            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('服务已启动')
});

（十）GET和POST的区别

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

GET和POST请求的区别  

GET 和 POST 是 HTTP 协议请求的两种方式。
  • 作用不同：GET 主要用来获取数据，POST 主要用来提交数据
  • 参数位置不同：GET 带参数请求是将参数缀到 URL 之后，在地址栏中输入 url 访问网站就是 GET 请求，POST 带参数请求是将参数放到请求体中
  • 安全性不同：POST 请求相对 GET 安全一些，因为在浏览器中参数会暴露在地址栏
  • GET 请求大小有限制，一般为 2K，而 POST 请求则没有大小限制
新新程序名媛
关注
专栏目录
在node中的http协议
weixin_43709908的博客
09-06 288
1.创建web服务器 在node.js中不需要安装额外的软件充当网站服务器，node.js中提供的http模块即可创建 创建一个服务器也很简单 2.http协议 HTTP：又称为超文本传输协议，用于从web服务器传输到超文本到本地浏览器的传送协议，基于客户端服务器架构工作。 1.请求报文 请求方式 请求地址 2.响应报文 http状态码 200 表示正常返回 404 表示...
关于HTTP协议，一篇就够了
wtwzd002的博客
04-13 575
HTTP简介 HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。它于1
node初级入门之搭建http服务器
ｎｅｗｘｃ
12-06 1623
前置知识： 了解IP地址和端口是什么 http请求的大致过程（这个建议买本《图解http》看看） http核心模块的使用 导入http模块 定义服务器程序端口 创建服务器对象 调用服务器的监听方法，让服务器监听浏览器需求 // 1、导入http模块 const http = require("http"); // 2、定义服务器程序端口 const port = 8080;// 端口号：1-65535 (有些服务已经有一些默认端口 apache nginx 80 web 服务。 My.
Node.js之HTTP服务端和客户端实现
qq_39545346的博客
01-12 1327
服务端 先来看一个简单的web服务器的实现： const http = require('http') const port = 3000 const server = http.createServer((req, res) => { res.statusCode = 200 res.setHeader('Content-Type', 'text/plain') res.end('你好世界\n') }) server.listen(port, () => { con
05-http模块
zyq的博客
04-15 625
2.代码更新问题，必须重新启动服务。nodemon可以解决这个问题，不需要频繁重新启动服务。引入多个资源文件时，必须根据需要请求的url路径做判断,响应对应文件。查找占用端口的程序的PID，然后使用任务管理器关闭对于的程序。HTTP开发常用端口3000,808,8090,900。1.HTTP服务在那个文件夹中寻找静态资源，那个人家就是。4.端口号被占用问题。响应一个4行3列的表格，并要求表格有。如果端口被其他程序占用，可以使用。5.HTTP默认端口80，长时间不发生变化的资源。长时间经常更新的资源。
Node.js--服务器
weixin_69356624的博客
04-28 4443
手写简单服务器 http核心模块(原生写法,服务器)、Express写法(服务器)、statusCode状态码、设置content-type与常见的几种类型 、托管静态资源
Node.js - 基本使用方法
weixin_56766611的博客
08-26 724
Node.js是一个跨平台JavaScript运行环境，使开发者可以搭建服务器端的JavaScript应用程序，主要是用Node.js编写服务器端程序，编写数据接口，提供网页资源浏览功能等，它是前端工程化的基础。
Node.js-目录穿越（CVE-2017-14849）
bqnagus
10-02 1259
Node.js 8.5.0 对⽬录进⾏normalize操作时出现了逻辑错误，导致向上层跳跃
node-v14.17.0-linux-x64.tar.gz
04-12
Node.js是一款基于Chrome V8引擎的JavaScript运行环境，它允许开发者在服务器端使用JavaScript进行开发，极大地扩展了JavaScript的应用范围。 描述中的信息与标题相同，再次确认了这是一个针对Linux平台的Node.js...
node-v14.15.1-win-x64
04-11
Node.js 是一个开源、跨平台的 JavaScript 运行环境，它允许开发者在服务器端执行 JavaScript 代码，从而扩展了 JavaScript 的应用范围，不再局限于浏览器端。 描述中的 "安全可靠" 提示我们这个版本的 Node.js ...
node.js官方v14.17.3-x64版本msi安装包【集成npm】
08-17
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许开发者在服务器端使用 JavaScript 进行编程。v14.17.3 是 Node.js 的一个稳定版本，针对 x64（64位）架构设计。集成的 npm (Node Package Manager)...
Node.js-proxy基于electron开发的内网穿透工具
08-10
Node.js-proxy作为一个HTTP工具，意味着它主要处理HTTP/HTTPS协议的网络请求。通过创建一个代理服务器，它可以转发公网上的请求到内网中的特定端口，同时将内网服务的响应转发回公网。这使得无论用户身在何处，只要...
node-v16.16.0-x64
08-13
4. **HTTP/3支持**：Node.js v16可能包含了对HTTP/3的支持，这是一种基于QUIC协议的互联网传输层协议，旨在提高网络速度和减少延迟。 5. **安全性**：每次版本更新都会包含安全修复，确保用户在使用过程中不会受到...
HTTP与HTTPS的区别
weixin_48602044的博客
11-01 1164
关于http与https的一些区别
网络--应用层协议--HTTP
最新发布
2302_80873119的博客
11-07 581
HTTP协议
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
长弓三石
11-04 770
在本系列的第21篇文章《鸿蒙网络编程系列21-使用HttpRequest上传任意文件到服务端示例》中，使用ArkTS语言基于API 9环境演示了文件上传功能的实现，本节将使用仓颉语言基于API 12环境实现类似的功能。
HTTP 协议
taduanlangan的博客
11-02 2185
HTTP 是超文本传输协议，它是互联网上应用最为广泛的一种协议，主要用于浏览器和 web 服务器之间的的数据传输。
压缩Minio桶中的文件为ZIP，并通过 HTTP 响应输出
qq_47910339的博客
11-07 247
压缩Minio桶中的文件为ZIP，并通过 HTTP 响应输出
【网络】HTTP（超文本传输协议）详解
人生苦短，睡觉要紧，睡醒再说
11-01 2027
HTTP是一种应用层协议，属于TCP/IP协议族。它的主要作用是允许客户端（如浏览器）通过网络向服务器请求资源，服务器再将资源返回给客户端。特点无状态：每个请求都是独立的，服务器不保存任何会话信息。这意味着每次请求都需要重新验证。灵活性：HTTP支持多种数据格式，包括文本、图像、音频和视频等，使其适用于各种应用场景。简洁性：HTTP请求和响应的格式简单易懂，便于开发和调试。
Erela.JS-Music-Bot：打造基于Lavalink的Discord音乐机器人
该音乐机器人使用JavaScript编写，依赖于Node.js环境运行，并且需要Java环境来运行Lavalink服务器。Lavalink是一个音乐节点服务器，用于提供音乐流服务。" 标题知识点: 1. Erela.JS-Music-Bot是一个开源项目，意味...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值