網頁的構成

通常在瀏覽器看到的網頁其實是由以下三層信息構成的一個共同體 ：
結構層：是由HTML或XHTML之類的標記語言負責創建
表示層：由CSS負責完成
行為層：負責客戶和網頁的交互問題，比如客戶點擊按鈕或者鏈接操作，行為層負責執行該操作引發的后續的一系列動作。行為層的交互功能主要是由腳本來完成。

動態網頁和靜態網頁

首先必須要明白一點：所有的網頁，不管是動態網頁還是靜態網頁，都是由Web服務器所創建的。
動態網頁和靜態網頁的最明顯區別在于：顯示內容是否變化。
靜態網頁就是內容固定、不會變化的網頁，比如博客文章，你今天打開和明天打開看到的是同樣的內容，張三和李四瀏覽同一個頁面，看到的也是同樣的內容。
動態網頁就是內容不斷更新變化的網頁，比如股票行情頁面，每日新聞頁面，其內容是不斷變化的。

注意幾點：

所有的網頁，不管是動態網頁還是靜態網頁，都是由Web服務器所提供的。

Web服務器最主要的功能是提供靜態的html文件。日常的上網瀏覽大多是網頁瀏覽，少數時候才會有一些動態數據的提交操作。

web應用有兩種架構模式：BS和CS。區別在于數據在哪端處理，BS是數據在服務器端處理，CS是把數據從服務器拉取到客戶端處理。

不管是BS還是CS，對于用戶來說，同一個頁面，做了一個操作后頁面就不一樣了，這都是動態頁面。

動態網頁的兩類技術

相對應B/S和C/S這兩種架構模式，動態網頁也有兩種技術：“瀏覽器端Scripts”和"服務器端Scripts"。
“瀏覽器端Scripts”就是CS模式，"服務器端Scripts"就是BS模式。

瀏覽器端Scripts：
瀏覽器端Scripts指的是從服務器拉取數據到瀏覽器端，由瀏覽器的JavaScripts負責執行運算，然后形成最終網頁。

原生方式：JS +Ajax
我在瀏覽器端打開一個網頁（html），加載完成之后，使用ajax訪問網絡得到json數據，使用js操作，在頁面中追加元素，并生成最終html顯示出來 。
從設計模式的角度看，客戶端和服務器之間的數據傳輸實際上是一個訂閱者模式。
原生的“JS +Ajax ”方式其實是數據刷新的拉模式，也就是說客戶端永遠是主動的，只有客戶端發出Ajax請求，服務器才能把新數據推給客戶端，所以缺點就在于：數據更新不及時。服務端永遠不能主動推數據通知客戶端去更新數據，所以原生的“JS +Ajax ”方式就不能適應實時數據刷新場景。
使用MVVM框架：backbone、vue、reactor、angular
MVVM框架其實就是實現訂閱者模式的推拉結合雙向數據通信，在客戶端和服務器之間建立雙向數據通道，

服務器端Scripts：Jsp，ASP，PHP方式
也就是jsp動態網頁技術：在服務器端執行“數據處理+頁面刷新”，并返回最終html頁面。
當瀏覽器向Web服務器請求打開包含服務器端Scripts的網頁時（擴展名為.php、.asp、.aspx、.jsp、.cgi等），服務器執行里面的服務器端Scripts，將結果轉換成HTML網頁（擴展名為.htm或.html）,然后傳送給瀏覽器并關閉連接。

常見的服務器端Scripts
?CGI(Common Gateway Interface):CGI是在服務器端程序之間傳輸送信息的標準接口，而CGI程序是符合標準接口的Scripts,通常由Perl,Python或C語言所編寫 （擴展名為.cgi）
?JSP(Java Server pages):JSP是sun公司所提供的動態網頁技術，可以在HTML原始文件中嵌入Java程序并由Web服務器負責執行（擴展名為 .JSP）.
?ASP（Active Server Pages）:ASP程序是在Microsoft IIS Web服務器上執行的Scripts,通常由VBScripts或JavaScripts所編寫（擴展名為.ASP）,而新一代的ASP.NET程序則改由功能較強大的Visual Basic、Visual C#、Microsoft J#、等.NET兼容語言所編寫（擴展名為.aspx）
?PHP(PHP:Hypertext Preprocessor):PHP程序是在Apache、Microsoft IIS等Web服務器上執行的Scripts,跨平臺（UNIX,FreeBSD,Windows,Linux,MacOS…）

總結

以上是生活随笔為你收集整理的动态网页和静态网页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。