f12网络教程 客户端 服务端 服务器前端 后端

文章目录

  • [客户端 服务端 服务器 前端 后端](#客户端 服务端 服务器 前端 后端)
    • 客户端(Client)------通信角色
      • [请求发给谁了?所有客户端发请求时,请求的链接一定有 IP 和端口。](#请求发给谁了?所有客户端发请求时,请求的链接一定有 IP 和端口。)
        • [url里有 IP → 直接用,没有 IP → 调用 DNS 查域名 → 得到 IP](#url里有 IP → 直接用,没有 IP → 调用 DNS 查域名 → 得到 IP)
    • 服务端(Server)--通信角色
      • [服务器 程序运行的机器](#服务器 程序运行的机器)
    • 前端(Front-end)------系统分层
      • [前端不等于浏览器,浏览器 = 前端常见的运行环境之一](#前端不等于浏览器,浏览器 = 前端常见的运行环境之一)
    • [后端 -- 系统分层](#后端 -- 系统分层)
    • 总结
      • [Web 系统会叫前后端/非 Web 系统 一般都是客户端,服务端](#Web 系统会叫前后端/非 Web 系统 一般都是客户端,服务端)
      • 程序&服务器
  • [f12-》network(网络)->过滤->刷新-> XHR / Fetch-》点开其中一个请求](#f12-》network(网络)->过滤->刷新-> XHR / Fetch-》点开其中一个请求)
    • [清空再操作: 如果请求太多,先点击 Network 面板的清空按钮,再操作页面](#清空再操作: 如果请求太多,先点击 Network 面板的清空按钮,再操作页面)
    • [XHR / Fetch 面板里看到的请求 = 浏览器会向后端发的HTTP请求](#XHR / Fetch 面板里看到的请求 = 浏览器会向后端发的HTTP请求)
    • [XHR / Fetch XHR / Fetch 这个筛选器 = 只看"接口请求",前端请求后端接口,就是:浏览器用来和后端接口"据"的方式](#XHR / Fetch XHR / Fetch 这个筛选器 = 只看“接口请求”,前端请求后端接口,就是:浏览器用来和后端接口“据”的方式)
      • [XHR = XMLHttpRequest](#XHR = XMLHttpRequest)
      • Fetch
      • [XHR/Fetch 请求详情](#XHR/Fetch 请求详情)
        • [payload 载荷](#payload 载荷)
        • [preview 预览](#preview 预览)
        • response
        • [Initiator(启动器 / 调用来源)](#Initiator(启动器 / 调用来源))
        • Timing(时间)
        • Cookies(Cookie)
        • [header 请求头](#header 请求头)
    • [浏览器 Network 面板里都有哪些东西,以及 XHR/Fetch 和其他条目的区别](#浏览器 Network 面板里都有哪些东西,以及 XHR/Fetch 和其他条目的区别)
      • [为什么 XHR / Fetch 才是前后端交互?](#为什么 XHR / Fetch 才是前后端交互?)
  • 怎么在后端代码,搜请求的网址。搜path段,复制一部分关键的路径,都不到就在少复制一点

客户端 服务端 服务器 前端 后端

客户端(Client)------通信角色

请求发给谁了?所有客户端发请求时,请求的链接一定有 IP 和端口。


url里有 IP → 直接用,没有 IP → 调用 DNS 查域名 → 得到 IP


服务端(Server)--通信角色


服务器 程序运行的机器


前端(Front-end)------系统分层


前端不等于浏览器,浏览器 = 前端常见的运行环境之一


后端 -- 系统分层



总结

Web 系统会叫前后端/非 Web 系统 一般都是客户端,服务端

程序&服务器

f12-》network(网络)->过滤->刷新-> XHR / Fetch-》点开其中一个请求

清空再操作: 如果请求太多,先点击 Network 面板的清空按钮,再操作页面

XHR / Fetch 面板里看到的请求 = 浏览器会向后端发的HTTP请求


XHR / Fetch XHR / Fetch 这个筛选器 = 只看"接口请求",前端请求后端接口,就是:浏览器用来和后端接口"据"的方式

XHR = XMLHttpRequest

Fetch

XHR/Fetch 请求详情

payload 载荷
preview 预览
response
Initiator(启动器 / 调用来源)
Timing(时间)
Cookies(Cookie)
header 请求头

浏览器 Network 面板里都有哪些东西,以及 XHR/Fetch 和其他条目的区别

为什么 XHR / Fetch 才是前后端交互?


怎么在后端代码,搜请求的网址。搜path段,复制一部分关键的路径,都不到就在少复制一点


相关推荐
MediaTea2 小时前
Python OOP 设计思想 13:封装服务于演化
linux·服务器·前端·数据库·python
xinxinhenmeihao2 小时前
使用长效代理是否存在安全风险?长效代理适合哪些应用场景?
服务器·网络·安全
未定义.2212 小时前
第3篇:UI自动化核心操作:输入、点击、弹窗、下拉框全场景实战
运维·python·ui·自动化·jenkins·集成测试·pytest
释怀不想释怀2 小时前
Zabbix(安装模式)
运维·云原生·zabbix
linweidong2 小时前
AUTOSAR如何自动化生成BSW、RTE、AP模块并进行一致性校验?
运维·实时互动·自动化
大佐不会说日语~2 小时前
Docker部署旧版本系统MySQL5.7+乱码问题解决方案
运维·docker·容器
YongCheng_Liang2 小时前
数据库核心概念深度解析:从基础原理到 SQL 分类
运维·数据库·sql
宇钶宇夕2 小时前
CoDeSys入门实战一起学习(六):CoDeSys软件模型核心架构——从分层结构到核心元素
运维·自动化
Web极客码2 小时前
如何在 WordPress 中设置会员内容:简单两步实现注册用户专属访问
运维·wordpress·网站管理·网站维护