01浏览器&服务器
浏览器
安装并运行在电脑上的一个软件,常见浏览器软件如下:
浏览器作用: 输入网址, 即可浏览相关内容
浏览器自己没有这些内容,浏览的这些网页文件在在服务器上
服务器
服务器概念: 一台24小时开机的电脑, 拥有更大的磁盘空间和访问速度, 一般只有主机和系统
服务器作用: 为访问者提供各种资源 。资源: html文件, css文件, js文件, 视频文件, 音频文件, 数据等
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网址组成
4个部分组成:
- 协议
- 主机名
- 端口号(可省略)
- 资源存放的路径
示例:
协议: 协议就是浏览器和服务器之间传输数据的规则, 保证都能读懂对方发来的内容
主机名: 标识服务器在互联网中的唯一地址, 确保能够访问到他
端口号解释:
- 端口号有效范围默认在0-65535之间的整数
- 标识服务器里的不同服务
- 浏览器默认访问的都是80端口
- 类比: 主机名是一个商场,端口号就一个个具体的门店号,想要买东西,就要具体到门店号。
路径: 确定在服务器上的具体位置
类比: 主机名是一个商场,端口号就一个个具体的门店号,想要买东西,就要具体到门店号。路径就是柜台信息
02.请求和响应
概念
浏览器和服务器之间的通信过程, 分为两个步骤: 请求和响应,
- 请求: 浏览器, 通过网络去服务器要资源的过程, 叫做 "请求"
- 响应: 服务器, 通过网络给浏览器返回资源的过程, 叫做"响应"
在这个过程中,浏览器是主动的,服务器是被动的。
实操验证
目标: 要学会使用浏览器自带的Network调试工具查看请求和响应过程
- 打开浏览器, 访问www.baidu.com, 并右键检查, 选择Network(网络)选项卡(没有东西就刷新一下)
- 这里每一行, 都是浏览器发送的一次请求
- 点击后, 会先看到请求的具体url网址
request: 请求; response: 响应
- 点击右侧response是响应的结果
- 点击右侧preview, 是浏览器试着对响应内容进行格式化
请求回来的主页html里, 还有一些引用其他文件的语法, 例如script的src和link的href, 还有img的src, 都会让浏览器单独再发几次请求。一次请求对应一次响应, 响应回来的内容浏览器会进行解析
响应资源划分
大家看看访问百度的首页, 返回了哪几种类型的资源呢?
- 那还有一些URL地址可以返回一些JSON格式的字符串数据
例如: 网易新闻-头条: c.m.163.com/nc/article/…
重要: 这些url地址不变, 但是数据会在服务器端自动随着时间自动更新,他们也叫数据地址
示意图
提问:数据对于一个网页是否重要呢?
以前写网页都是html+css+js, 而且数据都是固定在文件里的, 无法动态变化
离开数据之后,哪怕这个网页做的再漂亮,也没有实际的作用。
所以要使用Ajax技术请求一些数据铺设到我们自己的网页中呢?