你有沒有好奇過，當你試圖打開一個網頁的時候，這個世界上都發生了一些什麼事情？會不會因為你手氣鍵落，產生了蝴蝶效應，指尖的風拂起千年後你夢中的那個女孩的劉海？咳，也不是沒有可能。今天我就來告訴你會發生什麼事情，你可以沏一壺茶，坐在躺椅上，慢慢品味……
時光倒流到你剛才打開這個頁面的那一瞬間…
Hi！大家好，我的名字叫做瀏覽器，我還有個很酷的英文名字叫做Browser！很高興認識你！
什麼，你想上百度？沒問題！請你告訴我一下，百度的地址是什麼？或者說，百度的URL是什麼？
對了，給你介紹一下URL，全稱Unified Resource Locator，中文名為統一資源定位符，也就是我們俗稱的網址。它就像互聯網上的門牌一樣，而瀏覽器就好像的士司機。你只要告訴瀏覽器你想要看的網頁的URL，他就會把你載到那裡啦！
嗯，百度的地址是http://baidu.com是吧，好嘞！我現在就開始幫你去把這個網頁給請過來。
首先，我先要找到這個網頁的家在哪裡。網頁的家有一個名字叫做服務器，它的英文名叫做Server。服務器本身其實也是一臺電腦，跟你家中的電腦其實是非常相似的。只不過相比起來，服務器性能會比普通的電腦的性能來得強勁，因為它需要服務成千上萬個人！
那麼這麼多的服務器，我怎麼找到百度所在的那個服務器呢？就靠你剛才告訴我的URL了！URL只是服務器地址的一個比較好聽的名字而已，我沒有辦法直接通過這個地址找到服務器。其實啊，在服務器的世界裡面，他們還有一種更精確的地址表達方式，叫做IP地址。
插一嘴：IP地址是什麼，它是怎麼工作的，恐怕可以寫好幾本書了。簡單地說，IP地址就是形同192.168.0.1這種形式的數字和英文句號的組合。你可以把它當做相對URL來講更加準確的地址。
我找到IP地址的方式其實很簡單，我只要請操作系統（OS, Operating System）幫忙就好了。所謂的操作系統，就是類似Windows、Mac OS一樣的軟件，你能夠在它們上面安裝各種各樣的軟件。其中Mac OS是蘋果電腦專用的操作系統。
這個從URL到IP地址的過程叫做DNS查找，即DNS Lookup。天啊，又一個新名詞！沒關係，你不需要記住這個名詞。你所需要知道的是，這裡看似操作系統獨自很快地完成了這個過程，但是其實它為此所做的事情相當複雜。我們今後將有專門的文章用來介紹這一過程。
建立連接和發送請求
已經順利拿到了服務器的IP地址，接下來我就要向他要東西啦！首先我希望它把baidu.com對應的網頁傳送給我。我們之間傳輸信息的方式比較特殊，不需要我坐地鐵去找它然後搬回來，而是我會跟服務器建立一個連接。
連接，英文名叫做Connection。實際上，它就像開闢了一個專用的通道，供我們互相之間傳遞信息。
接下來，我就會通過這個專用通道，向服務器發起一個請求（Request）。在這個請求裡面，我會像服務器闡明我想要的資源是什麼，例如在這裡，我想要的資源就是百度的首頁。
那麼具體這個資源的位置我是怎麼告訴服務器的呢？還得回到剛才的URL來說！
一個URL一般由六個部分組成，這裡我們只介紹主機名（服務器名）和資源位置（或者說是資源路徑）。一個服務器上可以有很多的資源，對應著不同的頁面或者文件，例如http://xxx.com/login可以是某網站的登錄頁面，http://xxx.com/register則可以是某網站的註冊頁面。這裡的/login和/register就代表了兩個不同的資源（這裡是頁面）。/是比較特殊的資源路徑，叫做“根路徑”，通常就是網站的首頁了。其實，這裡的原理就和我們電腦上的文件夾是一模一樣的。
在知道了需要的資源的位置之後，我就會給服務器發送一個請求。這個請求實際上就是一系列的英文字符，就像一篇文章一樣。
GET / HTTP/1.1
User-Agent: curl/7.37.1
Host: baidu.com
Accept: */*
怎麼樣，我也是很有文采的吧！在這裡，你需要知道的是，GET /即代表，我現在要從服務器上拿下來一個資源，這個資源的位置是/。另外，Host: baidu.com代表我要請求的主機名叫做baidu.com。Host這個英文單詞就是有主機的意思！
好了，請求已經準備完畢了，我現在就通過之前建立的連接將這個請求直接送給服務器！
獲得響應
當服務器獲得請求之後，經過一系列的工作（可能是類似翻箱倒櫃找材料之類的吧），最後將要送還給我的材料，包括網頁的代碼，全部打包起來形成一個響應（Response），通過連接返回給我。
響應是和請求對應的，一個請求對應一個響應。這就好像問問題一樣，一問一答。所以，響應本身其實也就是一系列的英文字符，就像這樣：（下面的響應是被簡化的版本）
HTTP/1.1 200 OK
Date: Mon, 31 Aug 2015 03:06:34 GMT
Server: Apache
Cache-Control: max-age=86400
Expires: Tue, 01 Sep 2015 03:06:34 GMT
Last-Modified: Tue, 12 Jan 2010 13:48:00 GMT
ETag: "51-4b4c7d90"
Accept-Ranges: bytes
Content-Length: 81
Connection: Keep-Alive
Content-Type: text/html
<html>
.... 此處省略N多行
</html>
你可以注意到，響應分為兩個部分。在<html>行之上的部分稱作響應頭（Response Head），下面的部分稱作響應主體（Response Body）。在這裡，響應主體就是網頁的代碼了。
好了，到目前為止，我已經拿到了網頁的代碼。瀏覽器根據代碼渲染頁面即可
作者：子回（John Wu）
原文：http://blog.leapoahead.com/