浅谈Web建站技术

互联网是指通过TCP/IP协议族互相连接在一起的计算机网络。万维网和互联网是两个联系极其紧密但却不尽相同的概念。

Web是运行在互联网上的一个超大规模的分布式系统：

(1)通过超文本标记语言(HTML)描述信息资源

(2)通过统一资源标识符(URI)定位信息资源

(3)通过超文本转移协议(HTTP)请求信息资源。

HTML、URL(统一资源定位符)和HTTP三个规范构成了Web的核心体系结构。通俗地说，客户端(一般为浏览器)通过URL找到网站，发出HTTP请求，服务器收到请求后返回HTML页面。

Web是基于TCP/IP协议的，TCP/IP协议把计算机连接在一起，而Web在这个协议族之上，进一步将计算机的信息资源连接在一起，形成万维网。Web应用本质上就是可以提供信息或功能的Web资源，成为Web这个全球超大规模分布式系统中的一部分。

 

一个普通网站访问的过程及其涉及到的技术：

(1)用户操作浏览器，浏览器向服务器发出一个HTTP请求；

(2)服务器接收到HTTP请求，Web Server进行相应的初步处理，使用服务器脚本生成页面：服务器脚本利用Web Framework调用本地和浏览器传来的数据，生成页面；

(3)Web Server将生成的页面作为HTTP响应的body，根据不同的处理结果生成HTTP header，发回给浏览器；

(4)浏览器接收到HTTP响应，通常第一个请求得到的HTTP响应的body里是HTML代码，对HTML代码开始解析；

(5)解析过程中，若需要引用服务器上的资源(如额外的CSS、JS代码，图片、音视频，附件等)，再向Web Server发送请求，Web Server找到相应的文件，发送回来；

(6)浏览器解析HTML包含的内容，用得到的CSS代码进行外观上的进一步渲染，JS代码也可能会对外观进行一定的处理；

(7)用户与页面交互(如点击，悬停等)时，JS代码对此作出一定的反应，添加特效与动画；

(8)交互的过程中可能需要向服务器索取或提交额外的数据(如局部的刷新等)，要么通过跳转，要么通过JS代码(响应某个动作或者定时)向Web Server发送请求，Web Server 再用服务器脚本进行处理(如生成资源or写入数据等)，把资源返回给浏览器，浏览器用得到的资源来实现动态效果或其他特效。

 

HTML、CSS和JavaScript：

HTML：负责构建一个静态的网页。多元素编辑语言，以网站页面为编辑区域，任意指定页面具有哪些元素，包括文字、图片、链接、多媒体等。并任意指定不同元素在页面的基本格式，如文字字体、大小、位置，图片大小、位置，链接颜色、状态变化等。利用标签标记，将多种不同类别的元素甚至不同位置的文件关联在一起，因此叫超文本标记语言。HTML5就是HTML语言的最新标准，强调语义化，新增语义化标签(如header， figure， canvas， video等)，新增标签属性(如input的datetime， tel， email等)。这种标准制定使页面可以表现的内容更加强大。

CSS：负责完成页面的美观度(颜色、布局)。目前的CSS3标准的出现，在原有基础上做了增强(如多背景，nth-child 选择器等)增加了很多高级特性，比如对渐变色的处理(gradient， linear)，对形状的处理(border-radius， transform)，甚至对简单动画的处理(key-frames， transition)，对设备类型及状态的判断(media-query)，使CSS强大到可以实现很多元素动态变化效果。当然，更复杂的动态变化还是需要另一种专门的语言来实现，这就是JavaScript。
JavaScript：负责完成页面的操作需求。一般来说，JavaScript可以分成两种，一种是DOM操作，用来和页面交互。一方面是后台操作，用Ajax的方式获取数据。JavaScript语言可以实现对页面元素的复杂功能编程，除了可以看到的动态效果之外，JavaScript还可以实现用户看不到页面数据处理工作。例如数据加解密、文字过滤分析等。JavaScript单独使用可以分析数据；在浏览器中跟DOM 结合，可以修改页面的HTML 和CSS，以达到修改动态修改页面结构、内容和样式的目的；跟事件结合可以处理响应，比如页面中用户的点击行为，前后端交互中数据的流动。

HTML：网页的基本组成，网页的结构层；
CSS：网页的样式属性，网页的样式层；
JavaScript：将静态的标签变成动态的，并从后端获取动态的数据，网页的逻辑层。

Html5和CSS3是新版的特性，增加了很多如LocalStorage，Manifest，Canvars，WebSocket等一系列的内容，简单来说，Html5和CSS3是原来的升级版，功能很强大，语义化更强。

 

XHTML：

