Web請求響應簡單整理


 

 

簡單對Web請求響應如何處理進行的整理,難免有理解不到位,理解有偏差的地方,如有理解有誤的地方,希望大牛批評指正。

1.Web開發的定義
首先看看微軟對Web開發的定義:
Web開發是一個指代網頁或網站編寫過程的廣義術語。網頁使用 HTML、CSS 和 JavaScript編寫。這些頁面可能是類似於文檔的簡單文本和圖形。頁面也可以是交互式的,或顯示變化的信息。編寫交互式服務器頁面略微復雜一些,但卻可以實現更豐富的網站。如今的大多數頁面都是交互式的,並提供了購物車、動態可視化甚至復雜的社交網絡等現代在線服務。

通俗的說,Web開發就是我們說的做網站.它分為網頁部分和邏輯部分也就是我們說的前台頁面展示與后台業務邏輯處理。前台負責與用戶的交互顯示數據,用到HTML標簽布局頁面,CSS樣式渲染頁面,JavaScript腳本(或AJAX、JQuery、Extjs)編寫動態交互性強的頁面;后台編寫處理一些復雜業務邏輯的程序.可以用C#,JAVA,PHP等語言。

2.Web請求響應簡單理解
客戶端瀏覽器對服務器端進行一次請求的演示圖:


<1>.客戶端發送請求。客戶端瀏覽器向服務器發送請求URL;
<2>.服務器接收請求。服務器接收到該瀏覽器發送的請求;
<3>.服務器生成HTML。服務器解析請求的URL,根據URL確定請求的目標資源文件;
   這個資源文件通常是一個動態頁面(如ASP,PHP,JSP,ASPX等文件)的網絡地址(MVC結構的程序例外)。Web服務器根據動態頁面文件的內容和URL中的參數,調用相應的資源(數據庫數據或圖片文件等等)組織數據,生成HTML頁面。
<4>.服務端響應請求。生成HTML文檔以后,服務器響應瀏覽器的請求,將生成的HTML文檔發送給客戶端瀏覽器;
<5>.客戶端接收響應。瀏覽器接收服務端發出的請求得來HTML文檔;
<6>.客戶端解析HTML。瀏覽器對HTML文檔進行解析,並加載相關的資源文件(JS,CSS,多媒體資源,內嵌網頁)等,(在這里瀏覽器解悉完HTML文檔以后,就會進行呈現,但同時也會向服務器發送請求來請求其它相關的資源文件)
<7>.服務器發送資源文件。服務器接到瀏覽器對資源文件的請求,將相應的資源文件響應給客戶端瀏覽器;
<8>.客戶端加載資源文件。客戶端瀏覽器將接收服務器發送的資源文件,整理並呈現到頁面中;
<9>.客戶端從上到下加載。在進行頁面呈現的時候,瀏覽器會從上到下執行HTML文檔,當遇到相應的頁面腳本的時候,會對腳本進行分析,並解釋執行相應的腳本代碼。

在第6步以后,我們就可以看到一部分頁面內容了,不過可能是純文本內容,沒有樣式,沒有圖片或其它資源。待到瀏覽器請求得到某資源的時候就會進行組織呈現,直到整個頁面所有資源加載完畢,顯示完成,請求響應完畢。

3.客戶端解析HTML
<1>.解析HTML結構;
<2>.加載外部腳本和樣式表文件;
<3>.解析並執行腳本代碼;
<4>.構造HTML DOM模型;
<5>.加載圖片等外部文件。

加載順序實例:

復制代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<style type="text/css">
body
{
font-sie: 12px;
}
</style>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<script src="js.js" type="text/javascript"></script>
</head>
<body>
<div>
<script type="text/javascript">
function f1() { }
</script>
<img src="1.gif" />
</div>
<script type="text/javascript">
function f2() { }
</script>
</body>
</html>
復制代碼

html → head → title → #text(網頁標題) → style → 加載樣式 → 解析樣式 → link → 加載外部樣式表文件 → 解析外部樣式表 → script → 加載外部腳本文件 → 解析外部腳本文件 → 執行外部腳本 → body → div → script → 加載腳本 → 解析腳本 → 執行腳本 → img → script → 加載腳本 → 解析腳本 → 執行腳本 → 加載外部圖像文件 → 頁面初始化完畢

4.onload和ready的差異
這里需要注意的是onload和ready的差異:
一是ready,表示DOM文檔樹已經加載解析解析完成(不包含圖片等非文字媒體文件);
二是onload,指頁面上所有的資源(包含圖片等文件在內的所有元素)都加載完畢。

說ready比onload快最顯著的是比如一個頁面上有一個很大的圖片,加載要好久,onload只有在圖片加載完成之后執行,而ready不必等圖片加載完成。
這種差異與window.onload和$(document).ready()的區別也是一致的吧。

5.Web相關技術和標准

 
參考博客:
DOM加載順序
深入理解BS結構應用程序

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM