参考 MDN 上的权威描述: HTTP 请求的内容统称为"资源", "资源" 可以指文档(HTML)、图片(JPG/JPEG/PNG等)、 级联样式表(CSS)、 多媒体资源(mp3/mp4), 每种资源都能够使用一个 (URI) 来进行标识, 也即每一种资源能通过 URI 来获取该种资源。
URL 的含义
URL(Universal Resource Locator) 含义为统一资源定位符, 是 URI(Universal Resource Identifier) 统一资源标志符 的子集, URL 一定是一个 URI, 但一个 URI 不一定是一个 URL, 也可能是URN(Universal Resource Name)统一资源名称, URL代表资源的路径地址, 也即是我们常用的 “链接”、“网址”。
URL 常见形式: www.example.com:80/path/to/myf… URN 常见形式: urn:isbn:9780141036144
URL 的组成
www.throughGalaxy.com:8081/path?querys…
[http]: 协议(protocol) 指通讯协议,有的地方也称作 scheme, 常见的有:
http/https: 超文本传输协议/安全的超文本传输协议 互联网传输资源的首选协议, https 的 s 代表 ssl(安全套接层)/tls(安全传输层) 协议 file: 本地文件传输协议 主要用于访问本地计算机中的文件, 效果与资源管理器查看文件类似 ftp: 文件传输协议 允许用户以文件操作的方式(如文件的增、删、改、查、传送等)与另一主机相互通信, 且不需要真正登录到目标计算机上即可执行操作 ssh: 安全 shell 专为远程登录会话和其他网络服务提供安全性的协议, 几乎所有UNIX系平台都可以运行 SSH ws/wss: WebSocket 通讯协议 HTML 5 中提出的, 基于TCP传输协议,并复用HTTP的握手通道而使 浏览器具备了实时双向通信的能力 的协议, wss 则是 ws on ssl/tls
[www.througThehGalaxy.com]: 主机(host), 也称域名, 表示URL中指向的资源由哪个主机进行管理、存放, 主机最终会指向一个IP 地址 便如 8.8.8.8 之类 [:8081]: 端口(port), 表示用于访问 Web 服务器上资源的技术“门”。如果访问的该 Web 服务器使用HTTP协议的标准端口(HTTP为80,HTTPS为443)授予对其资源的访问权限,则通常省略此部分。否则端口就是 URI 必须的部分。 [/path]: 路径(path), 用于标识资源在服务器主机上的物理位置, 现在已没有这种含义,只是URL的一个标准组成部份 [?querystring=url&type=unknow]: 查询字符串(querystring), 常用于在获取资源时提供参数帮助标识资源特性,常见形式为 问号之后 使用 & 号分隔键值对 [#hash]: 锚点(hash), 代表网页中的一个位置, 一船用来指导浏览器动作,对服务器端完全无用。HTTP请求中不包括#, 单页面(spa)应用使用较多。
URL 中 查询字符串(querystring) 的使用/解析
解析
正则法:
function getQueryString(querystring, name) {
const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
const ret = querystring.substring(1).match(reg);
if (!!ret) {
return decodeURIComponent(ret[2]);
}
return null;
}
数组拆分法:
function GetRequest(querystring) {
const url = querystring.substring(1);
const ret = {};
const strs = url.split("&");
for(let i = 0; i < strs.length; i++) {
const [key, val] = strs[i].split("=");
ret[key] = decodeURIComponent(val);
}
return ret;
}
URLSearchParams 大法:
URLSearchParams 对象定义了操作 URL 查询字符串的实用方法.
const queryString = "type=books&id=1314920";
const searchParams = new URLSearchParams(queryString);
searchParams.has('type'); // true 表示拥有type这个字段
searchParams.get('type'); // "books" 正确地取到了查询字符串上 type 的值
searchParams.toString(); // 返回了 "type=books&id=1314920", 实际上这个方法是在构造完查询字符串对象后生成用的
像这样
const newSearchParamsObject = new URLSearchParams();
newSearchParamsObject.append('page', 1);
newSearchParamsObject.append('size', 12);
newSearchParamsObject.append('sort', 'desc');
newSearchParamsObject.append('sortBy', 'date');
newSearchParamsObject.toString(); // "page=1&size=12&sort=desc&sortBy=date"
此外 URLSearchParams的实例还拥有 delete/entries/forEach/getAll/keys/set/sort/values 方法,读者朋友可自己亲自实践
URL 编码
URL 只能使用 ASCII 字符集. 不属于 ASCII 中的字符, 都必须 进行编码才能使用 URL来进行表示, 若传输时使用了特殊的字符, 会造成不必要的问题, 导致服务器不能解析, 所以URL编码显得很有必要。 URL中包含 中文, 部份非英文字符等,都可能造成问题。
编码方法
使用 Javascript 中 3对方法进行URL的 编码/解码 操作: escape/unescape, encodeURI/decodeURI 和 encodeURIComponent/decodeURIComponent, 三者适用场合不同, encodeURI 用于对整个URI进行编码, 而encodeURIComponent 被用于对URI的一部份进行编码, 通常是指查询字符串或路径, 而 escape 较为古老, 现在已不推荐使用.