Web UI发展历程

时间：2023-02-18 14:34:02 | 来源：营销百科

时间：2023-02-18 14:34:02 来源：营销百科

Web UI发展历程：Web 1.0的UI技术

在HTML规范发展的过程中，以HTML标签为基础来构建的页面一直是Web UI的主流技术。

1.1.1 纯文本网页

1989年，英国人Tim Berners Lee发明了www（World Wide Web），万维网诞生。通过www，分散在网络上各处的资源可以相互访问。最开始的网页没有UI的概念，只包含纯文本的数据和跳转的超链接。

1.1.2 静态HTML页面

随着越来越多的数据被放置到了互联网上，纯文本的HTML已经不能满足人们的期望。Marc Andreessen在1993年引入了图片。随后，字体、背景、框架和一些特效（marquee、blink）等元素相继被引入了HTML中。

1993年6月，互联网工程工作小组（IETF，Internet Engineering Task Force）发布了HTML草案；1995年11月，提出了HTML2.0规范。

此时的web UI已经具有较强的静态展示能力，丰富多彩的展示效果，被越来越多的人所接受。Web UI技术逐渐形成。

1.1.3 Web UI的成熟期

1996年是HTML发展的一个里程碑，JavaScript和叠样式表（CSS，Cascading Style Sheets）相继诞生，W3c（World Wide Web Consorium）制定的HTML3.2规范出炉。

此时的web UI可以在展现后，与用户的操作交互，根据用户的行为方便地修改UI元素和调整样式，从而实现动态的DHTML页面。至此，传统的HTML Web UI技术发展到成熟期。后来的发展中，HTML标准没再有大的改动。

从这个时期开始，一般的web站点或是web应用系统的实现都是从界面设计人员使用Photoshop或是Dreamweaver等工具设计出效果图或是界面原型开始。此时的内容还都是所谓的静态页面，无法根据不同的外部条件展示不同的内容。

1.1.4 服务器端技术

随 后，CGI、ASP(Active Server Page)、JSP(Java Server Pages)、PHP(Personal home page Hypertext Preprocessor)等服务器端脚本技术相继涌现，真正的动态页面出现了。服务器端代码分析用户提交的请求参数，从数据库服务器获取相应的业务数 据，动态地将网页和数据组合拼装出网页的HTML文本输出到客户端浏览器。

此时的服务器端页面不再是一个单纯的UI模型，而只是一个服务器端脚本引擎来处理生成客户端UI模型的模板，其中包括HTML片段、脚本块和标签等元素。比如Struts、Tapestry和WebWork等基于JavaEE技术的web框架就是此类技术的集大成者。

随 着web开发技术的进一步发展，又出现服务器端UI组件技术。例如asp中的服务器端UI组件和JSP中的JSF组件。其使用服务器端脚本技术， 封装部分HTML、JavaScript和CSS片段构建一个完整的UI组件模型，在运行期间解释并与数据进行整合，最终输出为实际的HTML代码。

Web 2.0的UI技术

Web2.0 是2003年之后互联网的热门概念之一，不过对什么是Web2.0并没有很严格的定义。一般来说Web2.0是相对Web1.0的新的一代互联网技术 的统称。Web1.0的主要特点在于用户通过浏览器获取信息，Web2.0则更注重用户的交互作用，用户既是网站内容的浏览者，也是网站内容的制造者。

但业务系统与商业网站有着巨大的区别，业务系统主要使用web2.0来改善用户体验，而极少关注博客（BLOG）、百科全书(Wiki)、社会网络（SNS）等用户互动和参与技术。

1.2.1 Ajax进入21世纪后，Ajax（Asynchronous JavaScript And Xml）技术的崛起绝对是互联网应用的一个划时代的变革。简单地说，Ajax就是为浏览器提供了在不提交整个页面的情况下动态的与服务器简单交互的能力。 这样，就可以通过使用JavaScript脚本来提交数据和刷新或是渲染页面中的某些部分，此后人们就不必在页面提交和显示之间的空白状态等待，web应 用的用户体验得到巨大增强。

Ajax技术通过在JavaScript语言环境中使用XmlHttpRequest对象与服务器端数据和业务交互，并从UI界面获取用户输入和将服务器端处理结果通过UI界面展现出来。

主流的客户端Ajax框架有：Jquery，Dojo，MooTools，Prototype等等。服务器端的Ajax框架有DWR，Buffalo，Ajax4jsf等等。

1.2.2 基于JavaScript的UI技术

基于JavaScript的UI技术的出现，将web UI的控制权从界面设计人员递交给了程序员，即可以直接在web的前端使用JavaScript脚本来描述一个UI组件模型，然后在运行时，由浏览器的脚 本解释器调用核心的UI技术框架来将其转换成HTML的UI界面。

此类UI技术框架跟服务器端UI技术的思路一致，只是在客户端浏览器中 封装了一套UI模型。这样界面设计不需要服务器端的支持，在开发期间能更好的展示和测试界面效果。同时由于UI界面的构建和控制都在客户端，只需要和服务 器端传递请求参数和数据，这样就能比服务器端UI技术大大的降低服务器端的压力和网络数据的传递量。

此类技术有Ext JS，Yahoo UI，qooxdoo等等。其中Ext JS框架比较完善并且易用的。

Ext JS最初是一个基于YUI(Yahoo！UI)的扩展，已经完全独立。Ext JS是最好的纯JavaScript UI展示框架，其提供了一整套的基于JavaScript和CSS的组件体系，以及整合了许多web UI的其他功能。