尚硅谷最新Node.js 学习笔记（二）

目录

五、HTTP协议

5.1、概念

5.2、请求报文的组成

5.3、HTTP 的请求行

5.4、HTTP 的请求头

5.5、HTTP 的请求体

5.6、响应报文的组成

5.7、创建HTTP服务

操作步骤

测试

注意事项

5.8、浏览器查看 HTTP 报文

查看请求行和请求头

查看请求体

查看URL查询字符串

查看响应行和响应头

查看响应体

5.9、获取HTTP请求报文

5.10、设置HTTP响应报文

5.11、网页资源的基本加载过程

5.12、静态资源服务

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

网页中的URL

绝对路径

相对路径

网页中使用 URL 的场景小结

设置资源类型（mime类型）

GET 和 POST 请求场景小结

5.13、GET和POST请求的区别

五、HTTP协议

5.1、概念

HTTP（hypertext transport protocol）协议；中文叫超文本传输协议
是一种基于TCP/IP的应用层通信协议
这个协议详细规定了 浏览器 和万维网 服务器 之间互相通信的规则。
协议中主要规定了两个方面的内容

  • 客户端：用来向服务器发送数据，可以被称之为请求报文
  • 服务端：向客户端返回数据，可以被称之为响应报文
报文：可以简单理解为就是一堆字符串

5.2、请求报文的组成

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

5.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协议版本号

5.4、HTTP 的请求头

格式：『头名：头值』

常见的请求头有：

5.5、HTTP 的请求体

请求体内容的格式是非常灵活的，

（可以是空）==> GET请求，

（也可以是字符串，还可以是JSON）===> POST请求

例如：

  • 字符串：keywords=手机&price=2000
  • JSON：{"keywords":"手机","price":2000}

5.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。

5.7、创建HTTP服务

操作步骤

//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 请求的时候，就会执行。

测试

浏览器请求对应端口

http://127.0.0.1:9000

注意事项

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

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

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

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

4. 端口号被占用

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

5.8、浏览器查看 HTTP 报文

点击步骤

查看请求行和请求头

查看请求体

查看URL查询字符串

查看响应行和响应头

查看响应体

5.9、获取HTTP请求报文

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

//1. 导入 http 模块
const http = require('http');
//2. 创建服务对象 create 创建 server 服务
// request 意为请求. 是对请求报文的封装对象, 通过 request 对象可以获得请求报文的数据
// response 意为响应. 是对响应报文的封装对象, 通过 response 对象可以设置响应报文
const server = http.createServer((request, response) => {
    // 获取请求的方法类型
    console.log(request.method);
    // 获取请求的url
    console.log(request.url);
    // 获取http协议的版本号
    console.log(request.httpVersion);
    // 获取http的请求头
    console.log(request.headers);
    // 单独获取http请求头的某个信息值
    console.log(request.headers.host);
    response.end('Hello HTTP server'); // 设置响应体
});
//3. 监听端口, 启动服务
server.listen(9000, () => {
    console.log('服务已经启动, 端口 9000 监听中...');
});

注意事项：

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

5.10、设置HTTP响应报文

//1. 导入 http 模块
const http = require('http');
//2. 创建服务对象 create 创建 server 服务
// request 意为请求. 是对请求报文的封装对象, 通过 request 对象可以获得请求报文的数据
// response 意为响应. 是对响应报文的封装对象, 通过 response 对象可以设置响应报文
const server = http.createServer((request, response) => {
    // 设置响应状态码
    response.statusCode = 404;
    // 设置响应状态的描述
    response.statusMessage = 'I love you';
    // 设置响应头
    response.setHeader('key1','value1');
    response.setHeader('key2','value2');
    // 设置响应体
    response.end('Hello HTTP server');
});
//3. 监听端口, 启动服务
server.listen(9000, () => {
    console.log('服务已经启动, 端口 9000 监听中...');
});

5.11、网页资源的基本加载过程

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

5.12、静态资源服务

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

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

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

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

网页中的URL

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

绝对路径

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

相对路径

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

例如当前网页 url 为 http://www.atguigu.com/course/h5.html

网页中使用 URL 的场景小结
  • a 标签 href
  • link 标签 href
  • script 标签 src
  • img 标签 src
  • video audio 标签 src
  • form 中的 action
  • AJAX 请求中的 URL

设置资源类型（mime类型）

媒体类型（通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 ）是一种标准，用来表示文档、文件或字节流的性质和格式。

mime 类型结构： [type]/[subType]
例如： text/html text/css image/jpeg image/png application/json

HTTP 服务可以设置响应头 Content-Type 来表明响应体的 MIME 类型，浏览器会根据该类型决定如何处理资源。

下面是常见文件对应的 mime 类型

