浏览器和服务器通信过程。请求体与响应体。

97 阅读4分钟

01浏览器&服务器

浏览器

安装并运行在电脑上的一个软件,常见浏览器软件如下: image.png

浏览器作用: 输入网址, 即可浏览相关内容

浏览器自己没有这些内容,浏览的这些网页文件在在服务器上

服务器

服务器概念: 一台24小时开机的电脑, 拥有更大的磁盘空间和访问速度, 一般只有主机和系统

服务器作用: 为访问者提供各种资源 。资源: html文件, css文件, js文件, 视频文件, 音频文件, 数据等

image.png

url网址

前面说, 浏览器用于浏览资源, 服务器用于提供资源,那浏览器想要访问需要看到的资源, 就得知道资源的url网址

概念:url, 统一资源定位符, 标记资源在网络中的位置。也称网址

作用: 标记某个资源在网络中的唯一地址。只有通过URL地址,浏览器才能定位资源的存放位置,从而成功访问到对应的资源。

示例:这里每个url网址都能访问不同的页面和资源

淘宝首页: www.taobao.com/

京东首页: www.jd.com/

中国首都博物馆首页: www.capitalmuseum.org.cn/zlxx/zlxx.h…

网易新闻数据: c.m.163.com/nc/article/…

url网址组成

image.png 4个部分组成

  1. 协议
  2. 主机名
  3. 端口号(可省略)
  4. 资源存放的路径

示例:

www.qidian.com/xianxia/

协议: 协议就是浏览器服务器之间传输数据的规则, 保证都能读懂对方发来的内容

主机名: 标识服务器在互联网中的唯一地址, 确保能够访问到他

端口号解释:

  • 端口号有效范围默认在0-65535之间的整数
  • 标识服务器里的不同服务
  • 浏览器默认访问的都是80端口
  • 类比: 主机名是一个商场,端口号就一个个具体的门店号,想要买东西,就要具体到门店号。

image.png

路径: 确定在服务器上的具体位置

类比: 主机名是一个商场,端口号就一个个具体的门店号,想要买东西,就要具体到门店号。路径就是柜台信息

02.请求和响应

概念

浏览器和服务器之间的通信过程, 分为两个步骤: 请求响应,

  1. 请求: 浏览器, 通过网络去服务器要资源的过程, 叫做 "请求"
  2. 响应: 服务器, 通过网络给浏览器返回资源的过程, 叫做"响应"

image.png

在这个过程中,浏览器是主动的,服务器是被动的。

实操验证

目标: 要学会使用浏览器自带的Network调试工具查看请求和响应过程

  1. 打开浏览器, 访问www.baidu.com, 并右键检查, 选择Network(网络)选项卡(没有东西就刷新一下)

image.png

  1. 这里每一行, 都是浏览器发送的一次请求

image.png

  1. 点击后, 会先看到请求的具体url网址

image.png request: 请求; response: 响应

  1. 点击右侧response是响应的结果 image.png
  2. 点击右侧preview, 是浏览器试着对响应内容进行格式化

image.png 请求回来的主页html里, 还有一些引用其他文件的语法, 例如script的src和link的href, 还有img的src, 都会让浏览器单独再发几次请求。一次请求对应一次响应, 响应回来的内容浏览器会进行解析

响应资源划分

大家看看访问百度的首页, 返回了哪几种类型的资源呢?

image.png

  1. 那还有一些URL地址可以返回一些JSON格式的字符串数据

例如: 网易新闻-头条: c.m.163.com/nc/article/…

重要: 这些url地址不变, 但是数据会在服务器端自动随着时间自动更新,他们也叫数据地址

image.png

示意图

image.png

提问:数据对于一个网页是否重要呢?

以前写网页都是html+css+js, 而且数据都是固定在文件里的, 无法动态变化

离开数据之后,哪怕这个网页做的再漂亮,也没有实际的作用。

所以要使用Ajax技术请求一些数据铺设到我们自己的网页中呢?