动态网页和静态网页

网页的构成

通常在浏览器看到的网页其实是由以下三层信息构成的一个共同体 ：
结构层：是由HTML或XHTML之类的标记语言负责创建
表示层：由CSS负责完成
行为层：负责客户和网页的交互问题，比如客户点击按钮或者链接操作，行为层负责执行该操作引发的后续的一系列动作。行为层的交互功能主要是由脚本来完成。

动态网页和静态网页

首先必须要明白一点：所有的网页，不管是动态网页还是静态网页，都是由Web服务器所创建的。
动态网页和静态网页的最明显区别在于：显示内容是否变化。
静态网页就是内容固定、不会变化的网页，比如博客文章，你今天打开和明天打开看到的是同样的内容，张三和李四浏览同一个页面，看到的也是同样的内容。
动态网页就是内容不断更新变化的网页，比如股票行情页面，每日新闻页面，其内容是不断变化的。

注意几点：

1. 所有的网页，不管是动态网页还是静态网页，都是由Web服务器所提供的。
2. Web服务器最主要的功能是提供静态的html文件。日常的上网浏览大多是网页浏览，少数时候才会有一些动态数据的提交操作。
3. web应用有两种架构模式：BS和CS。区别在于数据在哪端处理，BS是数据在服务器端处理，CS是把数据从服务器拉取到客户端处理。
4. 不管是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…）