前端网络基础

news2024/12/25 9:22:55

目录

  • 网络分层模型
    • OSI七层模型
    • TCP/IP四层模型
    • TCP/IP五层模型
  • HTTP
    • 传递消息的模式
    • 传递消息的格式
    • 响应码
  • URL
  • 用户代理/user agent
    • 自动发送请求
    • 自动解析响应
  • AJAX
    • XHR
    • Fetch
  • 跨域
    • 同源与异源
    • 网络通信中的跨域
    • 浏览器对跨域的限制
    • CORS
      • 简单请求
        • 对简单请求的验证
      • 预检请求
        • 对预检请求的验证
    • JOSNP
    • 代理
  • GET与POST
  • 结尾
    • 本博客依据独一教育前端web大师课撰写

网络分层模型

分层是为了将复杂问题简单化,网络要解决的复杂问题是:两个程序之间的数据交换
分层之后,每一层都只用解决自己的问题,每层也相对独立
每层都有不同的解决方案选择,使用不同的方案也会对上下层抉择产生一定的影响
每一层在传递数据时都会往数据中增加一些额外信息

OSI七层模型

ISO组织提出的互联网模型,一共有七层,从下到上分别为物理层,数据链路层,网络层,传输层,会话层,表示层,应用层
OSI模型的出现极大地推进了网络标准化的进程,但因其分层太过复杂所以在实际应用中并不常见

OSI七层模型

TCP/IP四层模型

除了标准的OSI七层模型外还有TCP/IP四层模型
从下到上分别为物理层,网络层,传输层,应用层
相较于OSI七层模型,它将物理层和数据链路层合并为物理层,将应用层,表示层,会话层合并为应用层,简化了模型的复杂度

TCP/IP四层模型

TCP/IP五层模型

综合了OSI模型TCP/IP四层模型的优点,将应用层,表示层,会话层进行合并,并且对物理层进行拆分
从下到上分别为:物理层,数据链路层,网络层,传输层,应用层

TCP/IP五层模型

HTTP

超文本传输协议,是整个互联网通信的基础
该协议规定了两个方面的内容

传递消息的模式

通过请求-响应的模式
发起请求的一端被称为客户端
接受请求的一端被称为服务端
请求-响应完成后意味着这一次交互结束

传递消息模式

传递消息的格式

HTTP的消息格式为纯文本格式,文本包含三个部分,这里主要了解请求

  1. 行/Line
    在请求行中主要包含三个部分

    1. 请求方法
      getpostputdelete等等
      HTTP协议中,请求方法仅有语义的区别,如GET表达了客户端想要获取一些东西,POST表达了客户端想要提交一些东西
    2. 地址
      表明在此URL上你想要访问那些资源
    3. 协议版本
      为使用的http协议版本

    以下为一个最基本的请求行

GET / HTTP/1.1
  1. 头/Header
    采用键值对的形式
    常见的字段

    1. Host 对方的主机域名
    2. Content-Type 用于规定请求体里的格式
      注意:这里的值需要查看接口文档,必须是服务端能接受的格式
    3. Cookie 用于发送cookie信息
    4. User-Agent 标识客户端代理名称和版本号

    以下一个简单的请求头

Host: www.baidu.com
Content-Type: application/josn
  1. 体/Body
    存放需要发送往服务端的数据,数据的格式由请求头的Content-Type决定
    注意,无论是否需要请求体,在请求头后面都需要换行两次

注意:application/json 字符串被称为MIME标准格式的字符串
常见MIME字符串如下

  1. application/josn 代表了会传送json数据
  2. application/javascript 代表了会传送JavaScript数据
  3. text/html 代表了会传送一个html数据
  4. text/css 代表了会传送一个css数据
  5. text/plain 代表了会传送一个文本数据
  6. img/png 代表了会传送一个图片数据

VSCode中有一个插件可以不用通过浏览器就能发送http请求
插件

响应码

客户端向服务端发送请求后会得到服务端的响应,其中响应码代表了这次交互的状态

  1. 200:一切正常
  2. 301:资源被永久重定向
    新的地址将会放在响应头的Location中
  3. 302:资源被临时重定向
    新的地址通样会被放入到响应头的Location中
  4. 304:文档内容未修改
    内容未改变,不会返回资源,需要客户端从缓存中提取
  5. 400:语法错误
    通常会返回一个错误信息,告知客户端出现了什么问题
  6. 403:服务端拒绝执行
    通常是无访问权限
  7. 404:资源不存在
  8. 500:服务器内部错误

URL

