第2章 WebGIS开发基础

2.1 Web开发基础理论

2.1.1 B/S架构

Web软件开发通常使用B/S（Browser/Server，浏览器/服务器）架构，这是Web兴起后的一种网络结构模式，是目前网络开发的主流趋势。

B/S架构采用开放式的浏览器/服务器架构，其基本结构一般包括Web服务器、Web页面、Web浏览器和HTTP协议等部分，如图2-1所示。HTTP协议是基于客户器/服务器架构的信息分布方式，原意为“请求-响应模型”，即将包含信息等网页文档存放在Web服务器上，客户端以Web浏览器为媒介，通过程序向Web服务器发出请求并访问相应的Web网页。基于B/S架构的Web应用，将Web应用程序安装部署在服务器端，客户端直接通过Web浏览器访问，如网络上常见的门户网站、论坛、商城等。

Web应用的经典多层架构为表现层、业务逻辑层、数据访问层、数据源。对应于Web的多层结构，从物理角度划分，依次为数据服务器、Web服务器、客户端（浏览器）三个核心构件。Web应用的多层架构如图2-2所示，其中，Web应用程序主要分为Web客户端与Web服务器端，即通常所说的Web前端与Web后台。Web客户端通常指表现层；Web服务器端则包括业务逻辑层与数据访问层，目前使用Web Service（Web服务）封装系统的业务逻辑功能与数据操作功能成为主流趋势之一。整个Web系统开发完成后，将编译后的Web应用程序部署在Web服务器上，数据库则部署在数据服务器上，用户通过客户端的浏览器（如IE）进行访问。

（1）表现层（UI）：负责用户与整个系统的交互，通俗地讲就是展现给用户的页面，即用户在使用一个系统的时候，他的所见即所得。

（2）业务逻辑层（BLL）：与系统所应对的业务（领域）逻辑有关，负责业务规则的制定、业务流程的实现等。针对具体问题的操作，即对数据业务逻辑处理，是针对数据层的操作。业务逻辑层扮演两个不同的角色：对于数据访问层而言是调用者；对于表现层而言是被调用者，可以使用Web Service的服务模式实现。

（3）数据访问层（DAL）：该层主要是数据库的操作，主要负责数据库的访问，实现对数据表的选择、插入、更新、删除操作，同样可以使用基于Web Service的服务模式实现。

Web应用的多层架构设计具有很多优势：开发人员可以只关注整个架构中的其中一层；可以很容易地用新的实现来替换原有层次的实现；可以降低层与层之间的依赖；有利于标准化；有利于各层逻辑的复用等。基于多层架构设计的Web应用，具备良好的数据兼容性、可移植性，维护方便。随着Web技术的发展，为解决共享难、复用差、跨平台难、业务混乱等诸多问题，Web S ervice技术应运而生。基于Web S ervice的服务模式成为Web应用的主流趋势。Web应用也趋向于前/后端分离，由此衍生出了Web前端开发与Web后台开发。

在Web发展过程中，用户需求和技术进步是推动架构进步的动力。在设计一个Web应用的架构时，要切实满足当前用户需求，同时考虑应对发展变化的灵活性。因此，Web应用架构的扩展性非常关键。如果每次在需求变化时都会导致架构进行重大改动，那么这无疑是一个失败的设计。

2.1.2 客户端技术

Web前端开发技术包括网页开发技术、客户端交互实现技术等。Web前端开发技术的三要素为HTML、CSS和JavaScript，但随着RIA的流行与普及，Flash/Flex、Silverlight等也非常受欢迎。随着时代的发展，Web前端开发技术的三要素已经演变为现在的HTML5、CSS3、jQuery。

1.HTML

HTML（Hypertext Markup Language）即超文本标记语言，是用于描述网页文档的一种标记语言。它通过在用户文档中加入特定的控制字符或命令，使文档能够按照用户期望的格式输出。HTML语言主要用于客户端的页面设计。HTML作为互联网上“通行无阻”的语言，简单易用但功能强大，支持不同数据格式的文档嵌入，具有简易性、可扩展性、平台无关性等特点。

