URL知识小结

参考 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 较为古老, 如今已不推荐使用.