XHTML基于HTML，是HTML的一个子集，对代码的规范性有很高的要求，如所有标签都必须闭合，且为了兼容 XML，在语法上与 HTML 有一些不同。

 

XML、JSON：

前端和服务器之间通常需要一种双方都认可的格式进行数据的传递和存储。xml是可扩展标记语言，通常用于传输和储存数据，相似的还有JSON，使用数据的双方只需按照规定的格式写入/读出内容即可完成数据的传输和存储。

 

文档对象模型DOM：

浏览器作为前端的展示工具，按照DOM规范将页面划分为不同层次结构，形成多个可操作的对象，如window对象、history对象、link对象等，window对象就是用户看到的页面，history对象就是浏览历史，link对象就是链接。

 

URL (统一资源定位符):

域名用于定位服务器的地址，那么定位服务器地址之后，如何定位服务器中的某个内容呢？仅仅通过域名是无法解决的，在域名之后，还需要加上具体的资源地址，形成完整的访问地址，这就是URL。

 

HTTP协议：

浏览器给服务器发一个请求，服务器不是一看就知道怎么响应的；服务器给浏览器回送一个响应，浏览器需要知道怎么展示给用户。请求和响应要有一个通用的写法，也就是要有一个协议，常用的是HTTP协议。

例如，服务器响应写了一个状态码”200 OK”，是HTTP协议里约定俗成的，服务器写“200 OK”在响应里，表示请求的网页存在，如果是”404 Not Found”，表示请求的网页不存在。
HTTP响应里还包括其他内容，例如，Content-Type表示服务器发过来的文件类型，可以是文本、动画、图片、音频等等。例如，将文件的Content-Type设置为”text/html”，浏览器在获取到该文件时，会自动调用html解析器对文件进行相应的处理。

 

Web Server和Web Service：

服务器端，需要接收前端访问请求，根据请求类型分发给指定模块进行处理，并完成将处理结果返回给前端的工作，这就是反向代理，也就是web server，例如Nginx/Apache等。

web server本身不做网站内容的解析和生成工作，重点在于处理复杂的网络请求，应对海量的网络连接。起到后台与前端之间搭建网络桥梁的作用，通过通讯协议，与前端进行数据交互，而数据来源，由后台其他处理程序和数据库等提供。

web server的独立，使后台处理程序只需专注每个请求的细节处理，而无需关注请求的来去和排队管理等机制.对网站开发人员而言，也大大减少了工作量。

web server作为前端后台之间的衔接工具而存在，其中只有与开发项目相关的部分配置信息，并不存在我们编写的数据处理程序内容，因此可以根据项目需要(性能)随时更换代理，当然，这种随时更换可能存在代价。

web server可以使用Nginx/Apache/tomcat/IIS/lighttpd等现成的工具，也可利用node.js等平台添加模块自己形成满足自己要求的代理工具，甚至自己动手从头开发也可以。

服务器如何知道按照协议要在响应里面写什么东西，这就是Web Server的任务所在。Web Service传输的数据，由服务器脚本生成，再交由Web Server，按照某种协议套好整个响应的格式，返回给客户端。很多时候访问一个网站，浏览器里输的地址并没有写明要请求的文件，但服务器却能返回一个html文件，服务器如何知道浏览器里输的地址对应要返回什么样的html代码，这也是Web Server的任务。

要让形形色色的机器能够通过网络进行交互，需要指明一种协议(如HTTP、HTTPS等)和一种数据封装格式(如HTML、XML等)，Web Server提供Web Service，指的就是这种协议+格式的交流体系。不过Web Service中，用户可以选择的协议和数据封装格式更多，普通的网站访问用的HTTP+HTML只是其中一种，一些封闭系统内的交流还可以自己定义一个协议和格式来用(如QQ等)。

Web Service传输的数据再经由本地客户端(如浏览器、QQ/微信，网游客户端等)的解析和渲染，就能够以用户能够理解的形式展现出来。

常见的现成的Web Server有开源的Apache、Nginx和微软的IIS，也可以用一些工具(如Node.js等)自己定制一个Web Server。

提供Web Service只是Web Server的功能之一，Web Server还会兼顾很多功能，包括提供缓存，平衡负载等。

 

动态内容的出现CGI：

Common Gateway Interface通用网关接口。web server接收到前端请求之后，需要将这些请求的内容分发给具体的处理程序进行数据处理。与前端和后台之间的通讯协议相似，此处两者之间也需要定义双方的通讯协议。CGI就是早期的双方交互协议。web server接收到前端请求之后，按照cgi的规则将数据进行整理后发送给后台处理程序，后台处理程序接受到数据之后，按照cgi的规则进行解析/处理，然后再次按照cgi规则将处理好的数据返回给web server，完成交互。