HTML文档是使用HTML语言编写的ASII文本文档，扩展名为．htm或．html，主要用于定义Web页面的内容与显示格式。HTML文档包含文档（显示）内容与HTML标记两部分，其标记基本上是成对出现的，即由一个开始标记和一个结束标记组成。

随着Web技术的发展与应用，HTML不断丰富和规范，形成相应的各个版本。HTML5的第一份正式草案已于2008年1月22日公布，目前仍处于发展阶段，但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点：首先，强化了Web网页的表现性能；其次，追加了本地数据库等Web应用的功能。广义上的HTML5，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合，它希望能够减少浏览器对于需要插件的富互联网应用（RIA）的需求，并且提供更多能有效增强网络应用的标准集。

2.CSS

CSS（Cascading Style Sheet）即级联样式表，通常又称为风格样式表（Style Sheet），用来进行网页风格设计，即表现HTML或XML等文档的样式。比如，如果想让链接字在未单击时是蓝色的，当鼠标指针移上去时变成红色且有下画线，这就是一种风格。通过设计级联样式表，可以统一控制HTML中各标志的显示属性，能够更有效地控制网页外观，具有精确指定网页元素位置、外观以及创建特殊效果的能力。

在站点网页上使用的级联样式表有三种：外部样式表、内页样式表、行内样式表。其中，网页链接到外部样式表，为网页所创建的嵌入式样式将扩充或覆盖外部样式表中的指定属性。在设计Web页面时，通常采用CSS+DIV的页面布局。相比传统的用Table布局的页面，CSS+DIV方式具有代码精简、易重构、访问网页速度快、浏览器兼容性好等优点。

CSS目前的最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML而言，CSS能够对网页中的对象位置排版进行像素级的精确控制，支持几乎所有的字体、字号、样式，拥有对网页对象进行显示控制的能力，并能够进行初步交互设计，是目前基于文本展示的最优秀的设计语言。HTML5兼容CSS3，使得HTML5的应用更加广泛。

3.JavaScript

JavaScript的前身为LiveScript。在Netscape公司与Sun公司合作之后，引进Java的程序设计概念，将其改名为JavaScript。之所以取名为JavaScript，原因在于JavaScript是一种嵌入HTML文档的、基于对象的脚本设计语言，语法同Java语言很相似，而且JavaScript的设计使得它很容易同Java语言一同工作，还可以充分支持Java的Applet应用程序。目前，几乎所有的浏览器都支持JavaScript语言。

JavaScript是一种通用的、基于原型的、面向对象的脚本语言，属于解释型语言，它的设计目标是在不占用很多系统和网络资源的情况下提供一种可以嵌入不同应用程序的通用代码，不需要依赖于特定的机器和操作系统，独立于操作平台。

JavaScript主要用于创建具有动态性、交互性的Web页面，有如下几个特点：

（1）简单性：JavaScript语句可以直接嵌入HTML文档中，其语句的解析执行由Web浏览器负责，不需要额外的开发环境。

（2）基于对象：JavaScript采用面向对象的编程方法，通过设置属性和调用方法来完成所需的编程功能。

（3）事件驱动：JavaScript采用事件驱动方式，可以对用户的鼠标单击、移动窗口、菜单选择等事件产生响应。

（4）平台无关性：JavaScript的运行依赖于Web浏览器，与操作环境无关，只要客户端能运行支持JavaScript的Web浏览器，就可以运行嵌入JavaScript脚本的Web页面。

（5）安全性：JavaScript脚本是通过Web浏览器处理的，不能修改其文件的内容。因此，当Web浏览器浏览嵌入JavaScript脚本的Web页面时，用户不需要担心JavaScript脚本会被删除或修改。同时，没有服务器端程序的协同，JavaScript脚本不能在服务器上打开文件或存储信息。

