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 較爲古老, 如今已不推薦使用.