【青训营】- 拆解一个URL地址

198 阅读4分钟

这是我参与8月更文挑战的第4天,活动详情查看:8月更文挑战

今天我来重温基础知识,后面的文章也应该大多也是回去重温一下以往的知识点,去深入了解,打好基础,深受青训营老师们的影响,知道基础和原理的重要性。

内容

一个完整的URL

image.png

(1) 传输协议

就是客户端和服务器之间交互信息的规则,现在常见的有三种:

  • ftp:
    • 文件传输协议(FTP),常用于网络共享文件,使用端口号20和21。
    • FTP的目标是提高文件的共享性和可靠高效地传送数据。
  • http:
    • 超文本传输协议,隶属 TCP/IP 协议,目前最常见的 web传输协议。
    • HTTP协议都是以明文方式传送信息的,所以若有人截取了服务器和客户端之间的传输报文,则可以直接获取所以信息,所以 HTTP具有一定的安全风险。
  • https:
    • 基于SSL协议HTTP协议安全版
    • 在客户端与服务器进行信息交互前,双方会继续信息内容的加密,身份验证等操作,以保证信息的安全性。
  • httphttps区别:
    • HTTPS协议 需要用到 CA(Certificate Authority,证书颁发机构) 申请证书。
    • http协议信息以明文方式传输,而 https是以SSL加密形式传输
    • http默认端口 80,https默认端口 443。

(2) 域名/IP地址

先说 IP,每个你能在浏览器访问到网页的url,都有一个自己的 公网IP,能够在互联网中通过 公网IP 访问到主机,例如 http://202.108.22.5/
但是,人们并不习惯去记那些单调的数字,而是更喜欢那些有意义的文字,于是便有了 域名DNS

  • DNS:
    • DNS(Domain Name System,域名系统)本质是一个记住域名和ip地址映射的分布式数据库,运行在 UDP协议上,使用端口号 53。
    • 通过主机名,最终得到对应的 IP地址的过程叫做DNS域名(主机名)解析

(3) 端口号

服务端的主机名(IP/域名)就如一个小区一般,而端口就如这个小区的各个房子的门牌号。客户端找到服务端后,根据对应的端口获取对应的信息,一个服务端可以有多个端口,每个应用对应一个端口。
不同的端口也就为我们提供不同的服务,包括我们上述的一些功能和协议,都各自占用着不同的端口。
若 url 中写端口号,则默认为 80 端口。

(4) 请求路径/

当你已经确定好了域名和端口号时,就已经找到了明确的请求信息的地方了。而虚拟目录呢,则是再更具体目标,即你要请求的请求地址目录下的哪些的东西?
例如:你已经找到了 北京天安门广场(域名)门口的小卖部(端口),那么你要请求的具体目标就是小卖部冰箱第二排(路径)的可乐(请求文件)

(5) 请求参数

在我们向服务端发送请求的同时,也可以携带一些信息给服务端,这些信息就是请求参数,像:www.baidu.com?wp=别点进来&abc=123 ,在 "?" 后面携带的便是请求参数。
以上面的小卖部为例:你请求要一瓶可乐(请求信息) 的同时,也 携带了一张五元纸币和两个一元硬币(请求参数) 给他。

常见的请求方式有:

  • GET:常用于信息的请求,地址栏上会显示请求参数
  • POST:常用于信息的提交,地址栏上不会显示请求参数
  • DELETE:常用于向服务器发出删除申请。
  • UPDATE:常用于向服务器发出修改申请。

(6) 哈希值 hash

哈希值(hash)url 上又称 url 的锚部分,当我们给 html的 a标签的 href属性设置的是 "# + id值" 时:

<a href="#abc">link</a>

并点击,也就可以在地址栏上发现,并且不会刷新页面:

image.png

有以下结论:

  1. # 代表的是页面中的一个位置,跟在后面的字符为页面中该位置的标识符。
  2. url 中的哈希值发生改变并不会引起 http请求和重载,且 http请求中不包含 哈希值
  3. # 的改变会改变浏览器的访问历史。
  4. js可以通过 window.location.hash读取 # 的值,通过 onhashchange事件监听 # 的变化,这也是前端路由中的 hash路由 的实现原理之一。

有什么问题希望大家可以在评论区指出,我及时纠正。

新人上路,还请多多包含。
我是MoonLight,一个初出茅庐的小前端。