Node.js全栈指南:认识MIME和HTTP

陈随易

MIME,全称 “多用途互联网邮件扩展类型”。

这名称相当学术,用人话来说就是:

我们浏览一个网页的时候,之所以能看到 html 文件展示成网页,图片可以正常显示,css 样式能正常影响网页效果,js 脚本可以正常运行,视频可以正常播放,字体可以自定义,都跟 MIME 有着密不可分的关系。

当我们引入 CSS 的时候,会写一个 type=“text/css”

<link rel="stylesheet" type="text/css" href="./index.css" />

当我们引入 JS 的时候,会写一个 type=“text/javascript”

<script type="text/javascript" src="./index.js"></script>

这就是 MIME 类型。

对于浏览器来说,它从服务器拿到的资源,不管是 CSS 还是 JS 还是 HTML,都是一串字符串。

要让 CSS、JS、HTML 各司其职,做好它该做的事情,就要用 MIME 来进行判断。

当我们从服务器发起一个 HTTP 请求,那么 HTTP 返回的 Content-Type 属性,就对应了我们说到的这个 MIME 类型。

picture 0

以上动图,每个请求文件都有其对应的 Content-Type 属性和值,不同的文件值不一样。

我们能够看到一个个正常的网页,就是通过 Content-Type 来决定请求的文件如何渲染,如何执行,如何显示的。

picture 1

但是,在上一章【浏览器显示一个网页】中,我们并没有看到返回 Contnet-Type 属性,网页也能正常显示,这是为什么呢?

因为,经过这么多年的发展,现代浏览器已经具备较好的容错能力,即使在某些情况下 MIME 类型缺失或错误,它们也能够根据上下文推断资源类型并正确解析。

picture 2

picture 3

如果我们明确设置资源的 Content-Type 值,比如上方截图中,将 CSS 的返回 MIME 类型 Content-Type 的值设置为 text/html,则 CSS 就会用 HTML 类型来解析,从而导致字体并没有变成红色。

这就是 MIME 的作用,我们要用 Node.js 开发一个 Web 框架,MIME 是必须要了解的一个内容。

不同的资源类型,要设置好正确的 MIME 类型。

那么接下来呢,我们再来讲一讲 HTTP,全称:超文本传输协议。

picture 4

如上图,浏览器向服务器发起一个 HTTP 请求,服务端则给浏览器返回对应的内容。

picture 5

HTTP 请求分为 4 部分,分别是请求行、请求头、空行、请求体。

HTTP 响应也凤尾 4 部分,分别是响应行、响应头、空行、响应体。

其实 HTTP 请求和响应是一样的,只不过名词不一样而已。

picture 6

如上图所示,我们通过浏览器的调试面板,可以看到请求和响应的具体内容。

其中 (1) 处是请求行,(2) 处是请求头,(3) 处是响应头。

picture 7

那么标头紧挨着的 “负载”,就是请求体。

picture 8

负载右边 “预览” 就是响应体。

picture 9

预览右侧的 “响应” 也是响应体,这是返回数据的原始格式,预览只是可以更方便地查看和操作响应体。

了解和认识 MIME 和 HTTP 请求,是 Web 全栈开发的前提和基础,下一节内容,我们继续完善 Web 框架,最终用我们自己写的 Web 框架,做一个前后分离的,个人博客项目。

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

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

相关文章

Arduino - 电磁锁

Arduino - Electromagnetic Lock Arduino - 电磁锁 The electromagnetic lock (EM lock) is widely used to lock the door. It is usually used with switch, fingerprint reader, RFID/NFC reader, keypad, or application on PC/mobille to control access to door, buid…

气膜体育馆对高度的要求—轻空间

在现代体育场馆的建设中&#xff0c;气膜体育馆以其独特的优势&#xff0c;逐渐成为人们关注的焦点。不同于传统的钢筋混凝土结构&#xff0c;气膜体育馆以其轻盈、灵活、环保的特点&#xff0c;为人们带来了全新的体育体验。在设计与建设气膜体育馆时&#xff0c;高度是一个关…

爬虫是什么?

目录 1.什么是互联网爬虫&#xff1f; 2.爬虫核心? 3.爬虫的用途? 4.爬虫分类&#xff1f; 5.反爬手段&#xff1f; 1.什么是互联网爬虫&#xff1f; 如果我们把互联网比作一张大的蜘蛛网&#xff0c;那一台计算机上的数据便是蜘蛛网上的一个猎物&#xff0c;而爬虫程序…

Hadoop简单应用程序实例

Hadoop是一个分布式系统基础架构&#xff0c;主要用于大数据的存储和处理。它允许使用简单的编程模型跨集群处理和生成大数据集。Hadoop主要由HDFS&#xff08;Hadoop Distributed FileSystem&#xff0c;分布式文件系统&#xff09;和MapReduce编程模型两部分组成。 准备工作…

第十节 动态面板实现推动和拉动效果

在原型设计中我们经常会遇到元件使用显示更多或者收起效果,下面以面板元件推动与拉动效果做案件说明。 一、设置原有内容 我这里添加一个表格内容,添加“显示更多”文本超链接 二、设置在更多显示面板内容 添加一个动态面板,设置有内容、无内容两个状态 在有内容面板中添…

TEMU半托管模式引领跨境电商新风尚

TEMU半托管模式作为2024年的热门话题&#xff0c;正吸引着越来越多卖家的目光。继全托管模式取得巨大成功之后&#xff0c;半托管模式的推出无疑为跨境电商行业注入了新的活力。 在选品方向上&#xff0c;TEMU半托管模式强调商品的聚焦与精选。卖家在选择上架商品时&#xff0c…