被称为统一资源定位符,是互联网上用于指定资源的地址,URL由多部分组成
他表明了从网络中哪台计算机(domain)中的哪个程序(port)寻找哪个资源(path),并注明了获取资源的具体细节(query),以及要用什么样的协议通信(schema)

  1. 协议/schema
    即访问这个资源所需要的协议,如httpftp等等

  2. 主机名/domain
    即域名或者ip地址,如www.baidu.com192.168.1.1等等

  3. 端口/port
    即访问这个资源需要连接哪个端口不同服务都会开设不同端口
    端口号是无意义的,访问资源时需要查看接口文档
    http协议默认端口号是80,https默认端口号是443

  4. 路径/path
    即资源在服务端的具体路径
    注意,这里的路径和服务端文件具体存放路径并不对应,路径中访问的index.html之类的文件在服务端有时也并不存在,具体什么路径能拿到哪些资源需要查看接口文档

  5. 查询参数/query
    即访问这个资源时需要传递的参数
    使用?开头;分隔,以属性名=属性值的形式传递在URL上

  6. 锚点/hash
    即页面内部的锚点,用于页面内部的快速跳转
    使用#开头
    URL

用户代理/user agent

浏览器可以代替用户完成http请求,代替用户解析响应结果

自动发送请求

当用户进行了一些操作后,浏览器会自动发送http请求

  1. 当用户点击了a元素后
    浏览器拿到a元素的href地址,并发出一个GET请求,同时抛弃此页面
  2. 当用户点击了表单中的button元素时
    浏览器获取button元素存在的form表单获取它的action属性,并依据method属性中规定的请求方法携带着form表单中的数据发出请求
  3. 当浏览器解析遇到了link,img,script,video等元素时
    会向他们定好的地址发送GET请求
  4. 当用户在地址栏键入了URL地址时
    会向当前地址发送GET请求并抛弃此页面
  5. 当用户点击刷新时
    浏览器会向当前地址重新发送一遍与上一次一样的请求,并同时抛弃此页面

自动解析响应

在得到响应结果时,浏览器也会自动进行解析

  1. 处理响应码
    浏览器会自动识别响应码并自动完成对应的处理
  2. 解析响应数据
    浏览器能自动根据Content-Type里规定的值来对响应体进行解析运行
    例如application/javascript浏览器就会使用js引擎执行
    text/plain浏览器就会原封不动的放入页面中
    具体可查看我上文写的MIME字符串部分

AJAX

AJAX指在浏览器中异步向服务端发送请求
他有两种实现方式

XHR

具体可看我这篇关于XHR的文章
(未动笔,未来可寄)

Fetch

具体可看我这片关于Fetch的文章
(未动笔,未来可寄)

跨域

当一个向另一个发出通信请求时,同源策略就会对这个通信做出不同程度的限制
由此限制产生的问题就叫做跨域

同源与异源

同源是指协议、域名、端口全部相同的两个 URL,它们之间的交互没有限制;而不同源的 URL 之间的交互会受到同源策略的限制。
两个URL地址的源完全相同就叫做同源,只要有一样不同就叫做异源
异源就会造成跨域问题

网络通信中的跨域

当浏览器运行页面后,会发出很多的网络请求,例如CSSJS图片AJAX等等
请求页面的源称之为页面源,在该页面中发出的请求称之为目标源
当页面源和目标源一致时,则为同源请求,否则为异源请求跨域请求
网络中的跨域

浏览器对跨域的限制

浏览器对跨域问题的限制可以总结为两点:

  1. 标签页发出的跨域请求轻微限制
  2. AJAX发出的跨域请求严厉限制

注意:浏览器在对跨域校验时并不是在发送请求这一步,而是在服务端得到请求发送响应给浏览器时进行跨域的校验,如果校验不通过就会引发跨域问题,通过了就交付这个响应

CORS

第一种解决方案就是CORS,同时也是浏览器推荐的解决方案
CORS作用于浏览器校验部分,是一套校验规则
基本理念是只要服务端明确表示允许的才能通过
CORS将请求分为两类

简单请求

只要满足以下条件的就是简单请求

  1. 请求方法GETPOSTHEAD之一
  2. 头部字段满足CORS安全规范
    具体参见: W3C
  3. 如果Content-Type 则值必须是其中一个
    text/plain
    multipart/form-data
    application/x-www-form-urlencoded

对简单请求的验证

浏览器会发送一个真实请求服务端,同时会在请求中加入一个字段Origin用于代表
服务端也会返回一个响应,响应中包含一个字段Access-Control-Allow-Origin用于标识允许通过的源

//真实请求添加的字段
Origin: http://a.com


//响应添加的字段
Access-Control-Allow-Origin: http://a.com

预检请求

一切不符合简单请求的请求都是预检请求

对预检请求的验证

不同于简单请求直接发送一个真实的请求,预检请求需要先发送一个OPTIONS请求
OPTIONS请求中包含了请求的源,请求方法,以及请求头中更改的字段有哪些
浏览器在接受到了OPTIONS请求后就会发送一个响应
响应中包含了同意经过的源,同意经过的方法,同意经过的被更改过的字段,以及一个可选参数最长时间
只有在通过之后客户端才能向服务端发送真实请求

