Web技术整理

Web技术整理

　　Web技术或许是将来最为热门的技术之一。这里略作一些总结，以及对各种Web技术作一些概要性介绍。(以下内容建立在我的粗略理解之上，欢迎指正)

　　推荐个学习Web技术比较好的网站，介绍的比较全面。W3School

标记语言

　　页面的展示使用超文本标记语言（HTML）来表示。这是一种标签语言，本身不具有执行能力，只是结构化页面内容。早期的HTML版本并不严格，许多浏览器厂商支持混乱。因而存在许多兼容性问题。

XHTML是扩展超文本标记语言，只是在HTML基础上严格了语法要求，并稍稍扩展了一些特性而成。其与HTMLv4.01相对应。

　　早期HTML负责页面展示的全部内容，包括结构和字体格式等等。这使得页面表现与内容相耦合，于是CSS解决了这一问题。通过CSS样式表，可以定义页面各元素、属性或是更细粒度的样式，使用相当灵活。这样页面显示与内容就分离了。

　　前面提到的都是静态页面必须的。下面来说说动态页面（DHTML）。简单说来，就是指含有脚本的一些页面（这些脚本在浏览器中执行，可以完成一些操作，使页面的展示能力进一步加强）。常用的脚本语言有JavaScript、VBScript等。有个问题是，脚本语言如何来显示页面？看下面

脚本语言

　　脚本语言用于辅助页面的展示，以及提供一些变化性的内容（相对于纯粹静态的HTML而言）。脚本语言是一类嵌入式的语言，它的特点是，嵌入在其它语言中间，辅助使用。不像C/C++/Java等这些编程语言，不可互相混合在一起放在单个文件中。根据执行情况划分，分为客户端脚本和服务端脚本两种。

　　客户端

　　客户端脚本语言典型的有JavaScript、VBScript、JScript，Lua等。目前比较热门的是JavaScript语言。JavaScript语言虽然名称中包含java，但其实与Java没有一点关系，当初取这个名字也只是为了吸引更多眼球。实际上它的正式名称是ECMAScript，目前遵循的标准是ECMA-262。 JavaScript这种语言支持过程式、对象式编程，并且包含了丰富的自定义对象。另外，它还支持DOM对象和Browser对象，具体解释请看下文。有了这些，脚本语言的能力被极大的强化了。最近几年出现的AJAX技术，也是基于这样的框架结构才能得以实现。 客户端脚本语言的特点就是在客户端加载执行，但是其执行时机随浏览器不同而不同，也随不同特性的脚本而不同。使用时需额外注意。

　　JavaScript的库有不少，应用比较多的有JQuery、JSON。JQuery是个标签库，提供了方便的DOM对象实例查询等功能。JSON是一种轻量级的数据表示格式，说白了就是把对象实例字符串化和反串化。这样就可以在AJAX中由服务器端返回对象类型的数据。（AJAX本身仅支持返回字串或是整个XML文件这两种类型的数据）

　　服务端

　　服务端脚本语言典型的有ASP、JSP、PHP、Lua。个人认为目前PHP比较热门（有见于热门的LAMP架构，即Linux+Apache+MySQL+PHP）。服务端脚本可以在服务端解释执行，进行生成客户所需要的页面，返回给客户端。在生成过程中，可以填充一些客户要求的数据，再辅助以HTML的标签进行展示，从而让页面可以动态变化。我们所说的动态网页通常就是指这种了。

　　AJAX

　　把它放在这个分支中未必正确，不过无所谓了。我要说的是AJAX是一种使用JavaScript实现客户端、服务端异步通信的技术。它依赖于以下几项技术的支撑：一是有力的脚本语言，JavaScript；二是可动态改变的页面结构，DOM；三是服务端事件响应机制（脚本中原来包含的是客户端的事件。通过XMLHttpRequest对象来支持发送请求并通过事件触发响应）。于是，我们就可以做到通过XMLHttpRequest发出请求，然后通过异步的事件响应函数内，依据服务端返回的结果，通过DOM来修改页面（这不需要刷新，因为对浏览器来说仍然是同一个页面）。

　　一点题外话，AJAX的出现是必然的。因为在此之前客户端脚本已经具有了修改页面的能力，但是基本无法做到依据服务端的要求而产生变化。所以，需要有服务端的脚本，在服务端替客户生成好相应的页面，并返回给客户端。而这种交互方式，基本上就是客户端提交表单（即GET方法或POST方法），服务端处理并返回结果页面。一个明显的问题就是带宽费，设想一个仅需很小改动的页面，但是数据在服务端。若接GET、POST的方式，必须生成完整的页面。而如果使用AJAX方式，客户端发出的是AJAX请求（通过XMLHttpRequest对象发出），服务端虽然也需要调用相应的脚本处理，但返回的可以只是所需要的数据即可，客户端会自行处理，修改页面放入数据。这样就大大节省了带宽，也提高的页面的响应速率。

模型

　　DOM

  　DOM，全称文档对象模型。前面说过，HTML是结构型的，XHTML更加严格，要求每个文件必须拥有唯一的根元素。这样看来，整个文件就可以表示成一棵元素树。文档对象模型，就是这种树型结构在内存中的表示。这是实时存储的结构，改变它就会改变页面的显示内容。它的使用也很简单，提供一些API用来定位子对象（即具体某个元素）以及遍历。

　　Browser

　　同DOM一样，是一组对象，只是其中的内容主要描述浏览器相关的信息，并支持动态修改。

协议

　　要传输HTML文档，必须使用HTTP协议或者HTTPS协议。前者大家都熟悉，无状态的超文本传输协议；后者就是加了SSL，使得信息内容加密传输，现如今很多网站都使用HTTPS代替HTTP。

HTTP的无状态带来一些问题。最明显的就是用户访问网站明显看起来是个连续的且有状态的行为。在一些简单的展示或陈列性质的网站上，还是没问题的。但是只要涉及到用户登录之类的，就不行了。对于同一个页面，服务端无法知道，你下一次访问和这一次访问的区别；也无法知道，你和另一个人有什么区别。所以，如果要根据用户来区分显示内容的话，似乎不容易做到。于是Cookie就出现了。它有点像远程调用的Context，附带着请求传输，存储一些内容，服务端可以接收，也可以发送回客户。类似于带外数据。这样的隐含数据通道，就使的HTTP可以部分支持状态了（仍然是伪状态的，因为客户端还是可以通过成功仿造Cookie来伪造请求，骗过服务端）。

架构

　　这部分简单说明一下现在流行的Web架构。到目前为止，LAMP仍然占据了超过50%的市场份额。开源、高可扩展性以及相当不俗的性能表现，是它的优点。 Web服务器方面，Apache对动态网页的支持很好，但是在性能上存在一些瓶颈。因此，现在许多网站（例如：新浪、QQ门户等）均使用Ngnix来作为它的前端静态页面的Web服务器，对于动态页面的请求再转发给后端的Apache服务器来处理，再使用Memcahed来缓存一些页面，以提高效率。

Nginx是一种轻量级的Web服务器，支持反向代理和简单的负载均衡。由俄罗斯人开发。其内部采用了epoll、kqueue等高性能I/O复用接口，使其性能表现十分卓越。

工具

　　前端页面开发工具很多了，Dreamweaver之类的。调试&Profiling推荐Firebug和Chrome的开发者工具