python AI全栈工程师

python AI全栈工程师 前端&#xff1a;Streamlit Streamlit是一个开源的Python库&#xff0c;专为数据科学家和机器学习工程师设计&#xff0c;用于快速构建交互式用户界面。Streamlit功能强大、易于使用&#xff0c;特别适合数据科学家和机器学习工程师快速构建和部署交互式数…

nodejs国内源下载

nodejs的官网下载太慢了 可以尝试网盘下载快一点 夸克网盘分享夸克网盘是夸克推出的一款云服务产品&#xff0c;功能包括云存储、高清看剧、文件在线解压、PDF一键转换等。通过夸克网盘可随时随地管理和使用照片、文档、手机资料&#xff0c;目前支持Android、iOS、PC、iPad。…

AI产品经理如何快速接手一个新产品?

我们到一家新的公司&#xff0c;往往都有现成的产品需要你熟悉&#xff0c;这个对你来说就是一个新产品。 又或者说&#xff0c;公司要搭建一个新的项目&#xff0c;让你负责&#xff0c;需要你从0开始去接手&#xff0c;最终去上线&#xff0c;去推广&#xff0c;去盈利&…

【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【14】缓存与分布式锁

持续学习&持续更新中… 守破离 【雷丰阳-谷粒商城 】【分布式高级篇-微服务架构篇】【14】缓存与分布式锁 缓存本地缓存分布式缓存-本地模式在分布式下的问题分布式缓存整合 redis 作为缓存JMeter测试出OutOfDirectMemoryError【堆外内存溢出】 高并发读下缓存失效问题缓存…

基于YOLOv5+PyQT5的吸烟行为检测(含pyqt页面、模型、数据集)

简介 吸烟不仅对个人健康有害,也可能在某些特定场合带来安全隐患。为了有效地监控公共场所和工作环境中的吸烟行为,我们开发了一种基于YOLOv5目标检测模型的吸烟检测系统。本报告将详细介绍该系统的实际应用与实现,包括系统架构、功能实现、使用说明、检测示例、数据集获取…

UDS - 10.2 DiagnosticSessionControl (10) service

10.3 诊断会话控制(10)服务 来自:ISO 14229-1-2020.pdf 10.2.1 服务说明 DiagnosticsSessionControl服务用于在服务器中启用不同的诊断会话。 诊断会话启用服务器中的一组特定诊断服务和/或功能。该服务提供了服务器可以报告对启用的诊断会话有效的数据链路层特定参数值(…

ZAP安全扫描工具

下载地址: 去官网下载&#xff1a;https://www.zaproxy.org/download/ 1.主动扫描 需要登录的网站建议使用主动扫描 也可以绕过登录进行手动扫描 再选择手动扫描后 获取到对应的token 2.自动扫描 3.查看报告 4.扫描策略的使用

如何设计一门编程语言?

一、设计流程 步骤说明 确定语言目标和用途&#xff1a; 目标受众&#xff1a;确定是面向初学者、专业开发者还是特定领域专家。 主要用途&#xff1a;明确语言的主要用途&#xff0c;如系统编程、Web 开发、数据分析、科学计算等。 独特卖点&#xff1a;确定语言的独特优势…

【Day03】0基础微信小程序入门-学习笔记

文章目录 视图与逻辑学习目标页面导航1. 声明式导航2. 编程式导航3. 导航传参 页面事件1. 下拉刷新2. 上拉触底3.扩展-自定义编译模式 生命周期1. 简介2. 生命周期函数3. 应用的生命周期函数4. 页面生命周期函数 WXS脚本1. 概述2. 基础语法3. WXS的特点4. 使用WXS处理手机号 总…

Multisim详细安装过程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Multisim是什么&#xff1f;二、下载安装步骤1.下载安装包2.安装 总结 前言 对于很多学习电路&#xff0c;数电&#xff0c;模电的朋友&#xff0c;我们在…

入门JavaWeb之 Session 篇

Session&#xff1a; 服务器会给每个用户&#xff08;浏览器&#xff09;创建一个 Session 对象 一个 Session 独占一个浏览器&#xff0c;只要浏览器没有关闭&#xff0c;这个 Session 就存在 代码如下&#xff1a; package com.demo.cookie;import javax.servlet.Servlet…

WPF/C#:如何实现拖拉元素

前言 在Canvas中放置了一些元素&#xff0c;需要能够拖拉这些元素&#xff0c;在WPF Samples中的DragDropObjects项目中告诉了我们如何实现这种效果。 效果如下所示&#xff1a; 拖拉过程中的效果如下所示&#xff1a; 具体实现 xaml页面 我们先来看看xaml&#xff1a; <…

基于稀疏矩阵方法的剪枝压缩模型方案总结

1.简介 1.1目的 在过去的一段时间里&#xff0c;对基于剪枝的模型压缩的算法进行了一系列的实现和实验&#xff0c;特别有引入的稀疏矩阵的方法实现了对模型大小的压缩&#xff0c;以及在部分环节中实现了模型前向算法的加速效果&#xff0c;但是总体上模型加速效果不理想。所…

动手学深度学习(Pytorch版)代码实践 -计算机视觉-39实战Kaggle比赛:狗的品种识别(ImageNet Dogs)

39实战Kaggle比赛&#xff1a;狗的品种识别&#xff08;ImageNet Dogs&#xff09; 比赛链接&#xff1a;Dog Breed Identification | Kaggle 1.导入包 import torch from torch import nn import collections import math import os import shutil import torchvision from…