Web - 第零章 | 網路架構篇

最近在爬文的時候爬到一個我覺得讀起來很舒服的前端工程師的部落格沒一村生活點滴，我在這邊會擷取他的部落格去做一些簡單的介紹和運用。很可惜的是他最新的一篇文章落在[2018.12.16]就停止更新了，而且針對前端這塊更是在[2016.06.11]就停止更新了。

不過他的文章多數是在介紹網路和前端一的一些知識和發展，下面我將會花三到五篇的時間做介紹，而後續將會在另一個類別著重於

JavaScript函式庫(jQuery⋯)
HTML、CSS 和JS工具庫(Bootstrap、AUI⋯)

介紹與使用。

前言

開始之前，我必須要說以下文章內容多數都是轉載於前端工程師該懂的基本東西——網路架構篇。

www 是什麼？

www代表的是World Wide Web，我們所謂的網路是由世界這麼廣大的網路結構所構成的。至於我們平常所說的上網，其實是這個網路的結構的其中一個協定(protocol)，叫http (Hypertext Transfer Protocol)，主要的範疇是我們瀏覽器上看到的這些網頁。

除了這個以外，也有其它的協定，譬如smtp（管email的），ftp（管檔案傳輸的）等。但我們網頁工程師主要focus的是在http這個協定上。

網址 (URL) 是什麼？

網址，就是各個網站的地址，當你想方設法連到一個網頁的時候，就要拿著網址一個一個去問。

是否會發生找不到該地址的時候？
當然會囉，如果你連到一個網站，上面寫的不是一個「頂讓」，而是3個大大的數字「404」，就是代表這個網站不見啦。如果這家人再更貼心一點，在門牌上寫了個「我家在XXX」，那就代表他們搬家了（遷站）。不同的數字，都有不同的意義，有興趣了解的話，可以查詢「http status code」，以下列了一些常見的http status code。

200: OK，代表請求成功，伺服器回應你了
304：代表你之前來過這個網頁囉，直接從瀏覽器的快取（你可以把它想像成是網頁暫存在瀏覽器的歷史畫面）取得網頁資料。
401：需要驗證，請給我你的帳號密碼！
500：伺服器內部發生錯誤，就不是你這個訪客所能掌握的囉！
詳細 HTTP狀態碼

至於如何實現「`瀏覽器`輸入網址`找`到`網頁`」呢？

解釋一下名詞：

瀏覽器：從以前到現在有很多的瀏覽器，有些長輩會直接說就是用這個上網，對老一輩的人說，上網就是開啟瀏覽器。
IE (Internet Explorer)、Chrome (Google Chrome)、火狐 (Firefox)

當然不只有這些瀏覽器，這邊就不一一列出。

找：
那瀏覽器是去問誰然後問到你家在哪裡的？這就要歸功於DNS伺服器(domain name server)和路由器（router）了。網路世界雖然很新潮，但每家都會有一個上古時代的黃頁電話簿（DNS server）。拿著網址，去問他，他就會告訴你，那個「眾裡尋他千百度」的家在哪裡。 router比較像是路邊站著的警察，走到一個路口，你就會遇到不同的警察，然後就問他什麼路要怎麼去。此外，DNS還有一個強大的地方，就是你告訴他url，他會回你ip位址。
網頁 (Webpage)
網頁就是前端工程師發揮的天下了，我們寫的程式，主要都是放在這個稱為「網頁」的東東上。前端工程師最常寫的三種code，叫做「html、css、javascript」，他們不太像路口賣的丸子三兄弟那麼的相似，倒比較像合開一間小公司的三個人。「網頁」就是他們的公司，只要一個人疏忽，整間公司就GG了。

什麼是ip、domain name、url、port？

ip：請把他想像成經緯度(25.017364, 121.539766)，只是ip這個位址是在網路的世界裡面的，而ip的格式是分為ipv4、ipv6。
- ipv4：xxx.xxx.xxx.xxx (xxx為0~255的數字)
- ipv6：x:x:x:x:x:x:x:x (x皆為0000~ffff)
  
  因為ipv4的位址被使用完了，所以才有了後面的ipv6。
domain name：因為人無法很容易記住ip這種地址，所以發明domain name來做處理，這就像是「國立臺灣大學」，但是你不會知道他的地址。但是你可以透過DNS去做詢問「國立台灣大學」在哪裡，而得到地址「10617台北市大安區羅斯福路四段1號」。
「國立台灣大學」是domain name；
「10617台北市大安區羅斯福路四段1號」是ip位址。
url：url 和 domain name乍看之下可能會很接近，但是仔細想想就會發現他們不太一樣。一個domain name底下可以有很多的url，每個網頁都是一個，但是domain name就只有一個。就像國立臺灣大學有文學院、理學院，而文學院裡面可能還有一間學院辦公室，層層包容。
port：有了這個東西，才可以找到你要的人。一般來說，透過http這個protocol來接網頁，都是用到80這個port，而他的弟弟（會這麼說是因為他比較晚出生）https則是443。port有點像一個房子裡住的人的令牌。到了一個住家，你可以說，「不好意思，可以請port 80的人(http)接待我嗎？」，那他就會用國際規定的方式接待你，要你遞給他一個request，然後他會給你一個response。為什麼說是國際規定的方式？因為這些不同的protocol在進行溝通的時候，全部都是依照網際網路工程任務小組（IETF）所發佈的RFC（Request For Comments，可以想像它是一個標準）進行。

指定port的方式是ip-number:port-number。一般來說都不用指定，因為預設就是port 80。
順帶一提，https是比他哥哥http更優秀的協定，多出來的s代表security，也就是他比http的明文傳送，更具有保密性。

Request & Response 是什麼？

簡單來說，request 就是你去拜訪一個人時，身上帶著的信，上面寫著你想要給他什麼，你可能需要些什麼，response就是對方在看完你的request後給你的回覆信。當然，這個過程可能會發生底下這種情況。

你好，這是我的request。
………
你好，這是我的request。
………
你好，這是我的request。
………

恭喜你，你被發無聲卡啦，而且還是最無聲的那種。這時你的瀏覽器大概會有個圈圈一直轉，然後最後跳出一個error，說時間timeout了。那這種情形有可能是server的程式沒有寫好，沒有回覆你一些該回覆的東西。當然也有可能會回傳不同的http status code，那根據不同的status code，你可以知道發了什麼事。

在網路的世界裡，拜訪和回覆都是非常制式化的，也就是說request和response該怎麼寫，都是有規定好的。不過不用擔心這些繁文縟節該怎麼寫，因為會有程式庫（library）幫你把它搞定。

Request & Response 的方法？

get和post，就是指拜訪人家，跟人家拿資料或給資料的方式（method）。這兩個方法是最一般的方式，當然還有其它諸如put、delete……，但是沒那麼常用到。當我們的browser連到一個網站去的時候，其實就是用get的方法去取得網頁內容。get方法除了拿到網頁內容之外，也可以傳資料過去，瀏覽器就會根據傳的資料，回覆相對應的內容。這些參數，你可以在網址列上面看到。

而post比較特別，他一般是用來做表單（form）傳送資料用的，像是帳號密碼、基本資料等。也因為他傳的資料不會在網址列上顯示，所以比起get，具有較高的保密性。