web 的工作原理


作爲一名想學習網站開發, 或者更專業一點說叫"B/S體系結構系統"開發的同學來說, 可能首先想到的是學習各種前端技術, 例如: HTML, CSS, Javascript……, 以及各種動態網站開發技術, 諸如: ASP, ASP.NET, JSP, PHP…… . 但是, 在你開始之前, 請稍安勿躁, 瞭解一下網站是如何工作的往往是一件"磨刀不誤砍柴工"的事情. 


曾經接觸過一些公司裏剛入職的程序員, 往往會犯一些比較低級的錯誤而百思不得其解, 其實就是入門時的基礎沒有打好. 因此, 這裏我們就簡單來了解一下WEB工作原理. 

先上個圖……本人比較懶, 所以就借用了別人做好的圖, 還望原作者本着人道主義的精神不要追究我的責任WEB工作原理簡述 - bailey - Baileys Blog
WEB工作原理簡述 - bailey - Baileys Blog

 上圖使用了一些相對專業的術語來描述了我們平時上網的一個過程. 簡單來說就是我們上網的那臺設備(通常稱爲"客戶端", 可以是電腦/手機或別的東東) 上面安裝的瀏覽器 (IE, Firefox, Chrome, Opera, Safari……) 作爲我們的一個代理向網站服務器發送請求(Request), 網站服務器接收到請求後, 對請求中包含的信息進行解析, 進行一些處理後把處理的結果以響應(Response)的形式返回給瀏覽器, 最後瀏覽器解析返回的數據包並將其轉化成一個可視化的界面, 就是我們看到的網頁. 上網的過程大概也就是一個上述過程的循環.

其中, 一些術語和細節解釋一下:
(1) 什麼是URL?  
"全球資源定位器 ( Uniform Resource Locator ). 真的好專業, 挺能唬人, 呵呵~ 簡單來說, 就是用來描述Internet上的某一個資源所在位置的一個字符串, 比如我們平時說的網址, 當然也可以是Internet上的一張圖片, 一個視頻或其它東東. 根據URL計算機至少可以得到2個信息: (a) 資源所在的服務器的地址; (b) 資源在服務器上的存放路徑.

(2) 什麼是HTTP協議?
超文本傳輸協議 ( Hyper Text Transport Protocol ). 呵呵, 還是好專業…… 好吧, 簡單點說, 就是一種計算機之間傳輸數據所遵循的協議, 這裏所說的協議其實是一種數據封裝的規範. 計算機會把要傳輸的數據封裝成一個叫做"數據包"的東東,  協議就規定了這個"數據包"裏應該有些什麼信息, 這些信息分別應該放在什麼位置, 等等.   HTTP協議就是衆多協議中的一種, 它詳細規定了瀏覽器與網站服務器之間進行數據傳輸的規範. 具體HTTP協議裏規定了些什麼東東? 感興趣的同學可以查一下別的資料. 但可以想到裏面肯定包含了收發方的地址信息和我們要傳輸的數據主體, 呵呵~   總之, 上網看八卦就得靠它了……

(3) 遵循HTTP協議封裝的數據還要經過更低層的一些協議封裝, 最後通過物理鏈路傳輸到服務器. 這就不解釋了, 再解釋就天亮了……  感興趣的, 可以看看計算機網絡, ISO模型之類的東東

(4) 服務器收到HTTP請求之後幹什麼呢? 大體來說, 3件事: (a) 找到你要的東西; (b) 進行一些應該在服務器端完成的處理, 比如: 執行服務器端腳本. 當然這一步並非對所有請求都是必須的; (c) 把處理結果封裝成HTTP協議描述的數據包, 返回給客戶端.

(5) 瀏覽器收到服務器返回的響應之後, 解析得到的數據, 將其轉化成一個圖形化的界面, 就是我們看到的網頁. 當然, 如果其中還包含Javascript之類的腳本, 瀏覽器還會執行它……

接下來幹什麼呢? 輸入另一個網址, 繼續上網唄, 呵呵~   當然, "輸入"這個詞不太準確, 我們不會老是去地址欄輸網址吧…… "輸入"的方式還可以是點擊網頁中的一個超鏈接或是提交網頁中的一個表單(比如: 發帖子的時候, 在輸入框裏寫好的要發的信息後點擊"發送"按鈕) . 還有別的方式嗎? 也許, 但暫時想不到了……