JavaScript的功能强大且非常灵活，了解其特性与适用场合，便能运用自如。JavaScript主要适用于交互式用户页面设计、动态更新页面信息、数据校验、通过Ajax异步访问服务器提取数据等。鉴于JavaScript的优良特性，业界很多个人或组织投入研究与应用，涌现出大量优秀的JavaScript开源框架和插件，让Web开发事半功倍。基于这些开源框架和插件，使HTML+CSS+JavaScript的Web应用具有丰富的交互体验效果，可以与Flex、Silverlight等RIA媲美，获得了更多Web开发人员的青睐。因此，HTML5+CSS3+JavaScript已成为目前Web前端开发广泛使用的方式。本书也是基于此方式展开介绍的。

4.Flex

Flex通常指Adobe Fle x，基于其专有的Macromedia Flas h平台，Flex是涵盖了支持RIA（Rich Internet Applications）的开发和部署的一系列技术组合。Flex作为RIA开发的主流方式之一，应用较广。Flex是基于组件的开源开发框架，使用MXML与ActionScript语言构建RIA系统，其应用系统编译成Flash文件，通过Flash Player插件运行，兼容性非常好。Flex继承了Flash在表现层得天独厚的优势，丰富的交互性和视觉效果吸引了越来越多的Web开发者。

5.Silverlight

Silverlight是一种融合了微软的多种技术的Web呈现技术，也是RIA开发的主流方式之一。Silverlight提供了一套开发框架，为开发设计人员提供了一个统一的开发应用模型，基于XAML进行交互，使具有不同背景知识的开发设计人员能够更好地协作，高效地创造出能在Windows和Macintosh上多种浏览器中运行的，内容丰富、页面绚丽的Web应用程序。

6．其他相关技术

另外，基于HTML+CSS+JavaScript的Web客户端开发，通常会涉及XML、DOM、Ajax等相关技术。

（1）XML（Extensible Markup Language）：可扩展标记语言，用于标记电子文件，使其具有结构性的标记语言，可以用来标记数据、定义数据类型，允许用户对自己的标记语言进行定义。XML是标准通用标记语言（SGML）的子集，非常适合Web传输。XML提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。XML与HTML的设计区别是：XML的核心是数据，其重点是数据的内容；而HTML用来显示数据，其重点是数据的显示。XML可在任何应用程序中读写数据，这使XML很快成为数据交换的唯一公共语言。

（2）DOM（Document Object Model）：文档对象模型，用于表示文档（如HTML、XML）、访问、操作文档各种元素的应用程序接口（API）。DOM用于JavaScript与页面的交互能够动态修改文档中的节点、元素、属性等。一般的，支持JavaScript的所有浏览器都支持DOM。在DOM下，HTML文档各个节点被视为各种类型的Node对象，每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档。

（3）Ajax（Asynchronous JavaScript and XML）:Ajax并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在一起的，在共同的协作中发挥各自的作用。Ajax最大的一个特点是无须刷新页面便可向服务器传输或读写数据（又称为无刷新更新页面）。这一特点主要得益于XMLHTTP组件XMLHttpRequest对象，它是一种支持异步请求的技术。只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次将数据处理的工作提交给服务器来做，既减轻了服务器的负担，又加快了响应速度、缩短了用户等候时间。

7．开源框架与插件

随着JavaScript和相关技术在Web开发中的广泛应用，出现了很多JavaScript开源框架，即JavaScript库。其中，jQuery是目前最流行的JavaScript库。jQuery是一个轻量级的js库，兼容CSS3与各种浏览器，简化HTML与JavaScript之间的操作，使用户能更方便地处理HTML文档、事件、实现动画效果，并且方便地为网站提供Ajax交互。除了jQuery，还有大量优秀的JavaScript框架和插件，如Prototype、ExtJS、MooTools、Dojo、YUI等。

（1）Prototype：致力于简化动态Web应用程序的开发，具有独特的、易用的工具库和最好的Ajax库。

（2）ExtJS：用于创建前端用户页面，与后台技术无关的前端Ajax框架，主要用来开发RIA的Ajax应用，具有强大的UI，而且性能不错。

（3）MooTools：是一个模块化的、面向对象的JavaScript框架，适合中高级JavaScript开发人员。