定义了Web服务器与外部应用程序之间的通信接口标准，因此Web服务器可以通过CGI执行外部应用程序，让外部应用程序根据Web请求内容生成动态的内容。Perl因为跨操作系统和易于修改的特性成为CGI的主要编写语言。当然，CGI可以用任何支持标准输入输出和环境变量的语言编写，如Shell脚本、C/C++语言等，只要符合接口标准即可。例如，用C语言编写CGI程序，把希望返回的HTML内容通过printf输出就可以发送给Web服务器，进而返回给用户。但CGI对每个请求都会启动一个进程来处理，因此性能上的扩展性不高。另外，CGI执行外部应用程序生成内容会输出一大堆复杂的HTML字符串，可读性和维护性是个大问题。因此，PHP、ASP、JSP等服务器脚本语言应运而生。PHP可以把程序(动态内容)嵌入到HTML(模版)中去执行，不仅能更好的组织Web应用的内容，而且执行效率比CGI还更高。有了这些脚本语言，搭配上后端的数据库技术，Web建站更是无敌。

 

服务器脚本语言PHP/ASP/JSP：

服务器接收到浏览器的请求后最简单的动作是给浏览器回送相应的文件，其实，服务器与浏览器的交互并不只是发请求-传文件这么简单，服务器还可以接受发过来的各种请求，去操作服务器本地的文件or数据库。这就需要服务器的代码了，这些代码就是服务器脚本。服务器脚本生成Web Service要传输的数据，交由Web Server，按照某种协议的响应格式构造响应，返回给客户端。

同一个网址，每个用户看到的页面不一定是一样的。如登录之前和登陆之后的页面大同小异，只是某些地方有所区别，服务器脚本就是利用已知的数据，在这些因人而异的地方填入相应的内容，生成给每个用户看的页面。

早年常见的服务器端语言有：

(1)开源的PHP

(2)Sun 公司的JSP中使用的Java

(3)微软的ASP中使用的VBScript

现在应用热起来的语言有：

(1)Python：对应常见的Framework 包括知乎用到的 Tornado，社区很成熟的Django等

(2)Ruby：一般都用Rails这个Framework，用户包括Github、早期的Twitter等

(3)JavaScript：有了Node.js这个平台，Web Server、服务器脚本和浏览器脚本全都可以用 JavaScript 来写，Node.js上最常用的Framework是Express

PHP是一种常见的用来写服务器脚本的语言。其实只要是能拿来写传输数据的通用接口(CGI)的语言都可以用来写服务器脚本。只是因为现成工具的丰富程度和专攻程度不一样，有一些语言在写服务器端脚本时会比较热门。也就是说，不是只有当今这些流行脚本语言可以写Web应用，C语言一样可以，只是脚本语言在开发效率上更胜一筹而已。

 

Web Framework：