OK, 現在大概有點感覺了吧……

~~~~~~~~~~~~~~~~~~~~~~ 華麗麗的分隔線 ~~~~~~~~~~~~~~~~~~~~~~~

下面有幾點特別友情提醒一下, 省得今後犯些低級錯誤……

(1) 網站是工作在"兩端"的 (服務器端和客戶端), 即使有些情況下(比如開發/測試環境下) 服務器端和客戶端可能是同一臺電腦, 但應該服務器端和客戶端執行的任務也是運行在兩個完全隔離的進程或內存空間裏的. 所以, 千萬別幹諸如在客戶端腳本中讀寫服務器端腳本中變量的傻事!!  看不懂? 呵呵, 繼續往下看就懂了……

(2) 服務器端除了接收請求和返回響應之外, 可能還會進行一些處理工作. 比如, 執行我們使用ASP/JSP技術做動態網站時候寫在<%  %> 中的代碼, 這通常稱爲服務器端腳本. 當然, 服務器可能還會做更多事情, 比如: 讀寫數據庫, 執行程序等等. 但無論如何, 服務器端無法直接操縱客戶端, 它只能通過"間接"的方式, 比如: 在返回的響應中嵌入客戶端腳本或指令, 由瀏覽器解釋執行, 從而達到操縱客戶端的目的.

(3) 服務器端返回的只有數據或"靜態網頁", 沒有"服務器端腳本"或"服務器端變量". 即便要將服務器端內存中某個變量的值傳給客戶端, 也要經過所謂的"序列化"過程, 轉換成數據流才能到達客戶端. 所以, 千萬別想着把一個服務器端對象直接開放給客戶端來讀寫. 如果你真想這麼幹, 可以學習一下DWR框架……

(4) 對於瀏覽器而言無論它多麼高檔, 作爲最基本的功能, 它處理的就是 HTML, CSS 和 Javascript, 至於其它的…… 比如: 播放Flash, 那就只能靠第三方的插件 或 瀏覽器生產商提供的一些擴展了. 所以, 別想着在瀏覽器裏直接執行Java代碼, 呵呵, 至少目前還不行.

(5) 無論什麼設備, 只要它能接收HTTP請求, 返回HTTP響應那也就可以姑且稱作"WEB服務器", 至於它如何處理接收到的請求, 那就得看你裝了什麼WEB服務器端軟件了. 所以, 客戶端可以是電腦, 手機或別的東東, 服務器端也不一定就是多麼高檔的一臺機器, 它也可能就是一個單片機或嵌入式系統. 想想你進入路由器設置的那個界面, 呵呵~

(6) HTTP 和 HTML沒有必然的聯繫! HTTP是描述數據封裝格式的一種規範, 而HTML是用來告訴瀏覽器網頁內容的一種語言. 所以, 通過HTTP協議傳輸的不一定非得是HTML文檔, 也可以是"純數據", 在使用Ajax技術時大多數情況下從服務器返回的僅是數據而已, 並非完整的HTML文檔.  當然, 還可以想到…… 可以使用HTTP協議下載一個文件. 

(7) 無論客戶端和服務器端是多少龐大和複雜的一個系統, 最終將它們聯繫起來的只是HTTP協議描述的信息. 呵呵, 一切都將被轉換爲最樸素的數據流.

(8) 從上面的圖可以看出, 整個工作過程的"起始點"是由客戶端發起"請求", 也就是說, 服務器端是"被動"的響應. 所以, 通過一般的手段是無法由服務器端主動把數據"推送"給客戶端的. 那不一般的手段是什麼呢? 呵呵, 比如, 很多客戶端框架中使用的"輪詢"或"捎帶"機制.

(9) 客戶端和服務器端誰多幹點活, 究竟那一些該"胖"些或"富"一些, 這是個永恆的話題, 沒有絕對的結論. 但無論如何不應該讓HTTP數據包胖起來, 也就是說, 儘可能地減少在客戶端和服務器端之間傳輸的數據和傳輸的次數.