（4）Dojo：其强大的核心使Web开发更加敏捷，拥有出色的UI工具库，号称Unbeatable JavaScript Tools，更适合企业应用和产品开发，背后有IBM、Sun、BEA等公司的强大支持。

（5）YUI：是Yahoo公司推出的开源JavaScript框架，用于快速开发交互性高、更加稳健的Web应用。

在实际应用中选用这些框架与插件，可以大幅提高开发效率，并且强化Web应用，使得Web前端开发人员更加得心应手。

由于有了WebKit和HTML5的支持，很多Web开发厂商开始转向基于移动设备的Web应用框架组件，推出了一些面向移动应用的JavaScript框架，如Yahoo的YUI3.2的Touch、jQuery的jQueryMobile、ExtJS整合的jQTouch，以及Raphael推出的Sencha Touch框架等。

2.1.3 服务器端技术

Web服务器端开发技术一直以来主要分为两大不同派系：.NET与Java。.NET是微软提供的框架，可以使用ASP.NET进行动态网页开发，后台使用C#语言实现；基于Java技术进行Web应用开发，主要采用JavaEE平台体系，使用JSP进行动态网页开发，后台使用Java语言实现。除此之外，还有CGI、PHP、Python等技术。

随着Web S ervice技术的兴起，越来越多的开发人员喜欢用Web S ervice技术，基于面向服务的模式构建Web应用，解决系统集成、异构平台协作、资源共享等问题。Web S ervice只有通过日益广泛的应用才能体现出价值，比较流行的实现方法是使用．NET和Java两种技术，并且两种实现方法可以互相操作。

1..NET

基于．NET的Web开发，即使用微软的．NET框架进行开发。.NET框架（.NET Framework）是一个致力于快速应用开发、平台无关性和网络透明化的软件开发平台，包含很多有助于互联网和内部网应用迅捷开发的技术，如图2-3所示。

.NET框架是一个多语言组件开发和执行环境，提供了一个跨语言的统一编程环境。.NET框架的目的是便于开发人员更容易地建立Web应用程序和Web服务，使得互联网上的各应用程序之间可以使用Web服务进行沟通。从层次结构来看，.NET框架又包括三个主要组成部分：通用语言运行时（CLR）、服务框架和上层的两类应用模板——传统的Windows应用程序模板和基于ASP.NET的面向Web的网络应用程序模板。.NET框架在通用语言运行时的基础上，给开发者提供了完善的基础类库、高效的数据库访问技术ADO.NET、网络开发技术ASP.NET等，开发者可以使用多种语言及Visual Studio.NET来快速构建网络应用。

基于．NET的Web开发，应用成熟规范的．NET开发框架，遵循．NET技术标准，便于快速开发各种Web应用系统。目前，基于．NET开发框架的Web应用，Web服务器端通常采用C#语言实现系统业务逻辑，或者编写实现系统功能的Web服务；客户端则使用ASP.NET的相关控件，并结合HTML、CSS、JavaScript等进行开发。

2.Java

基于Java的Web开发，即使用Java技术开发实现Web应用程序。Java是一种可以编写跨平台应用软件的面向对象的程序设计语言，是由Sun公司推出的Java程序设计语言和Java平台的总称。Java技术具有卓越的通用性、高效性、平台移植性和安全性，在各个领域得到广泛应用。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。

Java语言的风格十分接近于C、C++语言，它继承了C++语言面向对象技术的核心，是纯面向对象的程序设计语言。Java不同于一般编译执行或解释执行的计算机语言，它首先将代码编译成二进制字节码，然后依赖于各种不同平台上的虚拟机来解释执行字节码，从而实现了“一次编译、多处运行”的跨平台特性。

Java平台由Java虚拟机和Java应用编程接口（API）构成。在硬件或操作系统中安装一个Java平台之后，即可运行Java应用程序。Java平台主要分为三个体系，即JavaSE（Java2 Platform Standard Edition, Java平台标准版）、JavaME（Java 2 Platform Micro Edition, Java平台微型版）、JavaEE（Java 2 P latform E nterprise Edition, Java平台企业版）。JavaEE可以帮助开发和部署可移植、健壮、可伸缩且安全的服务器端Java应用程序。JavaEE提供Web Serivce、组件模型、管理和通信API，通常用来实现企业级的面向服务的体系架构和Web应用程序。

JavaEE使用多层分布式应用模型，应用逻辑按功能划分为组件，各个应用组件根据它们所在层分布在不同的机器上。该模型通常分四层来实现，也可以按三层来实现，分别如下：

● 客户层：运行在客户计算机上的组件。

● Web层与业务逻辑层：运行在JavaEE服务器上的组件。

● 企业信息系统（EIS）层：运行在EIS服务器上的软件系统，通常为数据库系统等。

在JavaEE的分层应用模型（见图2-4）中，客户层组件包括Web浏览器，Applet与应用服务器，Web方式通常采用HTML+CSS+JavaScript等技术实现动态网页；而Web层与业务逻辑层均位于JavaEE服务器上，Web层组件可以是JSP页面或Servlet等，业务逻辑层则是对行业应用的业务逻辑进行处理，通常由运行在业务逻辑层上的Enterprise Bean（EJB）容器完成；对企业EIS层的数据操作是通过JDBC等技术来实现的。基于Java的Web开发，通常会综合采用已有的框架构建Web项目，如目前流行的Hibernate、Struts、Spring等框架，既可提高系统开发效率，也便于系统更新维护。

目前常用的Java平台基于Java1.8，最新版本为甲骨文公司收购后推出的Java开发包。Sun公司在推出Java之际就将其作为一种开放的技术，全球数以万计的Java开发公司被要求所设计的Java软件必须相互兼容。正因如此，Java技术才得以广泛应用，成为主流的程序开发技术。

3.Web Service

随着网络技术、网络运行理念的发展，人们提出一种新的利用网络进行应用集成的解决方案——Web Service。Web Service成为构造分布式、模块化应用程序和面向服务应用集成的最新技术和发展趋势。

所谓Web S ervice（Web服务），是指那种自包含、自描述、模块化的应用程序，这类应用程序能够被发布、定位，并通过Web实现动态调用。从表面上看，Web服务向外界暴露出一个能够通过Web进行调用的API，用户能够采用编程的方法通过Web来调用该API，即使用这个应用程序。Web服务主要是为了使原来各孤立的站点之间的信息能够相互通信、共享而提出的一种接口。Web服务所实现的功能可以是从简单请求到复杂的商业过程。一旦一个Web服务被配置完毕，则其他的应用程序，包括其他Web服务就能够发现并调用该服务。因此，利用Web服务技术，可以很好地实现在服务层上的互操作，并实现服务整合。

Web服务是基于XML和HTTPS的一种服务，其通信协议主要基于SOAP，服务的描述采用WSDL，通过UDDI来发现和获得服务的元数据。其中，XML是表示数据的基本格式，可以基于XML来表示结构化数据，以便在网络上进行数据传输与交换。Web Service体系如图2-5所示。

（1）XML。XML是一个基于文本的、W3C组织规范的标记语言。与HTML使用标签来描述外观和数据不同，XML严格地定义了可移植的结构化数据，可以作为定义数据描述语言，如标记语法或词汇、交换格式和通信协议。XML是Web服务中表示数据的基本格式，既与平台无关，也与厂商无关。

（2）SOAP。简单对象访问协议（Simple Object Access Protocol, SOAP）是一个基于XML的、用于在分布式环境下交换信息的轻量级协议，被设计成在Web上交换结构化的和固化的信息。SOAP在服务请求者和服务提供者之间定义了一个通信协议，在面向对象编程的环境中，可以在提供的对象上执行远程方法调用。SOAP的优点在于它完全和厂商无关，相对于平台、操作系统、目标模型和编程语言可以独立实现。