为了方便，在写服务器脚本的时候，通常还会用不同语言写的Web Framework来处理各种细节，防御一些常见攻击，提供跨站认证(的接口，利用cookie处理登陆状态和用户设置，生成网页模版之类的。为了方便调试，很多Web Framework会自带一个简单的 Web Server，或者有些Web Server会自带一个简单的Web Framework。服务器脚本与Web Framework的选择很多，现在不少人为了一个好用的Web Framework，去选择它对应的服务器脚本语言。

几种常见的架构：

(1)LAMP = Linux + Apache + MySQL + PHP(P还可能是Python或Perl，有时候L会改成W=Windows)，也即，服务器上的操作系统是Linux，Web Server用Apache，数据库用 MySQL，服务器脚本用 PHP，这些都是开源技术，成本比较低，是普通网站里非常常见的架构。Facebook和早期的淘宝用的就是这种架构。

(2)J2EE，Java世界的架构，通常是企业(如银行、大型公司等)用的，比较常见地还会搭配 UNIX 做操作系统，Apache做Web Server，Tomcat转换JSP到Java 给服务器程序用(其实它也自带Web Server)，Oracle做数据库等。不一定拿来建站，常用来提供企业里的各种需要用到网络的业务。淘宝现在的架构也从LAMP转型到了J2EE。

(3)http://ASP.NET，微软的架构，通常会搭配Windows Server做操作系统，SQL Server做数据库，IIS做Web Server。StackOverflow和曾经的京东就是这种架构。

(4)MEAN架构，搭配MongoDB做数据库，Express做Web Framework，Angular做前端的 JavaScript框架，Node.js用于编写Web Server。神奇之处在于这几个东西的语言都是 JavaScript (MongoDB的实现不是JavaScript，但与外界沟通用的语言是JavaScript)。因为是比较新的架构，还有待时间的考验，不过被很多人热切关注，尤其是靠JavaScript吃饭的前端程序猿们。

总结：重点不在技术而在乎成本的新网站比较喜欢用LAMP，重视安全稳定和速度的企业喜欢用J2EE，想省事的网站喜欢用http://ASP.NET，比较Geek的网站和创业公司喜欢折腾各种Python、Ruby、Node.js之类的东西，而Google 这样的现成技术都解决不了需求的超大型网站就自己折腾解决方案。

 

分布式企业计算平台J2EE和.Net：

Web开始广泛用于构建大型应用时，在分布式、安全性、事务性等方面的要求催生了J2EE，现在已更名Java EE。Java Servlet、Java Server Pages (JSP)和Enterprise Java Bean (EJB )是Java EE中的核心规范，Servlet和JSP是运行在服务器端的Web组件，EJB运行在服务器端的业务组件，是一种分布式组件技术。

.net平台的ASP.net构件化的Web开发方式及Visual Stidio.net开发环境的强大支持，大大降低了开发企业应用的复杂度。ASP.net第一次让程序员可以像拖拽组件来创建Windows Form程序那样来组件化地创建Web页面。

 

框架横飞的年代MVC，ORM：

框架与平台的不同在于：

(1)框架实现了完成该功能的整体架构搭建，例如网站后台框架就实现了各种session会话处理等机制，只需开发人员在整体架构预留的自定义空隙添加个人代码，与框架互补形成完整的网站后台；平台实现了具体细节处理代码的编写，并没有实现整体的功能，需要开发人员自己利用平台中提供的零件组装完整的功能。

(2)平台就像一个大零件箱，里面有各种型号的小零件，是最基本的组件；框架是一个大功能的骨架，可以借助某些平台提供的小零件进行开发。

框架与库的不同在于：

库其实是一些方法的集合，将一些方法整理后放在一起，供其他用户使用，这样的代码片段叫做库，框架相比库来讲，提供了一套完整的工作流程，用户只需要在其框架上进行代码添加，即可让整个项目跑起来。有代表性的框架有：Angular.js，react.js，代码库比较有代表性的是jQuery和Prototype。

MVC框架中，模型Model用于封装与业务逻辑相关的数据和数据处理方法，视图View是数据的HTML展现，控制器Controller负责响应请求，协调Model和View。Model、View和Controller的分开，不仅使得代码复用性和组织性更好，还使得Web应用的配置性和灵活性更好。

Struts是非常流行的Java Web开发的MVC框架。

Java开发框架Spring、Ruby开发框架Rails、Python开发框架Django，都提供了全栈开发框架，或者自身提供Web开发的各种组件，或者可以方便的集成各种组件。

Hibernate是ORM框架的佼佼者，已经成为Java持久层的规范JPA的主要参考和实现。

SSH(Struts+Spring+Hibernate)一度成为Java Web开发的标配。

 

浏览器端的魔术AJAX：

AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术)，指的是一套综合了多项技术的浏览器端网页开发技术，可以基于JavaScript的XmlHttpRequest的用于创建交互性更强的Web应用。基本思路是前端js与后台不断通讯，及时获取前端某部分数据的变化信息，及时进行自动数据获取更新，使用户无需刷新网页即可保持页面数据最新的状态。AJAX应用仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器响应，更新页面的局部信息。这样不仅浏览器和服务器的数据交换大大减少，而且客户端也可以更加快速地响应用户操作。Google在地图和Gmail等产品中对这项技术进行了深入应用。

 

前端MVC：

前后端的关键协作点是 Ajax 接口，规定好交互接口后，前后端工程师就可以根据约定，分头开工，开发环境中通过Mock等方式进行测试，同时在特定时间节点进行前后端集成测试，然而现在，对于一个前端功能、交互复杂的Web应用，JavaScript代码很容易膨胀(超过10万行)。很自然地，像服务端从JSP向MVC框架转换一样，为了解决前端开发的复杂度，前端开发也出现了大量的MVC框架，提供一套规则组织代码、分层(MVC)，通过合理的组织和分层，前端的代码职责明确、清晰，便于开发与测试。比较典型的包括AngularJS等。

 

JavaScript在服务器端的逆袭Node：
随着Node.js的出现，JavaScript开始拥有在服务端运行的能力，它的异步本质使得Node.js在处理I/O密集型业务中优势凸显，而大多Web业务中I/O性能都是瓶颈。通过Nodejs， 意味着前后端很多代码可以复用(例如数据验证逻辑)，在需要SEO的场景下也可以选择服务端模板渲染。但另一方面，JavaScript刚被引入到服务器端开发，其生态环境还未成熟，在服务器端开发中，仍未形成统一的开发范型。不同开发原则和编码风格的应用，都将对Node.js项目的性能、可维护性产生重大影响。