作爲一名想學習網站開發, 或者更專業一點說叫"B/S體系結構系統"開發的同學來說, 可能首先想到的是學習各種前端技術, 例如: HTML, CSS, Javascript……, 以及各種動態網站開發技術, 諸如: ASP, ASP.NET, JSP, PHP…… . 但是, 在你開始之前, 請稍安勿躁, 瞭解一下網站是如何工作的往往是一件"磨刀不誤砍柴工"的事情. 


曾經接觸過一些公司裏剛入職的程序員, 往往會犯一些比較低級的錯誤而百思不得其解, 其實就是入門時的基礎沒有打好. 因此, 這裏我們就簡單來了解一下WEB工作原理. 

先上個圖……本人比較懶, 所以就借用了別人做好的圖, 還望原作者本着人道主義的精神不要追究我的責任WEB工作原理簡述 - bailey - Baileys Blog
WEB工作原理簡述 - bailey - Baileys Blog

 上圖使用了一些相對專業的術語來描述了我們平時上網的一個過程. 簡單來說就是我們上網的那臺設備(通常稱爲"客戶端", 可以是電腦/手機或別的東東) 上面安裝的瀏覽器 (IE, Firefox, Chrome, Opera, Safari……) 作爲我們的一個代理向網站服務器發送請求(Request), 網站服務器接收到請求後, 對請求中包含的信息進行解析, 進行一些處理後把處理的結果以響應(Response)的形式返回給瀏覽器, 最後瀏覽器解析返回的數據包並將其轉化成一個可視化的界面, 就是我們看到的網頁. 上網的過程大概也就是一個上述過程的循環.

其中, 一些術語和細節解釋一下:
(1) 什麼是URL?  
"全球資源定位器 ( Uniform Resource Locator ). 真的好專業, 挺能唬人, 呵呵~ 簡單來說, 就是用來描述Internet上的某一個資源所在位置的一個字符串, 比如我們平時說的網址, 當然也可以是Internet上的一張圖片, 一個視頻或其它東東. 根據URL計算機至少可以得到2個信息: (a) 資源所在的服務器的地址; (b) 資源在服務器上的存放路徑.

(2) 什麼是HTTP協議?
超文本傳輸協議 ( Hyper Text Transport Protocol ). 呵呵, 還是好專業…… 好吧, 簡單點說, 就是一種計算機之間傳輸數據所遵循的協議, 這裏所說的協議其實是一種數據封裝的規範. 計算機會把要傳輸的數據封裝成一個叫做"數據包"的東東,  協議就規定了這個"數據包"裏應該有些什麼信息, 這些信息分別應該放在什麼位置, 等等.   HTTP協議就是衆多協議中的一種, 它詳細規定了瀏覽器與網站服務器之間進行數據傳輸的規範. 具體HTTP協議裏規定了些什麼東東? 感興趣的同學可以查一下別的資料. 但可以想到裏面肯定包含了收發方的地址信息和我們要傳輸的數據主體, 呵呵~   總之, 上網看八卦就得靠它了……

(3) 遵循HTTP協議封裝的數據還要經過更低層的一些協議封裝, 最後通過物理鏈路傳輸到服務器. 這就不解釋了, 再解釋就天亮了……  感興趣的, 可以看看計算機網絡, ISO模型之類的東東

(4) 服務器收到HTTP請求之後幹什麼呢? 大體來說, 3件事: (a) 找到你要的東西; (b) 進行一些應該在服務器端完成的處理, 比如: 執行服務器端腳本. 當然這一步並非對所有請求都是必須的; (c) 把處理結果封裝成HTTP協議描述的數據包, 返回給客戶端.

(5) 瀏覽器收到服務器返回的響應之後, 解析得到的數據, 將其轉化成一個圖形化的界面, 就是我們看到的網頁. 當然, 如果其中還包含Javascript之類的腳本, 瀏覽器還會執行它……

接下來幹什麼呢? 輸入另一個網址, 繼續上網唄, 呵呵~   當然, "輸入"這個詞不太準確, 我們不會老是去地址欄輸網址吧…… "輸入"的方式還可以是點擊網頁中的一個超鏈接或是提交網頁中的一個表單(比如: 發帖子的時候, 在輸入框裏寫好的要發的信息後點擊"發送"按鈕) . 還有別的方式嗎? 也許, 但暫時想不到了……

