作為一個(gè)軟件開(kāi)發(fā)者，你一定會(huì)對(duì)網(wǎng)絡(luò)應(yīng)用如何工作有一個(gè)完整的層次化的認(rèn)知，同樣這里也包括這些應(yīng)用所用到的技術(shù)：像瀏覽器，HTTP，HTML，網(wǎng)絡(luò)服務(wù)器，需求處理等等。

本文將更深入的研究當(dāng)你輸入一個(gè)網(wǎng)址的時(shí)候，后臺(tái)到底發(fā)生了一件件什么樣的事～

1. 首先嘛，你得在瀏覽器里輸入要網(wǎng)址:

2. 瀏覽器查找域名的IP地址

導(dǎo)航的第一步是通過(guò)訪問(wèn)的域名找出其IP地址。DNS查找過(guò)程如下：

DNS遞歸查找如下圖所示：

3. 瀏覽器給web服務(wù)器發(fā)送一個(gè)HTTP請(qǐng)求

因?yàn)橄馞acebook主頁(yè)這樣的動(dòng)態(tài)頁(yè)面，打開(kāi)后在瀏覽器緩存中很快甚至馬上就會(huì)過(guò)期，毫無(wú)疑問(wèn)他們不能從中讀取。

所以，瀏覽器將把一下請(qǐng)求發(fā)送到Facebook所在的服務(wù)器：

GET http://facebook.com/ HTTP/1.1

Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]

User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]

Accept-Encoding: gzip, deflate

Connection: Keep-Alive

Host: facebook.com

Cookie: datr=1265876274-[...]; locale=en_US; lsd=WW[...]; c_user=2101[...]

GET 這個(gè)請(qǐng)求定義了要讀取的URL： “http://facebook.com/”。 瀏覽器自身定義 (User-Agent 頭)， 和它希望接受什么類型的響應(yīng) (Accept and Accept-Encoding 頭). Connection頭要求服務(wù)器為了后邊的請(qǐng)求不要關(guān)閉TCP連接。

請(qǐng)求中也包含瀏覽器存儲(chǔ)的該域名的cookies。可能你已經(jīng)知道，在不同頁(yè)面請(qǐng)求當(dāng)中，cookies是與跟蹤一個(gè)網(wǎng)站狀態(tài)相匹配的鍵值。這樣cookies會(huì)存儲(chǔ)登錄用戶名，服務(wù)器分配的密碼和一些用戶設(shè)置等。Cookies會(huì)以文本文檔形式存儲(chǔ)在客戶機(jī)里，每次請(qǐng)求時(shí)發(fā)送給服務(wù)器。

4. facebook服務(wù)的永久重定向響應(yīng)

圖中所示為Facebook服務(wù)器發(fā)回給瀏覽器的響應(yīng)：

HTTP/1.1 301 Moved Permanently

Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,

pre-check=0

Expires: Sat, 01 Jan 2000 00:00:00 GMT

Location: http://www.facebook.com/

P3P: CP="DSP LAW"

Pragma: no-cache

Set-Cookie: made_write_conn=deleted; expires=Thu, 12-Feb-2009 05:09:50 GMT;

path=/; domain=.facebook.com; httponly

Content-Type: text/html; charset=utf-8

X-Cnection: close

Date: Fri, 12 Feb 2010 05:09:51 GMT

Content-Length: 0

服務(wù)器給瀏覽器響應(yīng)一個(gè)301永久重定向響應(yīng)，這樣瀏覽器就會(huì)訪問(wèn)“http://www.facebook.com/” 而非“http://facebook.com/”。

5. 瀏覽器跟蹤重定向地址

現(xiàn)在，瀏覽器知道了“http://www.facebook.com/”才是要訪問(wèn)的正確地址，所以它會(huì)發(fā)送另一個(gè)獲取請(qǐng)求：

GET http://www.facebook.com/ HTTP/1.1

Accept: application/x-ms-application, image/jpeg, application/xaml+xml, [...]

Accept-Language: en-US

User-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; [...]

Accept-Encoding: gzip, deflate

Connection: Keep-Alive

Cookie: lsd=XW[...]; c_user=21[...]; x-referer=[...]

Host: www.facebook.com

頭信息以之前請(qǐng)求中的意義相同。

6. 服務(wù)器“處理”請(qǐng)求

服務(wù)器接收到獲取請(qǐng)求，然后處理并返回一個(gè)響應(yīng)。

這表面上看起來(lái)是一個(gè)順向的任務(wù)，但其實(shí)這中間發(fā)生了很多有意思的東西- 就像作者博客這樣簡(jiǎn)單的網(wǎng)站，何況像facebook那樣訪問(wèn)量大的網(wǎng)站呢！

• Web 服務(wù)器軟件
  web服務(wù)器軟件（像IIS和阿帕奇）接收到HTTP請(qǐng)求，然后確定執(zhí)行什么請(qǐng)求處理來(lái)處理它。請(qǐng)求處理就是一個(gè)能夠讀懂請(qǐng)求并且能生成HTML來(lái)進(jìn)行響應(yīng)的程序（像ASP.NET,PHP,RUBY...）。

  舉個(gè)最簡(jiǎn)單的例子，需求處理可以以映射網(wǎng)站地址結(jié)構(gòu)的文件層次存儲(chǔ)。像http://example.com/folder1/page1.aspx這個(gè)地址會(huì)映射/httpdocs/folder1/page1.aspx這個(gè)文件。web服務(wù)器軟件可以設(shè)置成為地址人工的對(duì)應(yīng)請(qǐng)求處理，這樣page1.aspx的發(fā)布地址就可以是http://example.com/folder1/page1。

