前端基础——URL详解

简介: 前端基础——URL详解

一:  URL举例


就以下面这个URL为例,介绍下普通URL的各部分组成


http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name


从上面的URL可以看出,一个完整的URL包括以下几部分:


  1. 协议部分:该URL的协议部分为“http:”,这代表网页使用的是HTTP协议。在Internet中可以使用多种协议,如HTTP,FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符


  1. 域名部分:该URL的域名部分为“www.aspxfans.com”。一个URL中,也可以使用IP地址作为域名使用


  1. 端口部分:跟在域名后面的是端口,域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分,如果省略端口部分,将采用默认端口


  1. 虚拟目录部分:从域名后的第一个“/”开始到最后一个“/”为止,是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”


  1. 文件名部分:从域名后的最后一个“/”开始到“?”为止,是文件名部分,如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止,是文件部分,如果没有“?”和“#”,那么从域名后的最后一个“/”开始到结束,都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分,如果省略该部分,则使用默认的文件名


  1. 锚部分:从“#”开始到最后,都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分


  1. 参数部分:从“?”开始到“#”为止之间的部分为参数部分,又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数,参数与参数之间用“&”作为分隔符。



二:  URL通用格式


URL的语法:


大多数URL语法都建立在9个部分构成的通用格式上,而其中最重要的是方案(scheme)、主机(host)和路径(path)


通用格式:


方案://用户名:密码@主机名:端口/服务器上资源的路径;参数?查询#片段


  1. 方案:指访问服务器以获取资源时要使用哪种协议。比如,http、https和FTP等


  1. 主机和端口:指资源宿主服务器的主机名或IP地址。端口是指资源宿主服务器正在监听的端口,很多HTTP的默认端口号是80。比如,130.32.12.34:800,这里的IP地址是主机名,端口是800


  1. 用户名和密码:很多服务器都要求输入用户名和密码才会允许用户访问数据,如FTP服务器。


  1. 例子:joe是用户名、joepasswd是密码


ftp://joe:joepasswd@ftp.prep.edu/pub/name


路径:路径说明了资源位于服务器的什么地方。


例子:/cans/index.html就是URL中的路径


http://www.hda.com/cans/index.html


  1. 参数:为了向应用程序提供它们所需要的输入参数,以便正确地与服务器进行交互,URL中有个参数组件。由字符“;”将其与URL的其余部分分隔开来。


例子:;type=7;nam=true就是两个参数。


ftp://prep.mit.edu/pub;type=7;nam=true


  1. 查询:很多资源,比如数据库服务、搜索引擎,都可以通过提问题或进行查询来缩小请求资源的范围。由字符“?”将其与URL的其余部分分隔开来。


例子:查询组件有两个名/值对:name=csh和age=24


http://www.cheng.cn/si.html?name=csh&age=24


  1. 片段:#代表网页中的一个位置,其右面的字符就是该位置的标识符(一般情况下,锚链接会用到)


例子:下面的URL中,代表网页si.index的print位置,浏览器读取这个URL后,会自动将print位置滚动至可视区域。


http://www.cheng.cn/si.html#print


URL的分类:


URL可以分为绝对URL和相对URL


绝对URL:


绝对URL中包含了访问资源所需的全部信息。


案例:<a href=’http://cheng.com/si.html></a>


相对URL:


相对URL包含的只是访问资源所需的部分信息。而要想得到访问资源的全部信息的话,就要和另一个被称为基础(base)的URL结合进行解析


案例:<script src="lib/sea.js"></script>


相对URL中的基础URL:转换相对URL的第一步就是找到基础URL


  1. 在资源中显式地指定基础URL。比如,HTML文档中可能会包含一个定义了基础URL的HTML标签


  1. 封装资源的基础URL。在HTML中,基础URL可以从它们所属资源的基础URL中推导出来


三:  URL特殊字符


有些符号在URL中是不能直接传递的,如果要在URL中传递这些特殊符号,那么就要使用他们的编码了。编码的格式为:%加字符的ASCII码,即一个百分号%,后面跟对应字符的ASCII(16进制)码值。例如 空格的编码值是"%20"。


