Peter.Y的技术博客

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Web技术整理

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

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

标记语言

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

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

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

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

脚本语言

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

  客户端

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

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

  服务端

  服务端脚本语言典型的有ASPJSPPHP、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的开发者工具

posted on 2011-10-29 13:35  Peter.Y  阅读(2213)  评论(1编辑  收藏  举报