【轉載】WEB工作原理簡述
阿新 • • 發佈：2019-01-02
作為一名想學習網站開發, 或者更專業一點說叫"B/S體系結構系統"開發的同學來說, 可能首先想到的是學習各種前端技術, 例如: HTML, CSS, Javascript……, 以及各種動態網站開發技術, 諸如: ASP, ASP.NET, JSP, PHP…… . 但是, 在你開始之前, 請稍安勿躁, 瞭解一下網站是如何工作的往往是一件"磨刀不誤砍柴工"的事情. 曾經接觸過一些公司裡剛入職的程式設計師, 往往會犯一些比較低階的錯誤而百思不得其解, 其實就是入門時的基礎沒有打好. 因此, 這裡我們就簡單來了解一下WEB工作原理. 先上個圖……本人比較懶, 所以就借用了別人做好的圖, 還望原作者本著人道主義的精神不要追究我的責任 
上圖使用了一些相對專業的術語來描述了我們平時上網的一個過程. 簡單來說就是我們上網的那臺裝置(通常稱為"客戶端", 可以是電腦/手機或別的東東) 上面安裝的瀏覽器 (IE, Firefox, Chrome, Opera, Safari……) 作為我們的一個代理向網站伺服器傳送請求(Request), 網站伺服器接收到請求後, 對請求中包含的資訊進行解析, 進行一些處理後把處理的結果以響應(Response)的形式返回給瀏覽器, 最後瀏覽器解析返回的資料包並將其轉化成一個視覺化的介面, 就是我們看到的網頁. 上網的過程大概也就是一個上述過程的迴圈.其中, 一些術語和細節解釋一下:(1) 什麼是URL?
上圖使用了一些相對專業的術語來描述了我們平時上網的一個過程. 簡單來說就是我們上網的那臺裝置(通常稱為"客戶端", 可以是電腦/手機或別的東東) 上面安裝的瀏覽器 (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資料包胖起來, 也就是說, 儘可能地減少在客戶端和伺服器端之間傳輸的資料和傳輸的次數.好吧, 暫時就想到這麼多了……