首页手记从访问网页简单理解互联网数据交换的整个过程

从访问网页简单理解互联网数据交换的整个过程

标签：

面试

最近模仿[nswbmw][1]的N-blog项目做了一个基于express和bootstrap的[多人博客系统][2]，项目部署到了heroku，部署地址为[N-blog][3]，从前后端的开发调试再到部署上线，整个过程中学到了很多，但是因为以前学的专业不是计算机，对计算机网络的一些基础知识了解的不多，这几天好好学了一下，在这里把自己的理解写下来。

url基本概念

在浏览器的地址栏中输入项目地址：http://demo-bootstrap-blog.herokuapp.com/使我们访问网页的起点，这就是一个url。

URL(Uniform Resource Locator) 中文称为统一资源定位符，如同网络上的门牌，用于描述一个网络上的资源

基本格式：schema://host[:port#]/path/.../[?query-string][#anchor]

scheme 传输协议：指定使用的协议(例如：http, https, ftp)，这里就是http或者https，大多数网页浏览器不要求用户输入网页中“http(s)://”的部分，因为绝大多数网页内容是超文本传输协议文件。
host 服务器： HTTP服务器的IP地址或者域名，这里就是demo-bootstrap-blog.herokuapp.com，一般人访问网站首页通常只要输入域名部分。
port 端口号： HTTP服务器的默认端口是80，这种情况下端口号可以省略。如果使用了别的端口，必须指明，例如 http://www.cnblogs.com:8080/
path 路径：访问资源的路径，对应后端路由控制部分代码index.js中定义的路径
query-string 查询字符串：发送给http服务器的数据，用get请求发送的数据会在这一部分显示，比如我对登录表单用户名部分的表单验证，用ajax发送了http请求验证用户名是否存在：http://demo-bootstrap-blog.herokuapp.com/validate?name=zzl，后面的？name=zzl部分就是了。以“?”字符为起点，每个参数以“&”隔开，再以“=”分开参数名称与数据.
anchor 锚：锚，用来定位到页面中的特定地方，比如这个项目页脚部分back to top的链接

访问网页和数据交换的完整过程

url是我们访问网页的起点，那从打开浏览器输入上面提到的url到看到网页，整个过程是怎样的呢？

要理解这个过程，首先要简单了解一下互联网的五层模型，人类用手机、电脑等终端设备进行沟通获取信息的过程，实际上是这些终端设备在互联网中通信的过程，这些终端设备在互联网中通信要共同遵守一些规则，这些规则总称为‘互联网协议族’，也是互联网的核心。

互联网的协议建立在互联网的分层模型上，每一层都有自己的协议完成各自的功能，层层递进才有了互联网的完整功能，这里以我理解的OSI（开放系统互连）五层模型简单总结一下。

我们日常上网可能用的比较多的是浏览器等网络应用程序，有的用来浏览网页获取信息，有的用来社交沟通，有的用来浏览网络中的多媒体内容等。这些网络应用程序就工作在应用层，我们输入的内容变成可以在互联网中传输的数据、从互联网中接收到的数据被解读为我们能理解的形式，都是在应用层完成。所以，

应用层的功能，就是规定应用程序发送和接收的数据格式，从而实现应用程序的通信。

互联网中直接面对普通用户的就是应用层，应用层也是互联网五层模型中最高的一层，应用层的协议包括http、ftp、DHCP（动态主机配置）和DNS（域名系统）等。

我们使用网络应用程序是为了获取信息或者发送信息与人（或者机器）沟通，应用层信息的发送和接收需要通过传输来实现，这就到了传输层。通常，我们都会同时使用多个网络应用程序，比如，我们可能一边在用浏览器打开网页，一边又在用qq等软件和人聊天，当我们使用的终端设备接收到了数据，怎么知道这个数据是给浏览器的html网页还是给qq的聊天消息呢？

假如把网络传输比作火车行驶，在传输的数据比作火车上的乘客，数据到达你的终端设备就好比乘客到站了，假如很多乘客陆续到同一站下车了，之后要各自去哪呢？我们再把所使用的一些网络应用程序比作接站人，数据（乘客）是对应发送给特定的应用程序的（接站人），通常接站人会手持一个接站牌来和要接的乘客互相识别，在传输层中，数据和对应的应用程序之间的“接站牌”是一个称为“端口（port）”的参数，它其实是在传输层中，每一个网络应用程序的编号，每个数据包都发到主机的特定端口，所以不同的程序就能取到自己所需要的数据。"端口"是0到65535之间的一个整数，正好16个二进制位。0到1023的端口被系统占用，用户只能选用大于1023的端口。不管是浏览网页还是在线聊天，应用程序会随机选用一个端口，然后与服务器的相应端口联系。

