认识url结构

叁歲伎倆 2022-05-16 06:13 188阅读 0赞

都知道，url是统一资源定位符（Uniform Resource Locator），是一串文本字符。

举个一个经典的url例子：[https://cn.bing.com/search?q=java\#b\_footer][https_cn.bing.com_search_q_java_b_footer]

那么这个url可以分为五部分：portocol \+ host \+ path \+ query \+ hash

对应结构如下：

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:82.95pt;"> https: </td> 
 <td style="vertical-align:top;width:82.95pt;"> //cn.bing.com </td> 
 <td style="vertical-align:top;width:82.95pt;"> /search </td> 
 <td style="vertical-align:top;width:82.95pt;"> ?q=java </td> 
 <td style="vertical-align:top;width:83pt;"> #b_footer </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:82.95pt;"> portocol </td> 
 <td style="vertical-align:top;width:82.95pt;"> host </td> 
 <td style="vertical-align:top;width:82.95pt;"> path </td> 
 <td style="vertical-align:top;width:82.95pt;"> query </td> 
 <td style="vertical-align:top;width:83pt;"> hash </td> 
 </tr> 
 </tbody> 
</table>

**portocol**：即协议名称，又叫Scheme，不区分大小写，以“：”作为结束符号，表示获取资源需要使用的协议。比如，http,https（即http+ssh）,ftp。

**host**：主机地址(ip:port)，一般使用[www.baidu.com][]这样的域名来映射主机地址，即上述例子中的cn.bing.com表示必应服务所在服务器的主机地址（即ip：port表示某个主机上某个端口对应的服务），该部分通常以“//”开头，而web应用通常只关注“//”后面的指向地址。

**path**:要获取（访问）的应用资源的路径，即资源的存储位置，一般会使用“/”来分级描述。上述例子中“/search”则表示要获取该路径对应的搜索资源。

**query**:查询字符串，用于获取资源时，向服务器端传递参数，可以一个或多个，多个则以”&”连接(比如：http://10.1.192.66:8080/zentao/index.php?m=task&f=view&task=4640)，通常以“？”作为开始符号，例如上述例子中的“？q=java”表示传递的搜索参数java，即该应用url表示搜索java方面的内容。

**hash**:哈希值，通常以\#开始，表示定位到页面某个位置（或者说定位到页面的锚点，熟悉前端的人应该知道锚点是指页面某个部分的id），这部分内容不传到服务器端，而是用于前端页面定位显示。

那么，整个url的意思就是，使用http协议，访问cn.bing.com对应服务主机上的应用，搜索java方面的内容，然后显示资源显示页面的底部内容。实际效果就是下面这个截图。

![70][]

但是如果hash是错误的，这个页面不会发生反应，也不会报错，自然是找不到页面内的锚点所致。

也许会有这样的地址：

[http://localhost:8080/otp/\#/seller/detail?id=111][http_localhost_8080_otp_seller_detail_id_111]

[http://localhost:8080/otp/\#/product][http_localhost_8080_otp_product]

怎么会有这样的情况呢，\#在？的前面，这种url，不难解读，大致意思就是获取当前主机的对应端口的应用otp下的资源，而上述两个url，前者表示显示id为111的卖家信息详情，后者表示显示商品信息。但是两者使用的是同一视图（你可以理解为div），而\#依旧有锚点定位的意思，只不过是定位到了不同的视图而已，页面只显示当前路径对应的资源视图。

[https_cn.bing.com_search_q_java_b_footer]: https://cn.bing.com/search?q=java#b_footer
[www.baidu.com]: http://www.baidu.com
[70]: /images/20220516/a7ea010fcceb47848ceb7d2b842d6264.png
[http_localhost_8080_otp_seller_detail_id_111]: http://localhost:8080/otp/#/seller/detail?id=111
[http_localhost_8080_otp_product]: http://localhost:8080/otp/#/product