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段,复制一部分关键的路径,都不到就在少复制一点


相关推荐
Wang's Blog4 小时前
Java 接入Redis: 服务启动停止与后台运行配置
java·服务器·redis
云运维笔记6 小时前
IP地址从入门到精通:网络通信的核心基石
运维·网络·计算机网络
码农学院7 小时前
企业官网改版后 AI 引用归零的复盘:301 重定向断层让爬虫索引掉线,修复方案与恢复数据
运维·geo优化·ai优化aio
kuroomi7 小时前
Ingress-Nginx与kubernetes 网络
linux·运维·网络·kubernetes
当下新鲜事7 小时前
空调机房冷冻泵与冷却泵技术分析:赛莱默B&G背包式智能变频管道泵的工程应用
运维·物联网·业界资讯
EasyGBS7 小时前
终结训推割裂!EasyGBS×EasyAIS×DLTM,实现AI算法训推一体闭环落地!
服务器·深度学习·安全
Doris__HE9 小时前
【元脑服务器NF5476G7-NF5476M7技术规格分享】
运维·服务器·网络·数据库·性能优化
爱喝热水的呀哈喽10 小时前
openroad make各个阶段
服务器
闲云野鹤在人间12 小时前
docker 入门 | 第7章 容器监控 和 第8章 容器日志 详解
运维·docker·容器·架构·云计算
亚川楼宇自控系统数据中心厂家12 小时前
IBMS 集成如何打通数据中心的子系统数据孤
运维