下表中列出了一些URL特殊符号及编码


:替换为%3A 



例:要传递字符串“this%is#te=st&o k?+/”作为参数t传给te.asp,则URL可以是:

te.asp?t=this%25is%23te%3Dst%26o%20k%3F%2B%2F 或者

te.asp?t=this%25is%23te%3Dst%26o+k%3F%2B%2F (空格可以用%20或+代替)


java中URL 的编码和解码函数


java.net.URLEncoder.encode(String s)和java.net.URLDecoder.decode(String s);


在javascript 中URL 的编码和解码函数


escape(String s)和unescape(String s) ;


Java中URL 的编码和解码函数


java.NET.URLEncoder.encode(String s)和java.Net.URLDecoder.decode(String s);


在JavaScript中URL 的编码和解码函数


escape(String s)和unescape(String s) ;


点的转义:. ==> u002E


美元符号的转义:$ ==> u0024


乘方符号的转义:^ ==> u005E


左大括号的转义:{ ==> u007B


左方括号的转义:[ ==> u005B


左圆括号的转义:( ==> u0028


竖线的转义:| ==> u007C


右圆括号的转义:) ==> u0029


星号的转义:* ==> u002A


加号的转义:+ ==> u002B


问号的转义:? ==> u003F


反斜杠的转义: ==> u005C


举例:


我们需要模拟的地址为:


=1453725386008”>https://login.weixin.qq.com/jslogin?appid=wx782c26e4c19acffb&redirect_uri=https%3A%2F%2Fwx.qq.com%2Fcgi-bin%2Fmmwebwx-bin%2Fwebwxnewloginpage&fun=new&lang=en_US&=1453725386008,所以我们模拟的代码如下:


#coding=utf8


import time, requests


session = requests.Session()


url = ‘https://login.weixin.qq.com/jslogin


params = {


‘appid’: ‘wx782c26e4c19acffb’,


‘redirect_uri’: ‘https://wx.qq.com/cgi-bin/mmwebwx-

bin/webwxnewloginpage’,


‘fun’: ‘new’,


‘lang’: ‘en_US’,


‘_’: int(time.time()),


}


r = session.get(url, params = params)


print(‘Content: %s’%r.text)


相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
3月前
|
前端开发
[牛客网-前端大挑战QD2] 获取url参数
[牛客网-前端大挑战QD2] 获取url参数
21 0
|
5月前
|
前端开发 JavaScript
前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法
前端知识(十)———JavaScript 使用URL跳转传递数组对象数据类型的方法
52 0
|
14天前
|
前端开发 JavaScript 应用服务中间件
前端vue2、vue3去掉url路由“ # ”号——nginx配置(二)
前端vue2、vue3去掉url路由“ # ”号——nginx配置
42 0
|
7月前
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
54 0
|
7月前
|
前端开发 Java 应用服务中间件
配置SpringMVC的前端控制器DispatcherServlet时,<url-pattern>中“/“和“/*“的区别
配置SpringMVC的前端控制器DispatcherServlet时,<url-pattern>中“/“和“/*“的区别
|
6月前
|
前端开发
[牛客网-前端大挑战QD2] 获取url参数
[牛客网-前端大挑战QD2] 获取url参数
26 0
|
9月前
|
前端开发
前端学习笔记202307学习笔记第五十五天-node-客户端,服务器,Url之3
前端学习笔记202307学习笔记第五十五天-node-客户端,服务器,Url之3
35 1
|
9月前
|
前端开发
前端学习笔记202307学习笔记第五十五天-node-客户端,服务器,Url
前端学习笔记202307学习笔记第五十五天-node-客户端,服务器,Url
39 0
|
9月前
|
前端开发
前端学习笔记202307学习笔记第五十五天-node-客户端,服务器,Url之2
前端学习笔记202307学习笔记第五十五天-node-客户端,服务器,Url之2
45 0
|
11月前
|
前端开发
前端学习笔记202303学习笔记第三天-Vue3.0-url-loader的loader格式
前端学习笔记202303学习笔记第三天-Vue3.0-url-loader的loader格式
44 0

热门文章

最新文章