???url就是因特资源网的标准化名称。URL指向一条电子信息片段,告诉你它们位于何处,以及如何与之进行交互 ——《http权威指南》
? 1、URL和URI
说起URL,我们不得不提起URI。URI是一类更通用的资源标识符,URL实际上是它的一个子集。URI包含URL和URN,URL是通过资源位置来标识资源的,而URN是通过名字来识别资源的。那么这三者的关系,就类似我我们省份证上的身份证号、家庭住址、姓名。
虽然规范的做法是URI作为统一资源标识符,但是在http中只处理了URL,那么我们就来看看我们熟悉的URL
? 2、url的组成
每天上网的我们,几乎每天都会打开几十个网页,这些网页都会有一个唯一的URL地址。我们可以通过这个地址来找到网页,那么这个地址中都包含哪些信息呢?它是如何与浏览器、客户端、服务器以及服务器文件系统中位置进行关联的?♂️
举个例子?
比如 我们要看阮大大的文章?
https://www.bookstack.cn/read/html-tutorial/docs-url.md
那么这个URL就分为以下三个部分。- URL的第一部分(https)是URL的方案(scheme)。方案可以告知Web客户端怎样访问资源。在这个例子中,URL说明要使用https协议。
- URL的第二个部分(www.bookstack.cn) 指的是服务器的位置。这部分告知Web客户端资源位于何处。
- URL的第三个部分(/read/html-tutorial/docs-url.md)是资源路径。历经说明了请求的是服务器上的哪个特定的本地资源。
其实URL最主要的组成也就是这三部分方案(scheme)
、主机(host)
、路径(path)
。但其实URL是由于9部分组成的,我们一起来看下面这个表格
组件 | 描述 |
---|---|
scheme | 方法描述了请求资源时用了什么协议,用“:”与url其它部分隔开; |
password | 密码描述了用户名后面可能跟的密码,用“:”跟用户名隔开; |
host | 主机描述了网站主机名或ip地址,如果前面有用户名和密码,用@分开; |
post | 服务器当前正在监听的端口,http默认为80,https默认为443; |
path | 路劲描述了资源在服务器上的位置,用‘/’跟前面部分隔开; |
params | 参数描述了请求需要附加的参数,用“;”与其他部分隔开; |
query | 查询是用来激活服务器程序去执行某些操作,比如查询数据库等,用“?”与其余部分隔开; |
frag | 片段只在客户端使用,不发送到服务器端 |
那么接下来我们来看几个我们实际开发常用的几个组件
? 2.1 方案
方案实际上是规定如何访问指定资源的主要标识,它会负责解析URL的应用程序应该是用什么协议,我们比较常见的就是HTTP、HTTPS。一共有如下几种方案
- http
- https
- mailto
- ftp
- rtsp、rtspu
? 2.2 主机和端口
我们想要从因特网上获取资源,就必须要知道是哪台机器,以及在那台机器的什么地方可以找到能对目标资源进行访问的服务器。URL的主机和端口就提供了这个信息。
我们可以通过主机名或者IP地址来访问, 其实在前端使用框架开发的话,由于本地启动的服务,那其实我们访问的就是本机的IP地址。
? 2.3 路径
URL的路径组件说明了资源位于服务器的什么地方。路径通常很像一个分级的文件系统路径。
?比如:
https://www.bookstack.cn/read/html-tutorial/docs-url.md
? 这个URL中的路径为/html-tutorial/docs-url.md,很像UNIX文件系统中的文件系统路径。路径是服务器定位资源时所需的信息。? 2.4 参数
对很多方案来说,只有简单的主机名和到达对象的路径是不够的。除了服务器正在监听的端口,以及是否能够通过用户名和密码访问资源外,很多协议都还需要更多的信息才能工作。
为了向应用程序提供它们所需的输入参数,以便正确地与服务器进行交互,URL中有一个参数组件。
这个组件就是URL中的名值对列表,由字符“; ”将其与URL的其余部分(以及各名值对)分隔开来。它们为应用程序提供了访问资源所需的所有附加信息。
? 2.5 查找字符串
查找字符串,我们在日常开发中有经常使用。比如说我们从商品列表跳转商品详情时,会将商品ID传递到商品详情页面,然后通过商品ID来获取商品详情。
?举个例子:
https://search.bilibili.com/all?keyword=哈利波特&from_source=webtop_search&spm_id_from=333.851
?我们在哔哩哔哩上搜索哈利波特,按下回车我们会的到上面的URL,这个URL的大部分都与我们见过的其他URL类似。只有问号(?)右边的内容是新出现的。这部分被称为查询(query)组件
。URL的查询组件和标识网关资源的URL路径组件一起被发送给网关资源。
上个链接中,我们获取到三个参数,keyword
、from_source
、spm_id_from
,按照常规,很多网关都希望查询字符串以一系列“名/值”对的形式出现,名值对之间用字符“&”分隔
? 2.6 片段
为了引用部分资源或资源的一个片段,URL支持使用片段(frag)组件来表示一个资源内部的片段。
在日常开发中,我们也称之为锚点(anchor)
,它是网页内部的定位点,使用#
加上锚点名称,放在网址的最后,比如#anchor
。浏览器加载页面以后,会自动滚动到锚点所在的位置。
HTTP服务器通常只处理整个对象,而不是对象的片段,客户端不能将片段传送给服务器。浏览器从服务器获得了整个资源之后,会根据片段来显示你感兴趣的那部分资源。
? 3 、url编码
? 3.1什么时URL编码
为了避开安全字符集表示法带来的限制,人们设计了一种编码机制,用来在URL中表示各种不安全的字符。这种编码机制就是通过一种“转义”表示法来表示不安全字符的,这种转义表示法包含一个百分号(%),后面跟着两个表示字符ASCII码的十六进制数。
? 3.2 为什么要对URL进行编码
通常如果一样东西需要编码,说明这样东西并不适合传输。原因多种多样,如Size
过大,包含隐私数据,对于Url来说,之所以要进行编码,是因为以下两种原因:
http协议规定请求头与请求行必须是
ascii编码
,这也就是说你不能在Url中包含任何非ASCII字符
,例如中文。这一部分的编解码任务encodeURI
、decodeURL
就能完成,而事实上浏览器跟web服务器一般都帮我们做了。url中部分内容包含不安全字符,比如,Url参数字符串中使用
key=value
键值对这样的形式来传参,键值对之间以&符号分隔,如/s?q=abc&ie=utf-8
。如果你的value字符串中包含了=或者&,那么势必会造成接收Url的服务器解析错误,因此必须将引起歧义的&和=符号进行转义,也就是对其进行编码。这一部分可以用encodeURIComponent
完成,解码后台服务器自动完成
但是服务器并不会对url进行编码,服务器不可能对错综复杂的编码结果进行处理,所以,需要使用Javascript先对URL编码,然后再向服务器提交,不给浏览器插手的机会。
? 3.3 js对url进行编码和解码
以下三种函数都可以对URL进行编码,区别主要在于不编码的字符不同,具体使用详见各自的使用场景:
? 1.escape 和 unescape
对除ASCII字母、数字、标点符号 @ * _ + - . / 以外的其他字符进行编码。
? 2. encodeURI 和 decodeURI
返回编码为有效的统一资源标识符 (URI) 的字符串,不会被编码的字符:! @ # $ & * ( ) = : / ; ? + '
encodeURI()是Javascript中真正用来对URL编码的函数。
? 3. encodeURIComponent 和 decodeURIComponent
对URL的组成部分进行个别编码,而不用于对整个URL进行编码