网络基础概念

网络基础概念

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 地址

  • 全称:Internet Protocol 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/ 一个域名交易网站
顶级域名(了解)
特殊的域名

localhost 含义为本地主机,对应127.0.0.1 。这是一个保留域名,主要用于本地测试。

DNS

DNS: Domain Name System 域名系统。

作用:在DNS服务器中保存了域名和IP的映射关系。主要工作是将域名转换为IP地址,因为我们通过浏览器访问网站时,实际上是去找对应的IP地址。

域名IP
baidu.com61.135.169.12
baidu.com202.22.35.66
sina.com45.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

访问网站时请求响应流程(掌握)

我们在浏览器输入一个网址后,按下回车,最后看到一个页面,这个过程是怎样的?
在这里插入图片描述

  1. 用户打开浏览器,在地址栏输入我们需要访问的网站网址(URL

  2. DNS 寻址。把URL中的域名换成IP地址

    • 检测浏览器DNS缓存,看是否有域名和IP的对应关系,有直接用,没有下一步;

    • 检查本机hosts 文件,看是否有域名和IP的对应关系,有直接用,没有下一步;

    • 浏览器通过 DNS 服务器 获取即将访问的网站 IP 地址

  3. 建立连接。客户端和目标服务器进行tcp的三次握手,建立连接

客户端在向服务器发http请求之前,会先向服务器发送TCP请求,过程可以理解为:

- 客户端:hello,你在吗?
- 服务器:嗯,我在
- 客户端:好的,我知道了

此过程又称之为客户端和服务器三次握手。

  1. 3次握手成功后,使用http协议发送请求数据发起一个对这个 IP地址的 请求

  2. 服务端监听指定的 端口 的服务器软件接收到这个请求,进行相应的处理

  3. 服务端将处理完的结果返回给客户端浏览器(响应

  4. 浏览器根据自己的渲染功能,将服务端返回的结果呈现到页面上

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协议规定了浏览器向服务器发请求时的格式。

  • 它由三个部分组成
  1. 请求行
  2. 请求头
  3. 请求体(可能是空)
  • 可以使用 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协议规定了服务器向浏览器返回数据时的格式。

  • 它由三个部分组成
  1. 响应行
  2. 响应头
  3. 响应体
响应行

格式: 协议及版本 状态码 说明

-	状态码 : 用来告诉浏览器服务器处理本次请求的结果。 不同的状态码对应不同的结果。

示例:

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

别动我代码儿

感谢技术精进的你,加油不负韶华

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值