在windows系统中，我们可以通过命令提示符或者power shell查看某个端口的进程占用情况，使用命令Netstat –ano|findstr “<端口号>”可以通过端口号查看占用端口进程的PID，使用命令tasklist|findstr “<PID号>”可以通过PID查看进程。

传输层的功能，就是建立"端口到端口"的通信。

前面应用层生成的数据会作为数据部分放在数据包中，在传输层中，在数据部分的前面还要加上一个标头，标头部分包括传输方的端口号和接收方的端口号，传输层的协议包括TCP和UDP等，http请求和响应就是通过建立tcp连接来发送的。

传输需要建立在一个互联的网络上，要把传输层的数据发送到对应主机的特定应用程序，仅仅知道接收方的端口号还不够，还要知道接收方主机在网络中的地址。就像送快递（数据），仅仅知道收货人（应用程序）是谁还不够，要先知道收货人的地址（主机地址），再到那个地址去找到特定的收货人，然后把相同地址（主机）的不同快递（数据）给不同的收货人（应用程序）。网络层的主要功能就是给网络中的主机规定地址，进而决定数据在网络中传输的路径。

网络层最主要的协议是IP协议，它给网络中的主机定义一个IP地址。目前广泛采用的是IPv4，也就是IP协议的第四版，这个版本规定，网络地址由32个二进制位组成。前面在传输层生成的数据加上了包含发送方和接收方应用程序的端口，但是要传到正确的主机，就要再加上IP地址，所以网络层会在传输层数据包的基础上加上一个IP标头，内容主要包括IP协议版本、数据长度、发送主机和接收主机的IP地址等信息。

网络层的功能，就是建立"主机到主机"的通信。

前面我们在浏览器地址栏中输入demo-bootstrap-blog.herokuapp.com这个网址来访问部署到heroku的项目，可是我们并不知道部署服务器的IP地址啊。没关系，应用层的DNS协议会帮我们获取IP地址。浏览器会首先向DNS服务器发送一个DNS数据包，包含我们输入的域名，DNS服务器把这个域名解析为对应的IP地址，然后再把这个IP地址发回来，我们的主机就知道了项目的IP地址。

互联网是虚拟的，但是虚拟的互联网是构建在实际的物理设备上的，数据的发送本身还是从网卡到网卡的，IP地址在网络层标识了发送方和接收方的虚拟地址，那么在网卡这一物理设备层面又如何标识发送方和接收方呢？

数据链路层的以太网协议规定，连入网络的所有设备，都必须具有"网卡"接口。数据包必须是从一块网卡，传送到另一块网卡。网卡的地址，就是数据包的发送地址和接收地址，这叫做MAC地址。

链路层的功能，就是实现“网卡”到“网卡”的通信

网络层封装好的数据，在链路层还要加上链路层的标头，内容包括发送方和接收方各自的网卡MAC地址。

最后，互联网上的设备并不是靠魔法或者凭空连接起来的，实际中是用光缆、电缆、双绞线、无线电波等物理介质或载体来连接设备，这也是组成物理层的主要部分。前面四层封装好的数据包，本质上就是通过物理层的连接介质来传输的。

物理层的功能，就是把网络中的设备实际连接起来，并在连接的介质中传输“0”和“1”组成的数字信号

总结

综上，我们在浏览器中输入项目地址，请求网页，首先通过应用层协议（http）转化为可以在网络中传输的格式；为了能被接收方目标应用程序识别，再由传输层协议加上双方应用程序的端口号；接着为了明确发送到哪个主机，又在网络层加上了IP地址；然后为了从物理上明确发送到哪个网卡，又在链路层加上了收发双方的MAC地址，这样层层封装之后的数据包，再满足了物理层规定的电气特性，就能通过光纤、电缆和双绞线等介质传输到项目部署的服务器，接收方再通过封装在数据包标头部分的识别信息，判断是否是发送给我的，如果是的，再通过端口号把数据分配给指定的应用程序，应用程序处理之后再发出响应（项目主页的html文档），经过一个类似的过程又把响应给到了浏览器；最后，浏览器根据html文档中的link和script标签请求并加载样式表和js脚本文件，再经过一个渲染网页的过程，我们就看到了网页。