网络基础概念
URL
全称:Uniform Resource Locator,统一资源定位符。
作用: 定位资源(css,html,js,png, avi…)。
格式:协议://主机地址[:端口]/路径?查询字符串#锚点
- 协议
- http
- https
- 主机地址
- IP地址 或者 域名
- 端口
- http请求,默认端口80
- https请求,默认端口443
- MySQL默认端口3306
- 访问一个网页的时候,默认端口可以省略
- 路径
- 服务器文件夹上的资源。(html/css/images/js/接口)
- 参数(查询字符串)
- ? 后面的部分,是键值对的形式
- 锚点
- 网页内部的锚点链接
例如:http://itcast.cn:80/schools/students?id=18&name=zs#photo
经典用法:访问文件时传递参数。
// index.html
<a href='detail.html?id=1'>新闻1</a>
<a href='detail.html?id=2'>新闻2</a>
// detail.html
<script>
// 1. 获取id
// 2. 根据id值去获取这个新闻的详情
</script>
IP 地址
- 全称:
I
nternetP
rotocol Address。 - 作用:标识一个网络设备(计算机、手机、电视)在某一个具体的网络当中的地址。我们通过地址去找到对应的资源。
- 分类:ipV4,ipV6 (http://www.gov.cn/xinwen/2018-09/03/content_5318951.htm)
- 格式:
[0-255].[0-255].[0-255].[0-255]
即为四个 0-255 的数字组成(以ip4为例)。在同一个网络中,计算机的IP是不允许相同的,都是唯一的。220.181.38.149
- 127.0.0.1 特指本机ip地址。
外网IP 和 内网IP
举例:北京市朝阳区安定路,这个就是外网IP
,用于表示外部世界的地址。
公司工银科技 , 这个就是内网IP
。
外网ip地址是有限的,也没有必要人人有一个,我们可以通过路由器来分成内网。
我们一般提到的IP地址是指外网IP地址。
三个常用的命令
打开小黑窗,输入如下三个命令,就可以看到效果啦。
-
ping www.baidu.com
- 作用: 查看本机与指定地址是否连通
-
tracert www.baidu.com
- 跟踪路由过程
-
ipconfig
- 我们输入ipconfig,按回车键,进行查看电脑的ip地址
- 输入ipconfig /flushdns命令,按回车键,可以进行刷新DNS缓存
- 输入ipconfig /renew命令,按回车键,可以进行重新获取ip地址
- 输入ipconfig /release命令,按回车键,进行释放电脑的ip地址,这时候会断一会儿网,会自动重新获取ip地址
- 输入ipconfig /all命令,按回车键,进行查看电脑的ip地址,mac地址,其他网卡信息
域名
全称: Domain Name。
作用:它是ip地址的别名,比ip地址好记忆,作用与ip地址一样用来标记一台计算机。由于 IP 地址都是没有规律的一些数字组成的,很难被人记住,不利于广泛传播,所以就有人想出来要给 IP 起名字(别名)。
360.com 2015年 1700万美元
tip:抢注域名也可以发大财
域名有关的参考:
- (现在投资域名还有机会吗)[http://www.360doc.com/content/18/0909/16/32351304_785169851.shtml]
- 爱名网。https://www.22.cn/ 一个域名交易网站
顶级域名(了解)
- .com: 商业机构 最常见的。
- .cn: 中国国家、地区域名 .hk,
- .gov: 政府网站。 北京政府官网: http://www.beijing.gov.cn/
- .edu: 教育网站。北京大学官网: https://www.pku.edu.cn/
- .net: 网络服务商。
特殊的域名
localhost
含义为本地主机,对应127.0.0.1 。这是一个保留域名,主要用于本地测试。
DNS
DNS: Domain Name System 域名系统。
作用:在DNS服务器中保存了域名和IP的映射关系。主要工作是将域名转换为IP地址,因为我们通过浏览器访问网站时,实际上是去找对应的IP地址。
域名 | IP |
---|---|
baidu.com | 61.135.169.12 |
baidu.com | 202.22.35.66 |
sina.com | 45.22.45.45 |
通过宽带运营商提供的服务器解析一个域名背后对应的 IP,这个过程叫做 DNS 寻址,帮你完成 DNS 寻址过程的服务器叫做 DNS 服务器。
通俗的讲:DNS服务器能够通过你输入的域名返回该域名对应的IP。然后我们通过IP去访问网络上的资源。
- 查看和设置本机DNS:
控制面板\网络和 Internet\网络和共享中心 > 查看活动网络 > 详细
一般使用默认设置,也可以自己去设置自己指定的DNS服务器的ip;
DNS缓存
当我们在浏览器输入域名后,浏览器要做的第一件事是就是要去把域名翻译成ip地址。这就要用到DNS服务器去解析其对应的IP的。当然 ,它并不是直接向DNS服务器发起请求,而是先去两个地方找缓存:
- 浏览器缓存
- 本地中缓存
谷歌浏览器缓存
- chrome://net-internals/#dns
windows下查看dns缓存
- ipconfig /displaydns
- ipconfig /displaydns > c:/dnscache.txt 将dns缓存导入到c:/dnscache.txt文件
windows下清除dns缓存
- ipconfig /flushdns
如果成功地解析了这个网址,浏览器也会保存这个匹配信息。
hosts 文件(重点)
操作系统在发起对 DNS 服务器的查询请求之前,会优先检查本机的 hosts 文件。如果这个文件中包含了对当前需要解析的域名的配置,则不再发起对 DNS 服务器的请求,直接使用 hosts 文件中的配置。
文件所在路径:
- Windows:
C:\Windows\System32\drivers\etc\hosts
- macOS:
/etc/hosts
注意:
- 本机的 hosts 文件配置只能到影响本机的 DNS 寻址
- 只有以管理员权限运行的编辑器才能修改
hosts
文件
确定域名baidu.com的ip地址的过程
1.浏览器DNS缓存中找,找到就使用;
2.本机hosts文件中找,找到就使用;
3.按你的自己设置的(或者是自己获取的)DNS服务器地址去找
端口
英文: port
作用
一个IP地址的端口可以有65536个,范围是从[0,65535]) 。 不同的端口被不同的软件占用,以提供不同的服务。 一台主机可以通过安装多个服务器端软件来提供服务,比如Web服务、FTP服务、SMTP服务等。显然,通过ip地址是无法区分不同的服务的。这里就需要用到 “IP地址+端口号”来区分不同的服务
。
对比理解
- 如果理解IP地址(一台服务器)是一栋大商场,端口就是商场中的商铺的编号。
- 如果理解IP地址(一台服务器)是公司的前台电话,端口就是公司中各个部门的分机号。
默认的端口
http
默认的端口80
。访问http网站时,可以省略80。(http://www.php.cn)https
默认的端口是443
。访问https网站时,可以省略443。mysql
默认端口是3306
查看本机端口占用情况
cmd中输入 netstat -nao
或者是(netstat -nao > d:/1.txt)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RR8cXvsp-1582167571672)(01-网络基础.assets/1560151967429.png)]
-nao
会列出PID号,这个PID号可以进一步去定位到是哪个软件。
查看是哪些软件或者服务占用端口
通过netstat命令可以定位到:哪些PID在使用哪些端口,而进一步,通过任务管理器可以查看当前进行运行的程序的PID号,这样就可进一步确定是哪些软件在使用哪些端口了。
任务管理器> PID
访问网站时请求响应流程(掌握)
我们在浏览器输入一个网址后,按下回车,最后看到一个页面,这个过程是怎样的?
-
用户打开浏览器,在地址栏输入我们需要访问的网站网址(
URL
) -
DNS 寻址。把URL中的域名换成IP地址
-
检测
浏览器DNS缓存
,看是否有域名和IP的对应关系,有直接用,没有下一步; -
检查
本机hosts 文件
,看是否有域名和IP的对应关系,有直接用,没有下一步; -
浏览器通过
DNS 服务器
获取即将访问的网站IP 地址
-
-
建立连接。客户端和目标服务器进行tcp的三次握手,建立连接
客户端在向服务器发http请求之前,会先向服务器发送TCP请求,过程可以理解为:
- 客户端:hello,你在吗?
- 服务器:嗯,我在
- 客户端:好的,我知道了
此过程又称之为客户端和服务器三次握手。
-
3次握手成功后,使用http协议发送请求数据发起一个对这个 IP地址的
请求
-
服务端监听指定的
端口
的服务器软件接收到这个请求,进行相应的处理 -
服务端将处理完的结果返回给客户端浏览器(
响应
) -
浏览器根据自己的渲染功能,将服务端返回的结果呈现到页面上
C/S 与 B/S
应用软件架构一般分为两类:
- B/S 架构:Browser(浏览器) ←→ Server(服务器),这种软件都是通过浏览器访问一个网站使用,服务器提供数据存储等服务。
12306网站
- C/S 架构:Client(客户端) ←→ Server(服务器),这种软件通过安装一个软件到电脑,然后使用,服务器提供数据存储等服务。
12306app
优缺点
- b/s架构
- 优点: 用户无感知升级;用户无需安装软件;
- 缺点:没有独立入口;
- c/s架构
- 优点:可以调用系统api;功能更加强大;
- 缺点:成本高
静态网站和动态网站
静态网站
- web服务器将网页文件(纯文本)原封不动的返回给浏览器
- 无法满足让网页内容动起来(随着数据动态变化)的需求
动态网站
-
不再将 HTML 固定写死,每次用户请求时,动态执行一段代码,临时生成一个用户想要的 HTML 页面。
-
动态网站指的也就是每次请求时服务端动态生成 HTML 返回给用户的这种网站。
-
实现动态网站的技术有很多,例如:JSP、ASP.NET、PHP、Node.js、go、python 等等。
HTTP 协议
HTTP 协议是什么
html : HyperText markup language
-
HTTP(HyperText Transfer Protocol) 超文本传输协议。用来获取超文本资源。
-
协议双方: 浏览器与web服务器都要遵守的协议
-
请求通常是由像浏览器这样的接受方发起的
-
HTTP 协议中明确规定了
请求数据
和响应数据
的格式(报文)-
浏览器 请求 资源 要遵守 http 协议: 请求报文
-
服务器 返回 资源 要遵守 http 协议: 响应报文
-
请求报文
http协议规定了浏览器向服务器发请求时的格式。
- 它由三个部分组成
- 请求行
- 请求头
- 请求体(可能是空)
- 可以使用 chrome network面板来查看请求。
请求行
格式: 请求方法 请求路径 协议及版本
示例:
GET / HTTP/1.1
GET /index.html HTTP/1.1
GET /common/get?id=123&name=jake HTTP/1.1
请求头
- 浏览器在向服务器发送请求的时候自动携带的信息,一般不需要主动去设置;
- 信息是由键值对组成
- 如果需要设置请求头,使用setRequestHeader方法来设置
- 参考链接
键 | 值 |
---|---|
Host | 请求的主机 |
Cache-Control | 控制缓存(例如:max-age=60 缓存 60 秒) |
Accept | 客户端想要接收的文档类型,逗号分隔 |
User-Agent | 标识什么客户端帮你发送的这次请求 |
Referer | 这次请求的来源 |
Accept-Encoding | 可以接受的压缩编码 |
content-type | 设置传递给服务器的请求体的格式 |
user-agent 的应用: 根据用户的设备,自动进行页面跳转
请求体
GET 请求没有请求体。
POST 请求有请求体,请求体就是发送给服务器的数据。
- 根据请求头中的:content-type的不同,请求体的样子也不同。
- application-x-www-form-urlencoded
- form-data
- application/json (axios)
响应报文
http协议规定了服务器向浏览器返回数据时的格式。
- 它由三个部分组成
- 响应行
- 响应头
- 响应体
响应行
格式: 协议及版本 状态码 说明
- 状态码 : 用来告诉浏览器服务器处理本次请求的结果。 不同的状态码对应不同的结果。
示例:
HTTP/1.1 200 OK
HTTP/1.1 404 Not Found
// 需要注意的是200,它表示状态码
// 状态码:
// - 描述了请求过程中所发生的情况
// - 每个状态码的第一位数字都用于描述状态的一般类别("成功"、"出错"等)
// - 常见状态码及含义
// - 200 - 成功
// - 302 - 重定向
// - 304 - 读取缓存
// - 404 - 请求的资源不存在
// - 500 - 服务器内部错误
// 参考链接 https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
响应头
- 服务器返回响应的时候携带了附加信息
- 由键值对组成
- 每个请求的响应头可能都不一样:它完全取决于服务器;
几个常见的响应头
键 | 值 |
---|---|
Date | 响应时间 |
Server | 服务器信息 |
Content-Type | 响应体的内容类型 |
Content-Length | 响应的内容大小 |
响应体
本次请求返回的主体内容。根据请求的不同,返回的内容也不同:
-
如果请求的是网页返回网页的内容
-
如果请求的是图片返回图片的内容
-
…
通过Ajax请求来学习 HTTP协议(掌握)
本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段,所以我们发送出去的请求也是 HTTP 请求,同样符合 HTTP 约定的格式:
// 设置请求报文的请求行
xhr.open('GET', '/time')
// 设置请求头
xhr.setRequestHeader('Accept', 'text/plain')
// 设置请求体
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 获取响应状态码
console.log(this.status) // this.status
// 获取响应状态描述
console.log(this.statusText)
// 获取响应头信息
console.log(this.getResponseHeader('Content-Type')) // 指定响应头
console.log(this.getAllResponseHeaders()) // 全部响应头
// 获取响应体
console.log(this.responseText) // 文本形式
console.log(this.responseXML) // XML 形式,了解即可不用了
}
}
参考链接:
- https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
- https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest