文章教程

1.2.1Web应用程序的发展历史和工作原理

9/17/2020 9:38:49 PM 人评论 次浏览

1.2 Web应用程序的工作原理

在1.1.3中已经介绍了B/S网络模型的工作原理。基于B/S网络模型的应用程序被称为Web应用程序。本节将介绍Web应用程序的发展历史、组成和工作原理。

1.2.1 Web应用程序的发展历史和工作原理

本节概要地介绍Web应用程序产生和发展过程中一些主要技术的推出和应用情况,读者可以从技术的演变过程中进一步理解Web应用程序的工作原理。

1.Web应用程序产生之前

在Web应用程序出现之前,“客户机/服务器”(C/S)是应用程序的主流架构。C/S应用程序通过客户端程序它为用户提供管理和操作界面,而数据通常保存在服务器端。在部署C/S架构的应用程序时,需要为每个用户安装客户端程序,升级应用程序时也同样需要升级客户端程序。这无疑增加了维护成本。

2.Web应用程序的产生

1990年,欧洲原子物理研究所的英国科学家TimBerners-Lee(见图1-6)发明了WWW(World Wide Web)。通过Web,用户可以在一个网页里比较直观地表示出互联网上的资源。因此,TimBerners-Lee被称为互联网之父。

figure_0013_0006

图1-6 互联网之父TimBerners-Lee

采用B/S网络模型开发的应用程序被称为Web应用程序, Web应用程序使用Web文档(网页)来表现用户界面,而Web文档都遵循标准HTML格式(包括2000年推出的XHTML标准格式)。因为所有Web文档都遵循标准化的格式,所以在客户端可以使用不同类型的Web浏览器查看网页内容。只要用户选择安装一种Web浏览器,就可以查看所有Web文档,从而解决了为不同应用程序安装不同客户端程序的问题。

Web应用程序只部署在服务器端。用户在客户端使用浏览器浏览服务器上的页面,客户端与服务器之间使用超文本传送协议(HTTP)进行通信。早期的Web服务器只能简单地响应浏览器发送过来的HTTP请求,并将存储在服务器上的HTML文件返回给浏览器。客户端只接收到经过服务器端处理的静态网页。

3.从静态页面到动态页面

这里所说的静态页面和动态页面并不是指页面的内容是静止的还是动态的视频或画面。静态页面指页面的内容在设计时就固定在页面的编码中,而动态页面则可以从数据库或文件中动态读取数据,并显示在页面中。以网上商场系统为例,如果使用静态页面浏览商品的信息,则只能在设计时为每个商品设计一个页面,新增商品,就需要新增对应的页面;如果使用动态页面浏览商品的信息,则可以使用一个页面显示所有商品的信息,页面中的程序根据商品编号从数据库中读取商品,然后显示在页面中。

Web应用程序产生之初,Web页面都是静态的,用户可以通过单击超链接等方式与服务器进行交互,访问不同的网页。

最早能够动态生成 HTML 页面的技术是 CGI(Common Gateway Interface)。1993 年,NCSA (National Center for Supercomputing Applications)提出了CGI 1.0的标准草案;1995年,NCSA开始制订CGI 1.1标准;1997年,CGI 1.2也被纳入了议事日程。CGI技术允许服务端的应用程序根据客户端的请求,动态生成HTML页面,这样客户端就可以和服务端实现动态信息交换了。早期的CGI程序大多是编译后的可执行程序,其编程语言可以是 C、C++、Pascal 等任何通用的程序设计语言,也可以是 Perl、Python等脚本语言。

1994年,Rasmus Lerdorf(见图1-7)发明了专门用于Web服务端编程的PHP(Personal Home Page)工具语言。与以往的CGI程序不同,PHP语言将HTML代码和PHP指令结合成为完整的服务端动态页面,程序员可以用一种更加简便、快捷的方式实现动态Web功能。这也正是本书要介绍的主要内容。

figure_0014_0007

图1-7 Rasmus Lerdorf发明了PHP语言

1995年,Netscape公司推出了一种在客户端运行的脚本语言——JavaScript。使用JavaScript语言可以在客户端的用户界面上添加一些动态的元素,如弹出一个对话框。

1996年,Macromedia公司推出了Flash,一种矢量动画播放器。它可以作为插件添加到浏览器中,从而在网页中显示动画。

同样在1996 年,Microsoft 公司推出了ASP 1.0。这是Microsoft公司推出的第1 个服务器端脚本语言,使用ASP可以生成动态的、交互式的网页。从Windows NT 4.0开始,所有的Windows服务器产品都提供IIS(Internet Information Services)组件,它可以提供对ASP语言的支持。在ASP中,可以使用VBScript和JavaScript等脚本语言开发服务器端Web应用程序。

1997—1998年,Servlet技术和JSP技术相继问世,这两者的组合(还可以加上JavaBean技术)让Java开发者同时拥有了类似CGI程序的集中处理功能和类似PHP的HTML嵌入功能。此外,Java的运行时编译技术也大大提高了Servlet和JSP的执行效率。

2002年,Microsoft公司正式发布.NET Framework和Visual Studio .NET开发环境。它引入了ASP.NET这样一种全新的Web开发技术。ASP.NET可以使用VB.NET、C#等编译型语言,支持Web Form、.NET Server Control、ADO.NET等高级特性。

在互联网的发展历史中,还出现了很多实用的技术,由于本书篇幅和侧重点等原因,这里就不做展开了,点到为止,仅供读者参考。

1.2.2 Web应用程序的组成及各部分的主要功能

Web应用程序通常由HTML文件、脚本文件和一些资源文件组成。

• HTML文件可以提供静态的网页内容,这也是早期最常用的网页文件。

• 脚本文件可以提供动态网页。ASP 的脚本文件扩展名为.asp,PHP 的脚本文件扩展名为.php,JSP的脚本文件扩展名为.jsp。

• 资源文件可以是图片文件、多媒体文件、配置文件等。

要运行Web应用程序,还需要考虑Web服务器、客户端浏览器、HTTP通信协议等因素。

1.Web服务器

运行Web应用程序需要一个载体,即Web服务器。一个Web服务器可以放置多个Web应用程序,也可以把Web服务器称为Web站点。

通常服务器有两层含义,一方面它代表计算机硬件设备,用来安装操作系统和其他应用软件;另一方面它又代表安装在硬件服务器上的相关软件。Web服务器上需要安装Web服务器应用程序,用来响应用户通过浏览器提交的请求。如果用户请求执行的是PHP脚本,则Web服务器应用程序将解析并执行PHP脚本,最后将结果转换成HTML格式,并返回到客户端,显示在浏览器中。

2.Web浏览器

Web浏览器是用于显示HTML文件的应用程序,它可以从WWW接收、解析和显示信息资源(可以是网页或图像等)。信息资源可以使用统一资源定位符(URL)标识,

Web浏览器只能解析和显示HTML文件,而无法直接处理脚本文件。这就是为什么可以使用Web浏览器查看本地的HTML文件,而脚本文件则只有被放置在Web服务器上才能被正常浏览。

3.HTTP通信协议

HTTP(Hypertext Transfer Protocol,超文本传输协议)是Web浏览器和Web服务器之间交流的语言。Web浏览器向服务器发送HTTP请求消息,服务器返回相应消息,其中包含请求的完整状态信息,并在消息体中包含请求的内容。

1.2.3 网页的分类与布局

网页是Web应用程序的重要组成部分,本小节介绍网页的分类与布局,为设计Web应用程序奠定基础。

1.网页的分类

按照编制网页所使用的语言和技术,可以将网页分为静态网页和动态网页。静态网页由HTML语言编制,扩展名为htm或html,多使用Dreamweaver等网页设计工具设计。动态网页指使用PHP、ASP等脚本编写,扩展名为.asp或.php等的网页。一个网站中通常既有静态网页,也有动态网页。

按照网页的用途,还可以将网页分为商业型、门户型、搜索引擎、论坛、博客、在线游戏等类型。

2.网页的布局

设计网页时,首先要根据网页的用途和内容设计网页的布局。常用的网页布局包括如下几种。

(1)国字型

国字型网页也称为同字型网页,即网页的布局类似国字,最上面是网站的标题或横幅广告,下面的内容被分为左中右3列。中间是网页的内容,左右一般是一些栏目、广告或新闻的链接,最下面是网站的基本信息、联系方式、版权声明等。一些大型门户网站的首页多采用此种布局,如新浪首页就属于国字形网页,如图1-8所示。

(2)拐角型

拐角型网页与国字型网页很相似,最上面是网站的标题或横幅广告,下面的左侧是一个窄条的链接,中间和右侧是网页的内容,最下面是网站的基本信息、联系方式、版权声明等。有一些公司的网站首页采用此种布局,图1-9所示为拐角型网页的例子。

(3)标题正文型

这是一种简单的网页布局,即上面是标题或广告等,下面是正文。一般采用此种类型的网页显示新闻或文章。

figure_0016_0008

图1-8 国字形的新浪首页

figure_0016_0009

图1-9 拐角型网页

(4)框架型

即使用框架将页面分成上下或左右两部分的网页类型,这种结构比较清晰。图1-10所示为框架型网页的例子。左侧的框架中显示产品分类,右侧的框架中是产品展示。

(5)封面型

封面型多用于一些公司或商务活动的首页,采用精美的图片或动画加上一些简单的链接。图1-11所示为封面型网页的例子。

figure_0016_0010

图1-10 框架型网页

figure_0016_0011

图1-11 封面型网页

(6)Flash型

与封面型网页类似,Flash型网页也多用于一些公司或商务活动的首页,采用精美的Flash加上一些简单的链接。Flash的功能十分强大,视觉效果明显优于图片。图1-12所示为Flash型网页的例子。

figure_0016_0012

图1-12 Flash型网页

教程类别