• 請(qǐng)求處理
  請(qǐng)求處理閱讀請(qǐng)求及它的參數(shù)和cookies。它會(huì)讀取也可能更新一些數(shù)據(jù)，并講數(shù)據(jù)存儲(chǔ)在服務(wù)器上。然后，需求處理會(huì)生成一個(gè)HTML響應(yīng)。

7. 服務(wù)器發(fā)回一個(gè)HTML響應(yīng)

圖中為服務(wù)器生成并返回的響應(yīng)：

HTTP/1.1 200 OK

Cache-Control: private, no-store, no-cache, must-revalidate, post-check=0,

pre-check=0

Expires: Sat, 01 Jan 2000 00:00:00 GMT

P3P: CP="DSP LAW"

Pragma: no-cache

Content-Encoding: gzip

Content-Type: text/html; charset=utf-8

X-Cnection: close

Transfer-Encoding: chunked

Date: Fri, 12 Feb 2010 09:05:55 GMT



2b3????????T?n?@????[...]

整個(gè)響應(yīng)大小為35kB，其中大部分在整理后以blob類型傳輸。

內(nèi)容編碼頭告訴瀏覽器整個(gè)響應(yīng)體用gzip算法進(jìn)行壓縮。解壓blob塊后，你可以看到如下期望的HTML：

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



lang="en" id="facebook" class=" no_js">







...

關(guān)于壓縮，頭信息說(shuō)明了是否緩存這個(gè)頁(yè)面，如果緩存的話如何去做，有什么cookies要去設(shè)置（前面這個(gè)響應(yīng)里沒(méi)有這點(diǎn)）和隱私信息等等。

8. 瀏覽器開(kāi)始顯示HTML

在瀏覽器沒(méi)有完整接受全部HTML文檔時(shí)，它就已經(jīng)開(kāi)始顯示這個(gè)頁(yè)面了：

9. 瀏覽器發(fā)送獲取嵌入在HTML中的對(duì)象

在瀏覽器顯示HTML時(shí)，它會(huì)注意到需要獲取其他地址內(nèi)容的標(biāo)簽。這時(shí)，瀏覽器會(huì)發(fā)送一個(gè)獲取請(qǐng)求來(lái)重新獲得這些文件。

下面是幾個(gè)我們?cè)L問(wèn)facebook.com時(shí)需要重獲取的幾個(gè)URL：

• 圖片
  http://static.ak.fbcdn.net/rsrc.php/z12E0/hash/8q2anwu7.gif
  http://static.ak.fbcdn.net/rsrc.php/zBS5C/hash/7hwy7at6.gif
  …
• CSS 式樣表
  http://static.ak.fbcdn.net/rsrc.php/z448Z/hash/2plh8s4n.css
  http://static.ak.fbcdn.net/rsrc.php/zANE1/hash/cvtutcee.css
  …
• JavaScript 文件
  http://static.ak.fbcdn.net/rsrc.php/zEMOA/hash/c8yzb6ub.js
  http://static.ak.fbcdn.net/rsrc.php/z6R9L/hash/cq2lgbs8.js
  …

這些地址都要經(jīng)歷一個(gè)和HTML讀取類似的過(guò)程。所以瀏覽器會(huì)在DNS中查找這些域名，發(fā)送請(qǐng)求，重定向等等...

但不像動(dòng)態(tài)頁(yè)面那樣，靜態(tài)文件會(huì)允許瀏覽器對(duì)其進(jìn)行緩存。有的文件可能會(huì)不需要與服務(wù)器通訊，而從緩存中直接讀取。服務(wù)器的響應(yīng)中包含了靜態(tài)文件保存的期限信息，所以瀏覽器知道要把它們緩存多長(zhǎng)時(shí)間。還有，每個(gè)響應(yīng)都可能包含像版本號(hào)一樣工作的ETag頭（被請(qǐng)求變量的實(shí)體值），如果瀏覽器觀察到文件的版本ETag信息已經(jīng)存在，就馬上停止這個(gè)文件的傳輸。

10. 瀏覽器發(fā)送異步（AJAX）請(qǐng)求

在Web 2.0偉大精神的指引下，頁(yè)面顯示完成后客戶端仍與服務(wù)器端保持著聯(lián)系。

以Facebook聊天功能為例，它會(huì)持續(xù)與服務(wù)器保持聯(lián)系來(lái)及時(shí)更新你那些亮亮灰灰的好友狀態(tài)。為了更新這些頭像亮著的好友狀態(tài)，在瀏覽器中執(zhí)行的JavaScript代碼會(huì)給服務(wù)器發(fā)送異步請(qǐng)求。這個(gè)異步請(qǐng)求發(fā)送給特定的地址，它是一個(gè)按照程式構(gòu)造的獲取或發(fā)送請(qǐng)求。還是在Facebook這個(gè)例子中，客戶端發(fā)送給http://www.facebook.com/ajax/chat/buddy_list.php一個(gè)發(fā)布請(qǐng)求來(lái)獲取你好友里哪個(gè)在線的狀態(tài)信息。

提起這個(gè)模式，就必須要講講"AJAX"-- “異步JavaScript 和 XML”，雖然服務(wù)器為什么用XML格式來(lái)進(jìn)行響應(yīng)也沒(méi)有個(gè)一清二白的原因。再舉個(gè)例子吧，對(duì)于異步請(qǐng)求，F(xiàn)acebook會(huì)返回一些JavaScript的代碼片段。

總結(jié)一下

希望看了本文，你能明白不同的網(wǎng)絡(luò)模塊是如何協(xié)同工作的。

修改了一些錯(cuò)字，之前不仔細(xì)，請(qǐng)大家見(jiàn)諒~