尚硅谷最新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);// 获取请求的urlconsole.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 请求则没有大小限制

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PHP脉聊交友系统网站源码,可通过广告变现社交在线聊天交友即时通讯APP源码,附带视频搭建教程

探索全新社交体验:一站式PHP交友网站解决方案 🌐 全球化交友,无界沟通 在数字化的浪潮下,社交已不再受地域限制。我们的PHP交友网站不仅支持多国语言,还配备了即时翻译功能,让您轻松跨越语言障碍&#xff…

编译OpenSSL时报错,Can‘t locate IPC/Cmd.pm in @INC

编译OpenSSL 3.0.1时报错,错误信息如下 解决方法: 安装perl-CPAN yum install -y perl-CPAN进入CPAN的shell模式,首次进入需要配置shell,按照提示操作即可(本人perl小白,全部选择默认配置,高…

python3 中try 异常调试 raise 异常抛出

一、什么是异常? 异常即是一个事件,该事件会在程序执行过程中发生,影响了程序的正常执行。 一般情况下,在Python无法正常处理程序时就会发生一个异常。 异常是Python对象,表示一个错误。 当Python脚本发生异常时我…

山脉的个数/攀登者

题目描述 攀登者喜欢寻找各种地图,并且尝试攀登到最高的山峰。 地图表示为一维数组,数组的索引代表水平位置,数组的元素代表相对海拔高度。其中数组元素0代表地面。 例如:[0,1,2,4,3,1,0,0,1,2,3,1,2,1,0],代表如下…

Github 2024-02-14 开源项目日报 Top9

根据Github Trendings的统计,今日(2024-02-14统计)共有9个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目4TypeScript项目1PowerShell项目1Java项目1JavaScript项目1Jupyter Notebook项目1非开发语言项目1Pyth…

Linux网络基础1

目录 计算机网络背景协议OSI七层模型TCP/IP五层(四层)模型网络传输基本流程以太网通信原理IP地址理解 计算机网络背景 到目前为止,我们之前所有的编程都是单机的,不是多机互联。以前计算机被发明的时候是为了军事用途&#xff0…

RAG (Retrieval Augmented Generation)简介

1. 背景 目前大模型很多,绝大部分大模型都是通用型大模型,也就是说使用的是标准的数据,比如wikipedia,百度百科,。。。。 中小型企业一般都有自己的知识库,而这些知识库的数据没有在通用型的大模型中被用到…

openGauss学习笔记-219 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-网络

文章目录 openGauss学习笔记-219 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-网络219.1 查看网络状况 openGauss学习笔记-219 openGauss性能调优-确定性能调优范围-硬件瓶颈点分析-网络 获取openGauss节点的CPU、内存、I/O和网络资源使用情况,确认这些资源…

C# CAD2016 宗地生成界址点,界址点编号及排序

1 、界址点起点位置C# CAD2016 多边形顶点按方向重新排序 2、 界址点顺时针逆时针走向 C# CAD2016 判断多边形的方向正时针或逆时针旋转 3、块文件插入 //已知块文件名称 GXGLQTC //块文件需要插入的坐标点 scaledPoint// 插入块到当前图纸中的指定位置ObjectId newBlockId;B…

重复导航到当前位置引起的。Vue Router 提供了一种机制,阻止重复导航到相同的路由路径。

代码&#xff1a; <!-- 侧边栏 --><el-col :span"12" :style"{ width: 200px }"><el-menu default-active"first" class"el-menu-vertical-demo" select"handleMenuSelect"><el-menu-item index"…

python-分享篇-五子棋

文章目录 代码效果 代码 """五子棋之人机对战"""import sys import random import pygame from pygame.locals import * import pygame.gfxdraw from checkerboard import Checkerboard, BLACK_CHESSMAN, WHITE_CHESSMAN, offset, PointSIZE 3…

JVM(1)基础篇

1 初始JVM 1.1 什么是JVM JVM 全称是 Java Virtual Machine&#xff0c;中文译名 Java虚拟机。JVM 本质上是一个运行在计算机上的程序&#xff0c;他的职责是运行Java字节码文件。 Java源代码执行流程如下&#xff1a; 分为三个步骤&#xff1a; 编写Java源代码文件。 使用…

Android实现底部导航栏方法(Navigation篇)

Navigation实现底部导航栏 前言导入和基本使用导入基础使用创建nav文件编辑Nav文件添加页面&#xff08;代码版&#xff09;添加页面&#xff08;图解版&#xff09; 创建导航动作 action创建action&#xff08;代码版&#xff09;创建action&#xff08;图解版&#xff09; 编…

「C++ 类和对象篇 12」static成员

目录 一、static成员是什么&#xff1f; 二、为什么需要static成员&#xff1f; 三、怎么使用static成员&#xff1f; 1. 定义static成员变量 2. 定义static成员函数 3. 访问static成员 四、特性 【面试题】 【总结】 一、static成员是什么&#xff1f; 被static修饰的类成…

品牌之门:概率与潜力的无限延伸

在品牌的世界里&#xff0c;每一个成功的推广都像是打开一扇门&#xff0c;从未知走向已知&#xff0c;从潜在走向显现。这扇门&#xff0c;既是品牌的起点&#xff0c;也是品牌发展的无限可能。 品牌&#xff0c;就像一扇紧闭的门&#xff0c;它静静地矗立在那里&#xff0c;…

微信强制分享红包裂变系统源码

这是一款新型的微信裂变引流系统源码&#xff0c;支持试看、直播、朋友圈转发、分享任务、 邀请入群、群聊、红包等多种裂变引流方式&#xff0c;让你的广告流量引流、吸粉变现更加高效。 该系统源码还优化了整个页面&#xff0c;减少了繁重多余的代码&#xff0c;让访问速度…

【51单片机】直流电机驱动(PWM)(江科大)

1.直流电机介绍 直流电机是一种将电能转换为机械能的装置。一般的直流电机有两个电极,当电极正接时,电机正转,当电极反接时,电机反转 直流电机主要由永磁体(定子)、线圈(转子)和换向器组成 除直流电机外,常见的电机还有步进电机、舵机、无刷电机、空心杯电机等 2.电机驱动…

对(一维)数组与指针的深入理解(1)

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

详解Qt多线程(包含:什么是CPU,单核处理器和多核处理器,举餐厅和QQ音乐的例子详解进程和线程,Qt多线程案例)

目录 一.什么是CPU&#xff1f;二.单核处理器与多核处理器三.什么是进程和线程&#xff1f;3.1 定义3.2 以餐厅为例子解释进程和线程3.2 以QQ音乐为例子&#xff0c;解释QQ音乐里面的进程和线程 四.Qt中的多线程五.Qt多线程案例任务描述案例演示设置显示内容的字体大小和位置运…

pands常用操作

1.导入库和文件读取和文件分信息分析 import pandas as pd import numpy as np csvf pd.read_csv(D:/各个站程序版本说明.csv) csvf.info() <class pandas.core.frame.DataFrame> RangeIndex: 51 entries, 0 to 50 Data columns (total 6 columns):# Column Non-Nul…