OK, 現在大概有點感覺了吧……

~~~~~~~~~~~~~~~~~~~~~~ 華麗麗的分隔線 ~~~~~~~~~~~~~~~~~~~~~~~

下面有幾點特別友情提醒一下, 省得今後犯些低級錯誤……

(1) 網站是工作在"兩端"的 (服務器端和客戶端), 即使有些情況下(比如開發/測試環境下) 服務器端和客戶端可能是同一臺電腦, 但應該服務器端和客戶端執行的任務也是運行在兩個完全隔離的進程或內存空間裏的. 所以, 千萬別幹諸如在客戶端腳本中讀寫服務器端腳本中變量的傻事!!  看不懂? 呵呵, 繼續往下看就懂了……

(2) 服務器端除了接收請求和返回響應之外, 可能還會進行一些處理工作. 比如, 執行我們使用ASP/JSP技術做動態網站時候寫在<%  %> 中的代碼, 這通常稱爲服務器端腳本. 當然, 服務器可能還會做更多事情, 比如: 讀寫數據庫, 執行程序等等. 但無論如何, 服務器端無法直接操縱客戶端, 它只能通過"間接"的方式, 比如: 在返回的響應中嵌入客戶端腳本或指令, 由瀏覽器解釋執行, 從而達到操縱客戶端的目的.

(3) 服務器端返回的只有數據或"靜態網頁", 沒有"服務器端腳本"或"服務器端變量". 即便要將服務器端內存中某個變量的值傳給客戶端, 也要經過所謂的"序列化"過程, 轉換成數據流才能到達客戶端. 所以, 千萬別想着把一個服務器端對象直接開放給客戶端來讀寫. 如果你真想這麼幹, 可以學習一下DWR框架……

(4) 對於瀏覽器而言無論它多麼高檔, 作爲最基本的功能, 它處理的就是 HTML, CSS 和 Javascript, 至於其它的…… 比如: 播放Flash, 那就只能靠第三方的插件 或 瀏覽器生產商提供的一些擴展了. 所以, 別想着在瀏覽器裏直接執行Java代碼, 呵呵, 至少目前還不行.

(5) 無論什麼設備, 只要它能接收HTTP請求, 返回HTTP響應那也就可以姑且稱作"WEB服務器", 至於它如何處理接收到的請求, 那就得看你裝了什麼WEB服務器端軟件了. 所以, 客戶端可以是電腦, 手機或別的東東, 服務器端也不一定就是多麼高檔的一臺機器, 它也可能就是一個單片機或嵌入式系統. 想想你進入路由器設置的那個界面, 呵呵~

(6) HTTP 和 HTML沒有必然的聯繫! HTTP是描述數據封裝格式的一種規範, 而HTML是用來告訴瀏覽器網頁內容的一種語言. 所以, 通過HTTP協議傳輸的不一定非得是HTML文檔, 也可以是"純數據", 在使用Ajax技術時大多數情況下從服務器返回的僅是數據而已, 並非完整的HTML文檔.  當然, 還可以想到…… 可以使用HTTP協議下載一個文件. 

(7) 無論客戶端和服務器端是多少龐大和複雜的一個系統, 最終將它們聯繫起來的只是HTTP協議描述的信息. 呵呵, 一切都將被轉換爲最樸素的數據流.

(8) 從上面的圖可以看出, 整個工作過程的"起始點"是由客戶端發起"請求", 也就是說, 服務器端是"被動"的響應. 所以, 通過一般的手段是無法由服務器端主動把數據"推送"給客戶端的. 那不一般的手段是什麼呢? 呵呵, 比如, 很多客戶端框架中使用的"輪詢"或"捎帶"機制.

(9) 客戶端和服務器端誰多幹點活, 究竟那一些該"胖"些或"富"一些, 這是個永恆的話題, 沒有絕對的結論. 但無論如何不應該讓HTTP數據包胖起來, 也就是說, 儘可能地減少在客戶端和服務器端之間傳輸的數據和傳輸的次數.
發佈了12 篇原創文章 · 獲贊 10 · 訪問量 3萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章