（3）WSDL。用于描述Web S ervice及其函数、参数和返回值。WSDL定义了一个XML词汇表，该词汇表依照请求和响应消息，在服务请求者和服务提供者之间定义了一种契约。我们能够将Web服务定义为软件，这个软件通过描述SOAP消息接口的WSDL文档来提供可重用的应用程序功能，并使用标准的传输协议进行传递。

（4）UDDI。通用描述、发现和集成（Universal Description, Discovery and Integration, UDDI）协议向Web服务注册中心定义SOAP接口。

Web Service技术能够很好地克服异构系统之间平台、语言、协议的差异，实现无缝、松耦合的系统集成。其突出的优点表现在几个方面：实现异构平台间的互通、实现更广泛的软件复用、具有更强大的通信能力。

如今，Web服务已广泛应用，很多Web应用使用Web S ervice技术，采用面向服务（如SOA）的架构设计。Web Service主要有SOAP与REST两种形式：

（1）基于SOAP的Web Service：即SOAP协议方式。SOAP是在分布式的环境中交换信息的简单协议，采用的通信协议可以是HTTP/HTTPS（最广泛应用）协议，也可以是SMTP/POP3协议，或为一些应用专门设计的特殊通信协议。通常，SOAP被简单理解为SOAP=RPC+HTTP+XML，即SOAP采用HTTP和XML协议，HTTP用于实现RPC风格的传送，而XML是编码模式。基于SOAP的Web Service一般是通过服务代理类进行调用的。

（2）基于REST的Web Service:REST（Representational State Transfer）在Web领域已经得到了广泛的应用，是更为简单的基于SOAP和WSDL的Web Service替代方法。基于REST的Web S ervice是一组非常便于理解的URL，将互联网上的一切都表示为资源，对函数的调用将转化为对资源的HTTP请求。基于REST的Web Service可直接通过浏览器调用，即基于HTTP协议进行通信，返回XML、JSON（JavaScript Object Notation）等格式的数据。

针对REST的特性，可以在JavaScript中大量使用基于REST的Web S ervice，以请求资源的JSON数据，并快速将其转化为JavaScript对象，而无须使用传统的服务器端开发方式实现。由此，REST服务结合JavaScript的纯客户端开发，将大幅度减少工程的复杂度与代码量，凸显了REST架构设计的优势。目前，大部分Web开发者都选用了REST服务方案，简单易用，更为灵活。

基于SOAP的Web Service功能强大、全面，虽然使用较为复杂，但SOAP作为一个工业标准，具备标准化协议和一套公共遵循的规则，在很多大型和小型Web系统中均有采用，仍然是Web服务应用的重要角色。对于Web开发者来说，目前上述两种方式都是行之有效的方案。基于REST或SOAP的Web S ervice都能解决许多Web方面的问题与挑战，同时两者还可以搭配使用。

2.1.4 数据库技术

数据是网络世界的基础，数据库为Web应用与资源共享提供了一个有力的工具。随着互联网的快速发展，数据库技术的应用越来越广泛，已成为Web应用必不可少的重要内容，更是网络的核心技术。万丈高楼平地起，系统的数据库建设是最关键的地基，其重要性是显而易见的。因此，在现有的Web应用系统建设中，数据库设计是非常关键的一项内容。

鉴于数据库的重要性，各大软件厂商纷纷推出自己的Web数据库解决方案产品，并提供相应的工具与技术。目前，主流的Web数据库有Microsoft SQL Server、Oracle、Sybase、DB2、MySQL、Microsoft Access等。这些数据库各有所长，在市场上各占一席之地。因此，在系统设计时可根据应用需求进行选型。

现有的关系数据库几乎都采用结构化查询语言（Structured Query Language, SQL）标准。SQL是专为数据库而建立的操作命令集，包括数据定义、数据操纵、数据控制等方面，是一种功能齐全的数据库语言。SQL的主要功能就是同各种数据库建立联系，进行沟通。SQL语言结构简洁、功能强大、简单易学，已经成为数据库操作的基础。

数据库管理系统为Web应用系统提供数据存储与管理功能。在Web应用系统中，通过相应的数据库驱动访问操作数据资源。