//OPTIONS请求
Origin: http://a.com
Access-Control-Request-Method: ABC
Access-Control-Request-Headers: a, b, content-type

//响应
Access-Control-Allow-Origin: http://a.com
Access-Control-Request-Method: ABC
Access-Control-Request-Headers: a, b, content-type
Access-Control-Request-Max-Age: 86400    //这个参数为询问一次后多长时间内不需要再次发送OPTIONS请求,单位为秒

JOSNP

CORS出来以前,人们解决跨域问题的方案通常是JOSNP
JOSNP通常会创建一个script元素来向目标地址发送请求,因为是通过标签来发送所以跨域的限制会比较轻微
服务端的响应结果是一个函数调用,并将响应数据给参数
注意:JOSNP仅能发送GET请求
容易被恶意网站调用
恶意攻击者可能会利用callback=恶意函数的形式进行XSS攻击
更多关于JOSNP的内容可以看我下面这篇博客
(未动笔,未来可寄)

代理

用户端可以通过一个代理服务器发起请求,由代理服务器向真正的目标地址发起请求,再将得到的响应返回给用户端
代理

GET与POST

事实上,浏览器都有一个约定,就是GET请求是默认不带请求体的,这也就意味着我们无法使用GET请求来传输大量数据
可以使用URL的形式来传递数据,但每个浏览器都会对URL的长度进行限制,具体浏览器的具体版本,限制的长度都不同,并且因为数据都在URL中,可以很轻松的复现页面,这也导致暴露了隐私数据
GET请求只能传递ASCII码数据,非ASCII码数据需要进行编码
POST请求不会保存到浏览记录中
POST请求的页面如果进行刷新的话,浏览器会提示用户是否重新提交

结尾

本博客依据独一教育前端web大师课撰写

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

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

相关文章

第4讲:使用ajax技术实现菜单展开或隐藏功能(xml数据)

使用ajax技术实现点击菜单时,展开当前子菜单列表,隐藏其他子菜单功能;前端使用静态html页面生成一级菜单,当点击某个菜单时,发送数据到后端(jsp文件),利用responseXML返回xml格式文件,刷新二级菜…

机器学习李宏毅学习笔记35

文章目录 前言一、Meta learning1.第一步2.第二步3.第三步 二、machine learning 和 meta learning区别总结 前言 Meta learning元学习:学习如何学习 提示:以下是本篇文章正文内容,下面案例可供参考 一、Meta learning 学习这件事也是一个…

webassembly安装python环境问题

