天天見的URL，我想了解你多一點

以輕鬆的文筆描述通俗易懂的「人話」版的URL基礎知識，主要分為四個部分：URL的運作原理、為什麼連代理可以訪問被谷歌等國外網站、URL的組成元素和狀態碼簡單介紹。為小白們揭開URL的神秘面紗。

寫在前面

——此部分可不看，只是筆者一點小感觸——

對於沒有技術背景的產品經理，技術知識像黑盒一樣神秘。在實際工作中遇到的一些技術知識點，雖當時記錄且理解，但再次遇到後常會發現相關記憶消失了...思索後，總結原因有二，一是記錄大都以複製粘貼的形式，筆記是滿滿一篇，但缺少自己的消化和輸出；二是，技術背景過於薄弱，只能藉助多回顧和實踐，才能真正掌握。舉個例子，我是英語專業的，如果接觸到新的單詞，如果知道讀音再看幾個例句，基本就能記住拼寫和怎麼用。但如果是一個英語基礎薄弱的人，可能需要花更多的時間去記憶。這是因為新知識的記憶會依賴於舊知識的積累，如果能用相關記憶或聯想記憶，新的知識點比較容易理解和運用。

所以呢，我會嘗試將接觸到的技術點重新咀嚼再用自己的語言輸出。如果有技術大大們發現有不嚴謹之處，跪求指正(??????) ?

一、為什么輸入URL就能看到網頁呢？

終於盼來了周六，小刀打開電腦，nice，正在追的美劇也更新了，看得津津有味的小刀突然想：為什麼在瀏覽器我輸入鏈接後，就出現了網頁？網頁裡面內容是從哪兒來的？

Web頁面當然不會憑空而來，實際上是根據瀏覽器地址欄中的URL，Web瀏覽器將從Web服務端獲取的資源信息，顯示在網頁中。具體過程參照下圖（手機屏幕小，記得放大看）。

舉個通俗易懂的例子，小刀（客戶端）需要借一本編號為XXX的書，於是發請求給中國圖書館（伺服器，資源所在地），中國圖書館一聽，愛學習的好青年啊，於是找到這本書並將書發給小刀。當然這個過程遠不止這麼簡單，對於非技術人員來說，理解到這就差不多啦。

二、為什麼連接代理可以訪問谷歌等國外網站？

小刀聽說谷歌日曆很好用，想體驗一下，但是國內根本打不開呀。於是求助大魚，大魚說easy啊，安裝了個軟體並連了日本的代理。小刀一試，果然可以正常訪問了。這個案例中，谷歌的伺服器在中國無法訪問，但是在日本可以訪問，而在中國可以訪問這個日本的代理伺服器。所以，從中國發出的請求經過了日本代理伺服器的周轉，將谷歌的資源返回到中國，這也解釋了為什麼「連代理後可以訪問谷歌」。簡要的過程如下。

這就好比，小刀希望借一家美國圖書館的書，但是自己沒有辦法直接聯繫，只能聯繫到中國圖書館。於是藉助能聯繫到美國圖書館的中國的圖書館，告訴它「我想借美國圖書館裡名為XXX的書」，中國圖書館借到之後再將書送給小刀。

三、URL含有哪些元素？

URL，即Uniform Resource Locator（統一資源定位符），可以理解為我們通常說的網址，代表著網路上資源的地址。一個合規的URL對應的是伺服器上一個特定的資源。

瀏覽器發出Request到Web伺服器時，相當於告訴Web伺服器需要哪個位置的資源。依然拿圖書館的栗子，套用URL的格式，小刀發送給中國圖書館的請求可能是「http://中國圖書館/三樓/文史館/B區/書架F?排數=3&編號=3.23.1」，小刀需要的是位於中國圖書館三樓文史館B區F書架上第三排編號是3.23.1的那本書，中國圖書館根據信息定位到小刀需要的資源。

那麼一個網頁的URL包含哪些元素呢？我們來解剖一下：

以周小刀 - 知乎為例來解釋，包含以下元素：

① Scheme協議

協議以「: 」作為結束符，表示獲取該資源需要的協議，包括數據如何封裝打包等規則。常見的協議有http和https（加密），也有以ftp、thunder（迅雷）開頭的協議。

② 分隔符

基本上每個 URL 都會包含這個符號，可以理解為將協議與後方信息隔開的符號。

③ Address伺服器地址/域名

決定了去哪個伺服器上去獲取資源，如如果我們例子中URL，意味著我們是從http://zhihu.com獲取資源。同樣，「http://中國圖書館/三樓/文史館/B區/書架F?排數=3&編號=3.23.1」意味著去中國圖書館獲取資源。

④ Port埠

如果URL中沒有埠，則訪問時使用默認埠。埠可以理解為訪問伺服器有多個服務的點，URL中不同埠代表可以通過不同的點提供服務。http的埠默認是80，https的埠默認是443，知乎的鏈接寫成https://www.zhihu.com/people/reminiscer/answers?page=3也可以正常訪問。繼續拿圖書館的做例子，圖書館有東南西北四個門都可以訪問，如果路徑中寫上南門，那麼就從南門進出，如果沒有寫就默認走東門。

⑤ 路徑

路徑，從第一個/到?之間的部分，代表所訪問的資源所在的路徑和名稱，很好理解，與電腦本地的文件夾的路徑十分類似，例如 D:/Desktop/File1/a.png代表著a圖片在電腦上的路徑。/people/reminiscer/answers，一層層細分到answers文件。

⑥ 參數

參數用於本地的信息傳給伺服器，例如?page=3代表第三頁，如果有多個參數用&鏈接，例如?id=123&name=456、?排數=3&編號=3.23.1（from萬能的圖書館案例）。

⑦錨點

錨點用於頁面定位，比如十分常見的網頁右下角的「回到頂部」就是利用錨點實現的。URL中錨點的形式為#+元素，錨點信息不是必備的， 並且錨點信息不會隨客戶端的請求發送到伺服器。

一般的URL會包含以上幾個元素，大家使用瀏覽器的過程中，不妨下意識多觀察和「解剖」，揭開URL神秘面紗。

四、啊，網頁顯示404？！

頁面顯示404，相信很多人都見過，這到底代表什麼意思呢？

其實，這是狀態碼的一種，狀態碼的職責是當客戶端向伺服器發送請求時，描述返回的請求結果。藉助於狀態碼，可以指定請求成功還是異常。狀態碼由三位數和原因短語組成，如果200 OK，404 NOT FOUND。具體有以下五大類：

圖片來自《圖解HTTP》

使用谷歌瀏覽器的開發者工具可以查看網站請求的資源的狀態，如下圖，這個圖片請求狀態碼是200，表示請求成功。

至於利用谷歌瀏覽器開發者工具怎麼查看，這次就不細說啦，下一篇我會介紹作為《產品經理可以藉助谷歌瀏覽器開發者工具來做什麼》，谷歌瀏覽器開發者工具功能多而全，很實用哦，敬請期待~~?(^?^*)
推薦閱讀：