第一部分 基础篇

第1章 Web前端开发概述

1.1 Web概述

Web是Internet中最受欢迎的一种多媒体信息服务系统。整个系统由Web服务器、浏览器和通信协议组成。通信协议HTTP能够传输任意类型的数据对象来满足Web服务器与客户之间的多媒体通信的需要。Web带来的是世界范围的超级文本服务。用户可通过Internet从全世界任何地方调来所希望得到的文本、图像（包括活动影像）和声音等信息。另外，Web还可提供其他的Internet服务如Telnet、FTP、Gopher和Net User等。

在Web网站上，不仅可以传递文字信息，还可以传递图形、声音、影像、动画等多媒体信息。Web的成功在于使用了HTTP超文本传输协议，制定了一套标准的、易为人们掌握的超文本标记语言HTML，使用了信息资源的统一定位格式URL。我们可以把Web看作一个图书馆，而每一个网站就是这个图书馆中的一本书。每个网站都包括许多画面，进入该网站时显示的第一个画面就是“主页”或“首页”（相当于书的目录），而同一个网站的其他画面都是“网页”（相当于书页）。

1.HTTP协议

从网络协议的角度看，HTTP是对TCP/IP协议集的扩展，作为浏览器与服务器间的通信协议，处于TCP/IP层次中的应用层。

HTTP是一种无状态协议，即服务器不保留与客户交易时的任何状态，这可以大大减轻服务器的存储负担，从而保持较快的响应速度。HTTP又是一种面向对象的协议，允许传输任意类型的数据对象。它通过数据类型和长度来标识所传送的数据内容和大小，并允许对数据进行压缩传送。浏览器软件配置于用户端计算机上，用户发出的请求通过浏览器分析后，按HTTP规范送给服务器，服务器按用户需求，将HTML（超文本标记语言）文档送回给用户。

2.Web服务的基本过程

Web最吸引人的地方是它的“简单性”，其工作过程也是客户机/服务器模式（C/S）。Web的工作可分为4个基本阶段：连接、请求、响应和关闭（见图1-1）。它们都属于HTTP的下层基础。信息资源以网页（HTML文件）形式存储在Web服务器中，当用户希望得到某种信息时，要先与Internet沟通连接（上网）；然后用户通过Web客户端程序（浏览器）向Web服务器发出请求；Web服务器根据客户的请求给予响应，将在Web服务器中存放的、符合用户要求的某个网页发送给客户端，浏览器在收到该页面后对其进行解释，最终将图文等信息呈现给客户；一次Web服务操作结束后，关闭此次连接，或用户根据需要进行下一次请求。这样，用户可以通过网页中的链接，方便地访问位于其他Web服务器中的页面或其他类型的网络信息资源。

Web服务器集成了所有视觉辅助效果来表示信息，这些信息可以按多种格式存在，易于浏览和理解。例如，在讨论复杂问题时，可以使用图表、影像剪辑甚至交互式应用程序，而不仅仅是字符文本，这样便于解释论题，使人一目了然。与其他信息发布工具相比，Web服务由于所需的费用很低并且覆盖面广，因而具有很大的吸引力。另外，使用各种搜索机制和Web站点分类目录数据库注册一个Web站点，可以使客户在需要时得到所需的信息。

1.1.1 Web的发展

最早的网络构想可以追溯到1980年蒂姆·伯纳斯·李构建的ENQUIRE项目。这是一个类似维基百科的超文本在线编辑数据库。尽管这与万维网大不相同，但是它们有许多相同的核心思想，甚至还包括一些伯纳斯·李的万维网（World Wide Web,WWW，也作Web、W3）之后的下一个项目语义网中的构想。

1989年3月，伯纳斯·李撰写了《关于信息化管理的建议》一文，文中提及ENQUIRE并且描述了一个更加精巧的管理模型。1990年11月12日他和罗伯特·卡里奥（Robert Cailliau）合作提出了一个更加正式的关于万维网的建议。在1990年11月13日他在一台工作站上设计了第一个网页以实现他文中的想法。

在那年的圣诞假期，伯纳斯·李制作了让一个网络工作所必需的所有工具：第一个万维网浏览器（同时也是编辑器）和第一个网页服务器。

1991年8月6日，他在alt.hypertext新闻组上发表了万维网项目简介的文章，这一天也标志着因特网上万维网公共服务的首次亮相。