在部署emscripten过程中,步骤emsdk install latest报错: 本以为是多个版本或版本不对应导致的,但是卸载所有版本并安装python3.9之后还是不行。 现象就是在cmd中使用python --version不报错也无版本显示。 一波bing~之后找到了结果(PYTHON|…

《Opencv3编程入门》学习笔记—第九章

《Opencv3编程入门》学习笔记 记录一下在学习《Opencv3编程入门》这本书时遇到的问题或重要的知识点。 第九章 直方图与匹配 一、图像直方图概述 1、作用:   在每个兴趣点设置一个有相近特征的直方图所构成的标签,通过标记帧与帧之间显著的边缘、颜…

性能测试讲解超详细Jmeter

目录 什么是性能 性能测试的目的 功能测试和性能测试 基准测试 负载测试 稳定性测试 压力测试 并发测试 总结 性能测试指标 响应时间 并发数 吞吐量 点击数 错误率 资源使用率 总结 性能测试流程 性能测试需求分析 性能测试计划和方案 ​编辑性能测试用例​编辑 性…

【Linux系统编程】shell的感性理解——王婆说媒

文章目录 1. shell是什么?它有什么作用?2. 透过王婆说媒感性理解shell的运行机制开端发展波澜渐起(正常命令的处理)故事角色与处理过程中各部分的映射走向高潮(非法请求的处理)shell 存在的意义结尾 1. she…

Elasticsearch:删除快照安全吗?

快速回答:是的! 删除快照是安全的,因为每个快照在逻辑上都是独立的。 了解如何以及为何可以继续阅读。 Elasticsearch 使用增量快照,使你能够高效地备份和恢复数据。 你可以在这篇精彩的文章中找到它的工作原理 “Elasticsearch&…

【select2下拉框】带搜索功能以及实现关联下拉框

需求 1、有两个下拉框 地区下拉框机构下拉框 2、地区变化&#xff0c;机构下拉框中内容也随之变化。 3、当地区为空时&#xff0c;显示全部机构列表 效果展示 代码实现 1、前端 &#xff08;具体样式相关代码不在此展示&#xff09; <div class"form-group"…

简单的手机记事本怎么把内容标记为完成状态?

很多人平时会在手机记事本上记录一些自己身边需要记住的事情&#xff0c;有的事情做完之后不想删除&#xff0c;又想要和未完成的内容区分开&#xff0c;那么这种情况下可以将它标记为已完成状态。简单的手机记事本怎么把内容标记为完成状态呢&#xff1f;以iPhone手机端敬业签…

阿里云原生大数据计算服务maxcompute学习体验

这两天有兴趣学习了下阿里的maxcompute大数据&#xff0c;随便谈谈自己的感受。 一、感受 阿里云相关的产品线太多了&#xff0c;热门产品一页已经放不下了。正因为东西太多给人一种杂乱的感觉&#xff0c;也可能这是给技术人员用的&#xff0c;所以不用太讲客户体验&#xf…

C# Lable增删改查

文章目录 C# Lable 增删改查&#xff08;1&#xff09;项目截图Insert&#xff08;新增&#xff09;新增执行SQL语句方法 Delete&#xff08;删除&#xff09;删除执行SQL语句方法 Update&#xff08;修改&#xff09;删除执行SQL语句方法 Select&#xff08;查询&#xff09;查…

DeepC 实用教程(二)建模流程

目 录 一、前言二、单位制与容差三、环境数据四、浮体模型4.1 定义浮体数据4.2 浮力补偿4.3 创建系泊连接点 五、系泊系统5.1 创建系泊连接点5.2 定义各种属性5.3 创建线对象 六、参考文献 一、前言 SESAM &#xff08;Super Element Structure Analysis Module&#xff09;是由…

JUC之CAS和原子操作类

文章目录 1 CAS1.1 是什么1.2 原理1.3 UnSafe1.4 自旋锁1.5 CAS的问题1.5.1 死循环消耗CPU资源1.5.2 ABA问题 2 原子操作类2.1 引用类型原子类2.1.1 AtomicReference2.1.2 AtomicStampedReference2.1.3 AtomicMarkableReference 2.2 基本类型原子类2.3 数组类型原子类2.4 对象的…

【2022 JCR 期刊影响因子】(四)水资源

原文链接&#xff1a; 【2022 JCR 期刊影响因子】&#xff08;四&#xff09;水资源 微信公众号同步更新 地信学子GISer and Coder 2022 JCR 期刊影响因子刚刚发布&#xff0c;今年的影响因子只保留1位小数。水资源领域的 SCIE 收录期刊的影响因子如下。 微信公众号同步更新 …

Unity基础-Vector3.Lerp的使用给一个简单的实例

一个简单的实例&#xff0c;演示了如何使用Vector3.Lerp来实现物体在两个位置之间平滑移动的效果&#xff1a; using UnityEngine;public class ObjectMovement : MonoBehaviour {public Transform startPoint;public Transform endPoint;public float moveDuration 2f;priva…

[PMLR 2021] Zero-Shot Text-to-Image Generation:零样本文本到图像生成

[PMLR 2021]Zero-Shot Text-to-Image Generation&#xff1a;零样本文本到图像生成 Fig 1. 原始图像(上)和离散VAE重建图像(下)的比较。编码器对空间分辨率进行8倍的下采样。虽然细节(例如&#xff0c;猫毛的纹理、店面上的文字和插图中的细线)有时会丢失或扭曲&#xff0c;但图…

为什么有些前端一直用 div 当按钮,而不是用 button?

&#x1f482; 个人网站:【海拥】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 目录 前言div 和 button使用…

Linux学习之进程控制和进程之间的关系

nice值的设定 关于vim四种模式一些介绍&#xff0c;可以看《Linux学习之vim正常模式和插入模式》 vim a.sh&#xff0c;按i进入到插入模式&#xff0c;这样才能输入字符到a.sh文件中。 把下边的内容写进去&#xff1a; #!/bin/bashecho $$ while : # 无限循环 do: done按Es…

Redis设计与实现笔记之SDS

1 数据结构与对象 1.1 简单动态字符串 SDS简单动态字符串&#xff08;simple dynamic string&#xff0c;SDS&#xff09;是Redis中字符串的底层数据结构。 struct sdshdr {// 记录 buf 数组中已使用字节的数量// 等于 SDS 所保存字符串的长度int len;// 记录 buf 数组中未使…

房屋信息怎么做二维码?户型文件怎么批量转二维码?

现在很多房产开发商都会用二维码来储存各个楼每户的信息&#xff0c;可能是建筑平面图、验房信息、楼区信息等等。那么如果将每户信息导出单独的文件之后&#xff0c;怎样才能够将每个文件批量转成二维码呢&#xff1f;下面教大家使用二维码生成器&#xff08;免费在线二维码生…