对于未知的资源类型，可以选择 application/octet-stream 类型，浏览器在遇到该类型的响应时，会对响应体内容进行独立存储，也就是我们常见的 下载 效果

GET 和 POST 请求场景小结

GET 请求的情况：

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

POST 请求的情况：

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

5.13、GET和POST请求的区别

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/387264.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

如何在Django中使用分布式定时任务并结合消息队列

如何在Django中使用分布式定时任务并结合消息队列

如何在Django中使用分布式定时任务并结合消息队列 如何在Django中使用分布式定时任务并结合消息队列项目背景与意义实现步骤1. 安装Celery和Django-celery-beat2. 配置Celery3. 配置Django-celery-beat4. 定义定时任务5. 启动Celery worker 和 beat6. Celery 指令7. 对接消息队…
阅读更多...
ClickHouse--08--SQL DDL 操作

ClickHouse--08--SQL DDL 操作

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 SQL DDL 操作1 创建库2 查看数据库3 删除库4 创建表5 查看表6 查看表的定义7 查看表的字段8 删除表9 修改表9.1 添加列9.2 删除列9.3 清空列9.4 给列修改注释9.5 修…
阅读更多...
基于LightGBM的回归任务案例

基于LightGBM的回归任务案例

在本文中，我们将学习先进的机器学习模型之一：Lightgbm。在对XGB模型进行了越来越多的改进以获得更好的性能之后，XGBoost是一种极限梯度提升机器，但通过lightgbm，我们可以在没有太多计算的情况下实现类似或更好的结果&a…
阅读更多...
对（一维）数组与指针的深入理解（1）

对（一维）数组与指针的深入理解（1）

目录 1.数组名的理解2.使用指针访问&#xff08;一维&#xff09;数组3.&#xff08;一维&#xff09;数组传参的本质 1.数组名的理解 以前我们在使用指针访问数组内容时&#xff0c;有这样的代码&#xff1a; #include <stdio.h>int main() {int arr[10] { 1,2,3,4,5…
阅读更多...
CTF-web 之 burp suite 使用

CTF-web 之 burp suite 使用

burp suite 使用 一般其是作为一个辅助工具&#xff0c;直接使用来解题的部分是少数&#xff0c;我们可以使用它来观察请 求和响应&#xff0c;并且可以反复的提交&#xff0c;关键的是他还带有很多其他的功能&#xff0c;在我们做题的过程中&#xff0c; 使用的关键点包括&…
阅读更多...
C++LNK1207中的 PDB 格式不兼容；请删除并重新生成

C++LNK1207中的 PDB 格式不兼容；请删除并重新生成

在打开别人发的C文件时&#xff0c;可能出现该报错 解决办法 打开资源管理器&#xff0c;找到原来的路径 进入Debug&#xff0c; 找到对应的PDB文件删除即可。
阅读更多...
OpenAI ChatGPT 记忆功能怎么实现？

OpenAI ChatGPT 记忆功能怎么实现？

你的聊天助手现在能“记住”你的对话了&#xff01; 2月14日凌晨&#xff0c;OpenAI宣布正在测试ChatGPT的新功能——记住用户提问内容&#xff0c;并自由控制内存。这意味着&#xff0c;ChatGPT能帮你记住那些重要的聊天内容&#xff0c;让你的对话更流畅、更自然。 想象一下…
阅读更多...
政安晨：【示例演绎】【用TensorFlow编写线性分类器】—— 同时了解一点TensorFlow与Keras的基本概念

政安晨：【示例演绎】【用TensorFlow编写线性分类器】—— 同时了解一点TensorFlow与Keras的基本概念

环境准备 如果小伙伴们第一次接触TensorFlow与Keras&#xff0c;可以先看一下我的这篇文章做些环境准备&#xff08;可以先忽略这篇文章里面代码实现部分&#xff0c;仅查看这里的环境准备部分即可&#xff09;。 文章如下&#xff1a; 政安晨&#xff1a;【详细解析】【用T…
阅读更多...
Ps：焦点堆栈

Ps：焦点堆栈

焦点堆栈 Focus Stacking是一种摄影和图像处理技术&#xff0c;通过合并多张在不同焦距拍摄的照片来创建一张具有更大景深的图像&#xff0c;特别适用于微距摄影、风景摄影和任何需要在整个场景中保持尖锐对焦的情况。 ◆ ◆ ◆ 拍摄注意事项 1、使用三脚架 为了确保图像之间…
阅读更多...
Spring 事务原理总结四

Spring 事务原理总结四

作为一名认知有限的中国人&#xff0c;我对年的喜爱&#xff0c;胜过其他一切&#xff0c;因为它给了我拒绝一切的合理理由。每到这个时候&#xff0c;我都会用各种理由来为自己的不作为开脱&#xff0c;今年亦是如此。看着频频发出警报的假期余额&#xff0c;我内心的焦躁变得…
阅读更多...
VSCode无法连接远程服务器的两种解决方法

