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 常见形式：　http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
URN 常见形式：　urn:isbn:9780141036144

URL 的组成

http://www.throughGalaxy.com:8081/path?querystring=url&type=unknow#hash

http/https: 超文本传输​​协议／安全的超文本传输协议

互联网传输资源的首选协议, https 的 s 代表 ssl(安全套接层)/tls(安全传输层) 协议

file: 本地文件传输协议

主要用于访问本地计算机中的文件, 效果与资源管理器查看文件类似

ftp: 文件传输协议

允许用户以文件操作的方式（如文件的增、删、改、查、传送等）与另一主机相互通信, 且不需要真正登录到目标计算机上即可执行操作

ssh: 安全 shell

专为远程登录会话和其他网络服务提供安全性的协议, 几乎所有UNIX系平台都可以运行 SSH

ws/wss: WebSocket 通讯协议

HTML 5 中提出的， 基于TCP传输协议，并复用HTTP的握手通道而使 浏览器具备了实时双向通信的能力 的协议, wss 则是 ws on ssl/tls

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 较为古老, 现在已不推荐使用.