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