URL知识小结

参考 MDN 上的权威描述: HTTP 请求的内容统称为"资源", "资源" 能够指文档(HTML)、图片(JPG/JPEG/PNG等)、 级联样式表(CSS)、 多媒体资源(mp3/mp4), 每种资源都可以使用一个 (URI) 来进行标识, 也即每一种资源能经过 URI 来获取该种资源。html

URL 的含义

URL(Universal Resource Locator) 含义为统一资源定位符, 是 URI(Universal Resource Identifier) 统一资源标志符 的子集, URL 必定是一个 URI, 但一个 URI 不必定是一个 URL, 也多是URN(Universal Resource Name)统一资源名称, URL表明资源的路径地址, 也便是咱们经常使用的 “连接”、“网址”。shell

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: 安全 shellapp

专为远程登陆会话和其余网络服务提供安全性的协议, 几乎全部UNIX系平台均可以运行 SSH

ws/wss: WebSocket 通信协议ssh

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

相关文章
相关标签/搜索