VSCode无法连接远程服务器的两种解决方法

文章目录 VSCode Terminal 报错解决方式1解决方式2you are connected to an OS version that is unsupported by Visual Studio Code解决方法 VSCode Terminal 报错 直接在terminal或cmd中使用ssh命令可以连接服务器&#xff0c;但是在vscode中存在报错&#xff0c;最后一行为…
阅读更多...
第12讲创建图文投票实现

第12讲创建图文投票实现

创建图文投票实现 图文投票和文字投票基本一样&#xff0c;就是在投票选项里面&#xff0c;多了一个选项图片&#xff1b; <view class"option_item" v-for"(item,index) in options" :key"item.id"><view class"option_input&qu…
阅读更多...
第13章 网络 Page724 asio定时器

第13章 网络 Page724 asio定时器

程序代码&#xff1a; 11行&#xff0c;声明一个ios对象 13行&#xff0c;使用ios对象作为参数声明一个定时器&#xff0c;此时&#xff0c;定时器和ios完成了关联&#xff0c;后面定时器如果有任务的话&#xff0c;就可以将任务交给ios 16行&#xff0c;为定时器设置一个定…
阅读更多...
Vue3+Vite+TS+Pinia+ElementPlus+Router+Axios创建项目

Vue3+Vite+TS+Pinia+ElementPlus+Router+Axios创建项目

目录 初始项目组成1. 创建项目1.1 下载项目依赖1.2 项目自动启动1.3 src 别名设置vite.config.ts配置文件tsconfig.json配置若新创项目ts提示1.4 运行测试2. 清除默认样式2.1 样式清除代码下载2.2 src下创建公共样式文件夹`style`2.3 main.js中引入样式2.4 安装`sass`解析插件2…
阅读更多...
Unity（单元测试）在STM32上的移植与应用

Unity（单元测试）在STM32上的移植与应用

概述 Unity Test是一个为C构建的单元测试框架。本文基于STM32F407为基础&#xff0c;完全使用STM32CubeIDE进行开发&#xff0c;移植和简单使用Unity。 单片机型号&#xff1a;STM32F407VET6 软件&#xff1a;STM32CubeIDE Version: 1.14.1 Unity Version&#xff1a;2.…
阅读更多...
小结与数字的魅力的开篇

小结与数字的魅力的开篇

小结 本系列主要介绍了一些排序算法&#xff0c;包括冒泡排序、快速排序、直接插入排序、希尔排序、简单选择排序、堆排序、归并排序、计数排序、桶排序和基数排序。 排序算法本身并不难&#xff0c;但其涉及的知识点却星罗棋布&#xff0c;其变化莫测的思路更让人难以捉摸&am…
阅读更多...
【数据结构】哈希桶封装出map和set

【数据结构】哈希桶封装出map和set

利用之前的哈希桶封装出unordered_map和unordered_set。 这个封装并不简单&#xff0c;迭代器的使用&#xff0c;模板参数的繁多&#xff0c;需要我们一层一层封装。 map是一个k - v类型&#xff0c;set是k类型&#xff0c;那么就明确了如果需要封装&#xff0c;底层的tables…
阅读更多...
Python算法探索：从经典到现代（三）

Python算法探索：从经典到现代（三）

一、引言 随着信息技术的飞速发展&#xff0c;数据已经成为现代社会不可或缺的资源。Python&#xff0c;作为数据处理和分析的利器&#xff0c;为我们提供了大量强大的库和工具&#xff0c;用于从经典到现代的各种算法探索。本文将带你领略Python在算法领域的魅力&#xff0c;从…
阅读更多...
OpenAI宣布ChatGPT新增记忆功能；谷歌AI助理Gemini应用登陆多地区

OpenAI宣布ChatGPT新增记忆功能；谷歌AI助理Gemini应用登陆多地区

&#x1f989; AI新闻 &#x1f680; OpenAI宣布ChatGPT新增记忆功能&#xff0c;可以自由控制内存&#xff0c;提供个性化聊天和长期追踪服务 摘要&#xff1a;ChatGPT新增的记忆功能可以帮助AI模型记住用户的提问内容&#xff0c;并且可以自由控制其内存。这意味着用户不必…
阅读更多...
mysql5.6安装---windows版本

mysql5.6安装---windows版本

安装包下载 链接&#xff1a;https://pan.baidu.com/s/1L4ONMw-40HhAeWrE6kluXQ 提取码&#xff1a;977q 安装视频 1.解压完成之后将其放到你喜欢的地址当中去&#xff0c;这里我默认放在了D盘&#xff0c;这是我的根目录 2.配置环境变量 我的电脑->属性->高级->环境…
阅读更多...
最新文章

Copyright @ 2022~2023