万维网中至关重要的超文本概念起源于20世纪60年代的几个项目。譬如泰德·尼尔森（Ted Nelson）的仙那都项目（project Xanadu）和道格拉斯·英格巴特（Douglas Engelbart）的NLS。而这两个项目的灵感都是来源于万尼瓦尔·布什在其1945年发表的《和我们想的一样》论文中为微缩胶片设计的“记忆延伸”（memex）系统。

蒂姆·伯纳斯·李的另一个才华横溢的突破是将超文本嫁接到因特网上。在他的《编织网络》一书中，他解释说自己曾一再向使用者们建议这两种技术的结合是可行的，但是没有任何人响应他的建议，最后他只好自己解决了这个问题。他发明了一个全球网络资源唯一认证的系统：统一资源标识符。

万维网和其他超文本系统有很多不同之处。

（1）万维网上需要单项链接而不是双向链接，这使得任何人可以在资源拥有者不做任何改变时链接该资源。与早期的网络系统相比，这对于网络服务器和网络浏览器来说已经是很大的进步，但它的副作用是产生了坏链的问题。

（2）万维网不像某些应用软件如HyperCard那样是私有的，这使得服务器和客户端能够独立地发展和扩展，而不受许可权限制。

1993年4月30日，欧洲核子研究组织宣布万维网对任何人免费开放，并且不收取任何费用。两个月之后Gopher宣布不再免费，从而造成大量用户从Gopher转向万维网联盟。万维网联盟（World Wide Web Consortium, W3C）又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立，建立者是万维网的发明者蒂姆·伯纳斯·李。

1.1.2 Web特点及架构

1.Web的形式及特点

（1）易于导航的图形化Web

Web非常流行的一个很重要的原因就在于它可以在一页上同时显示色彩丰富的图形和文本的性能。在Web之前Internet上的信息只有文本形式。Web可以提供将图形、音频、视频信息集合于一体的特性。同时，Web是非常易于导航的，只需要从一个链接跳到另一个链接，就可以在各页各站点之间进行浏览。

（2）与平台无关的Web

无论用户的系统平台是什么，都可以通过Internet访问万维网。浏览万维网对用户的系统平台没有什么限制。对万维网的访问是通过一种叫作浏览器（browser）的软件实现的，如Netscape的Navigator、NCSA的Mosaic、Microsoft的Internet Explorer等。

（3）分布式的Web

大量的图形、音频和视频信息会占用相当大的磁盘空间，用户甚至无法预知信息的多少。对于Web没有必要把所有信息都放在一起，信息可以放在不同的站点上。只需要在浏览器中指明这个站点就可以了。这使得在物理上并不一定在一个站点的信息在逻辑上实现了一体化，至少从用户的角度来看这些信息是一体的。

图1-2展示了Web之间的典型链接方式，Web站点都存在于不同的物理位置，站点上存放着各种文档，这些文档中有一些文字与其他文字的显示方式有所区别，用于链接到其他站点，称为“超链接”，用户只要在上面单击，浏览器就可以跳转到对应的站点并显示相应的内容。

（4）交互式的动态Web

由于各Web站点的信息包含站点本身的信息，信息的提供者可以经常对站点中的信息进行更新，如某个协议的发展状况、公司的广告等，Web站点上的信息是需要经常更新的。

Web的交互性首先表现在它的超链接上，用户的浏览顺序和所访问的站点完全由他自己决定。系统另外通过HTTP的Get请求从服务器中获得动态的信息，用户通过填写form表单向服务器提交（HttpPost）请求，服务器根据用户的请求返回相应信息，实现良好的人机交互，如图1-3所示。

2.C/S与B/S架构

（1）C/S架构

C/S（Client/Server）又称客户/服务器模式，是大家熟知的软件系统体系结构，这种模式通过将任务合理分配到客户端和服务器端，降低了系统的通信开销，但需要安装客户端才可进行管理操作。

客户端和服务器端的程序不同，用户的程序主要在客户端，客户端程序主要完成用户具体的业务。客户端需要安装专用的客户端软件。服务器端主要提供数据管理、数据共享、数据及系统维护和并发控制等功能。服务器通常采用高性能的PC、工作站或小型机，并采用大型数据库系统，如Oracle、Sybase、Informix或SQL Server。

C/S模式的优点是能充分发挥客户端PC的处理能力，很多工作可以在客户端处理后再提交给服务器，其优点就是客户端响应速度快，存在的缺点如下：

随着互联网的飞速发展，移动办公和分布式办公越来越普及，这需要使我们设计的系统具有扩展性。这种方式的远程访问需要专门的技术，同时要对系统进行专门的设计来处理分布式的数据。

客户端需要安装专用的客户端软件。首先涉及安装的工作量；其次任何一台计算机出问题，如病毒、硬件损坏，都需要进行安装或维护，特别是一个单位有很多分部或专卖店的情况下，不是工作量的问题，而是路程的问题。还有，系统软件升级时，每一台客户机都需要重新安装，其维护和升级成本非常高。

客户端的操作系统一般有一定的限制。比如使用Windows 98的客户端不能用Windows 2000或Windows XP，或者不适用于微软新的操作系统等，更不用说Linux、UNIX等。

（2）B/S架构

B/S（Browser/Server）架构是浏览器和服务器结构（见图1-4）。它是随着Internet技术的兴起而对C/S架构进行改进的结构。

这种架构中客户端（Browser）几乎没有专门的应用程序，应用程序基本上都在服务器端（Server）。由于客户端没有程序，应用程序的升级和维护都可以在服务器端完成，升级维护十分方便。由于客户端使用浏览器，使得用户界面“丰富多彩”，但数据的打印输出等功能受到了限制。为了克服这个缺点，一般把利用浏览器方式实现困难的功能单独开发成可以发布的控件，再在客户端利用程序进行调用。

B/S结构是Web兴起后的一种网络结构模式，Web浏览器是客户端最主要的应用软件。这种模式统一了客户端，将系统功能实现的核心部分集中到服务器上，简化了系统的开发、维护和使用。客户机上只要安装一个浏览器（Browser），如Netscape Navigator或Internet Explorer，服务器上安装Oracle、Sybase、Informix或SQL Server等数据库。浏览器通过Web Server同数据库进行数据交互，这样就大大简化了客户端计算机的载荷，减轻了系统维护与升级的成本和工作量，降低了用户的总体成本（TCO）。

（3）C/S与B/S的区别

C/S建立在局域网的基础上，B/S建立在广域网的基础上。其区别主要有如下几点。

①硬件环境不同：C/S一般建立在专用的网络上，形成小范围的局域网环境，局域网之间通过专门的服务器提供连接和数据交换服务。B/S建立在广域网之上，不必限定专门的网络硬件环境。例如电话上网、租用设备、信息管理，有比C/S更强的适应范围，一般只要有操作系统和浏览器就行。

②对安全性的要求不同：C/S一般面向相对固定的用户群，对信息安全的控制能力很强，一般高度机密的信息系统采用C/S结构较适宜，可以通过B/S发布部分公开信息。B/S建立在广域网之上，对安全的控制能力相对弱，面向不可知的用户群。

③程序的架构不同：C/S程序可以更加注重流程，可以对权限进行多层次校验，对系统的运行速度可以较少考虑。B/S对安全性以及访问速度要进行多重考虑，建立在需要更加优化的基础上，比C/S有更高的要求。B/S结构的程序架构是发展的趋势，从微软的.NET系列到BizTalk 2000、Exchange 2000等，全面支持网络构件搭建的系统。SUN和IBM推出的JavaBean构件技术等使B/S更加成熟。

④软件的重用性不同：C/S程序必须进行整体性的考虑，构件的重用性不如在B/S模式下构件的重用性好。B/S的多重结构，要求构件有相对独立的功能，因此具有相对较好的重用性。

⑤系统维护不同：系统维护在软件生存周期中的开销较大。C/S程序由于整体性强，必须整体考察，处理出现的问题以及系统升级较难，有时可能需要再做一个全新的系统。B/S程序由构件组成，方便个别构件的更换，可以实现系统的无缝升级，系统维护开销可以减到最小，用户从网上自己下载并安装相关程序就可以实现系统升级。

⑥处理的问题不同：C/S程序可以处理的用户相对固定并且在相同区域，安全性要求与操作系统相关性高。B/S建立在广域网上，面向不同的用户群且分散在不同地域，这是C/S无法做到的，因此与操作系统平台的关系最小。

⑦用户接口不同：C/S大多是建立在Windows平台上，表现方法有限。对程序员要求普遍较高。B/S建立在浏览器上，有更加丰富和生动的方式与用户交流，并且大部分难度较低，可降低开发成本。

⑧信息流不同：C/S程序一般是进行典型的中央集权机械式的处理，交互性相对较低。B/S信息流向可变化，B2B、B2C、B2G等信息流向的变化更像一个交易中心。