WebGIS之OpenLayers全面解析.docx

《WebGIS之OpenLayers全面解析.docx》由会员分享，可在线阅读，更多相关《WebGIS之OpenLayers全面解析.docx（314页珍藏版）》请在三一办公上搜索。

1、WebGlS之OPelILayerS全面解析WebGIS之OPenLayerS全面解析1. 第1章概述2. 1.2什么是WebGIS3. 1.3常见的开源WebGIS平台4. 第2章WebGlS开发基础5. 2.2Web编程基础6. 2.3WebGlS框架结构7. 2.4WebGlS开发相关GIS背景知识8. 第3童C)PenLayers开发基础9. 3.20PenLayers3API概述10. 3.3C)PenLayerS开发环境配置11. 3.4OPenLayerS调试方法12. 3.5网站开发与发布13. 第4宣OPenLayers快谏入门14. 4.1创建Web项目15. 4.2搭建系

2、统框架16. 4.3实现地图显示功能17. 4.4加载常用控件18. 4.5练习19. 第5章ODenLayerS之多源数据加载20. 5.1数据加载原理21. 5.2基础地图数据22. 5.3开放数据23. 5.4公共地图数据24. 5.5多源数据叠加显示25. 5.6瓦片网格彳百息显示26. 5.7地图打印27. 5.8练习28. 第6章ODenLayerS之图形绘制篇29. 6.1图形交互绘制原理30. 6.2绘制几何图形31. 6.3图形样式编辑32. 6.4图形交互编辑33. 6.5图形信息保存34. 6.6练习35. M7CenIyeOGC36. 7.2OGC数据加载原理37. 7

3、.3OGC数据显示38. 7.4练习39. 第8童ODenLayerS之高级功能篇40. 8.2动态投影41. 8.3视图联动42. 8.4定位导航43. 8.5热点图44. 8.6热区功能45. 8.7统计图46. 8.8标绘功能47. 8.9练习48. 第9章。草nLayers之项目实战水利信息在线分析服务系统49. 9.2系统需求50. 9.3系统设计51. 9.4系统实现52. 9.5系统部署53. 9.6练习54. 附宗AOpenLayers3API55. 附录BJaVaScTit编码规范56. 附录C背景知识参考资料57. 参考文献58. 后折页59. 封底第1章概述1.1什么是G

4、IS地理信息系统(GeOgr叩hieInformationSysiem,GIS)是一种特定的十分重要的空间信息系统，它是在计算机软硬件系统的支持下，以采集、存储、管理、检索、分析和描述空间物体的定位分布及与之相关的属性数据，并以回答用户的问题为主要任务的计算机系统。任何事物都有时空属性，都与空间信息相关，地理信息无处不在。GIS以空间数据为基础，航天、地面、地表、地下等都是GIS所研究的领域。我们在工作和生活中所接触到的各种地图制图工具及在线地图产品，如百度地图、GOogle地图等，仅仅是GlS的冰山一角。其实，GlS从最初的地图制图发展至今，已广泛应用于国土、气象、矿产、农林、市政等专业领域

5、，以处理和分析各个行业面临的业务问题并辅助其进行决策。GlS究竟能做什么呢?以大众应用为例。GlS首先就是用于收集地理信息，人类的绝大部分活动都与地理位置有关，比如想和朋友找个餐厅吃饭，周末想找个电影院看电影，到一个陌生的城市出差找宾馆这些都涉及地理信息。通过GIS能有效地把这些信息都存储起来，怎么存呢？用EXCel吗？那怎么和地图关联起来？文本文件或数据库都可以，我们只要按要求把信息录入就可以了。收集到的地理信息，在电脑中只是一堆表格数据，那怎么为人们所看到呢？这就是所谓的“可视化”了，各种图表是信息可视化的产物，那地理信息可视化的产物就是“地图”，当然地图远比GlS出现得要早，这位前辈是G

6、IS重要的代言人，GlS可以方便地将收集到的信息展示在地图上。而空间分析其实离我们也并不遥远，像大众点评这样的应用已经相当普及，我们可以很方便地找到周边的餐馆。还有地图导航，通过GPS装置收集你的地理位置之后，在地图上找到正确的位置显示，再进一步的实现查询、搜索等功能。上述仅仅是GIS在大众应用中的一个缩影。GlS发展至今，紧跟IT相关技术的步伐，从单机桌面工具到互联网Web在线应用，再到移动端便携应用；在各类应用需求的驱动下，从简单的制图到二维GIS应用，从2.5D到3D的进步，甚至全空间真三维的突破GIS在短短几十年中迅速发展、蜕变，GIS应用渗透到各行各业，分别在横向与纵向逐步扩大应用的

7、广度和深度，成为我们创建智慧城市和智慧地球的中坚力量。WebGIS（网络地理信息系统）是指基于Intemet平台，客户端应用软件采用网络协议，运用在Internet上的地理信息系统，即将GlS这门学科所能提供的功能通过互联网展现给用户。顾名思义，WebGlS就是展现于网络上的GIS,是GIS与Web融合的产物。GlS通过Web功能得以扩展，使得GIS冲破专业圈子，真正成为大众化的GIS。如今，网络已成为日常生活中不可或缺的工具，人们可以在网上订餐、购物、查找路线信息、实现定位分析等。地理信息已普及大众，越来越多的人开始使用地理信息服务，享受地理信息所带来的便利与乐趣。随着技术的不断发展，GlS

8、经历了单机应用向网络应用发展的过程。从本世纪开始，Internet进入了爆发式增长阶段，网络的铺设以及网速的提升都有了大幅度增加，这为WebGlS的发展提供了坚实的大环境。网络环境中的GIS应用从C/S（ClientZServer,客户机/服务器）模式向Intern&环境下的B/S（BrowserZServer,浏览器/服务器）模式发展，并逐步成为GlS应用的主流。相比C/S模式，B/S模式的WebGIS具有部署方便、使用简单、便于推广等天然优势，为地理信息服务的发展奠定了基础。于是，WebGIS应用需求剧增，基于B/S模式的GIS系统越来越多地开始提供服务，并且随着RIA（富客户端）技术、A

9、jax（动态网页）技术的涌现和成熟，WebGlS具有更好的视觉效果与交互效果，越来越受到广大用户的喜爱。网络的大发展为人类创造了极大的物质财富和精神财富，手指轻轻一点便可轻易获取各种信息资源。互联网与GIS的融合，成为GlS应用的催化剂，标志着GlS迎来一个新的时代，GlS真正走向大众化，GIS应用全面融入人们的工作与生活，并彰显出巨大的活力。WebGIS激活了GIS大众应用的市场，互联网早已敏锐地嗅到了商机，大量资本与外界力量进驻WebGlS,互联网巨头纷纷跨界布局地图领域，Google地图、百度地图等服务提供商的大规模扩张便是最好的证明。同时，移动互联网进入爆发增长期，移动互联网成功的关键

10、是为用户提供优质便捷的生活服务，地图则是实现移动端增值服务的最佳入口。因此，当移动互联网遇上无处不在的地理信息位置服务，LBS应用市场需求旺盛，移动端必将涌现出更多意想不到的特色应用。随着终端定位能力、网络及资费等外部条件的成熟，位置服务可能会在很多应用上成为标配，更有希望基于位置信息维度重新组织互联网上的海量信息，创新地理信息价值。如今，GlS早已融入人们的日常生活，网络在线地图不再限于导航，人们可以通过地图快速获取周围的景点、餐馆信息，甚至能在同一种应用中实现订餐、订房、支付等一站式服务。有了移动互联网的支撑，地图所承载的应用会更加丰富、多元化，WebGIS的应用将会更加宽泛和深入。随着新

11、互联网技术的发展，广义网络GlS被赋予了更多的内容。我们所讨论的WebGlS通常为狭义的网络GIS,即仅仅是基于B/S模式，并通过Web浏览器访问的WebGlS。WebGIS的应用非常广泛，可以应用到几乎所有的领域，主要分为行业应用与大众应用。行业应用通常为传统专业领域的应用，如地矿、国土、公安、市政、应急防灾等领域；大众应用则主要为互联网方向服务于人们日常生活的GIS应用，诸如百度地图等网络地图产品（见图1.1）,以及旅游、餐饮、购物、公交出行等各类WebGIS应用系统。而公众接触最多的也就是这些大众应用类产品，只是很多时候我们并不清楚这些就是WebGIS应用而已。图Ll百度地图等在线地图得

12、益于互联网的发展，WebGlS快速发展前进，开发工具与平台也呈现出百花齐放之势。目前，涌现出大量用于WebGlS二次开发的产品，主要包括开放API、开源与商业WebGIS开发平台等。互联网方向，有百度地图API、天地图API、高德地图API、腾讯地图API、GoogIe地图API等；行业应用方向，有很多诸如GeoSerVer的开源WebGIS平台，还有中地数码、超图、ESri等GlS厂商提供的专业WebGIS开发平台产品，如MaPGlSlGSerVer、ArcGISforSerVer等相关产品。1.3常见的开源WebGIS平台WebGIS市场需求旺盛，更多的人开始关注WebGlS应用，很多开发

13、者投身于GISer大军,催生了众多开源GIS项目，推动WebGIS的普及，如表Ll所示。表1.1部分开源GIS项目列表类型开源GIS项目说明桌面工具QGIS.uDig.GRASS主要用于制图，即在桌面端加栽数据并对数据进行编辑服务器GeoSerVer、MaPSerVcr、GcodjangoGeoServerJ2EE框架，MaPSerVer核心部分基于C语言数据库PostGIS/PostgreSQLMySQLSpatial主要用于存储空间数据客户端QGlS-OPCnLayCrs、OpCnSCales、Worldkit作为客户端开发框架工具集JTS、GEOS（几何拓扑操作库）、Shapely.GD

14、AL0GR（栅格矢量数据操作库）、Proj4（地图投影南）中间件Geolbols-.MaPIbokGCOlbOlS是一款基于JaVa的开源GIS工具集，允许用户对地理数据进行基本操作。空间分析功能一般基于中间件实现，或基于OGCWPS实现1. UDigUDig是一个开源的桌面应用程序框架（见图L2）,是构建在EdiPSeRCP和GeOToOIS（-个开源的JaVaGlS工具包）上的桌面GIS。UDig作为一款开源桌面GIS软件，基于JaVa和EdiPSe平台，可以进行ShP格式地图文件的编辑和查看；是一个开源空间数据查看器与编辑器，对OPenGIS标准、WebGIS,网络地图服务器和网络功能服

15、务器有特别的加强。图1.2UDig界面2. QGISQGlS是一个用户界面友好的桌面GIS,可运行在LinUx、UNIX、MaCoSX和WindoWS等平台之上。QGIS是基于Qt（跨平台的图形工具软件包）,使用C+语言开发的一个用户界面友好、跨平台的开源版桌面地理信息系统，如图1.3所示。图1.3QGlS界面3. GeoServerGeOSerVer是OPenGISWeb服务器规范的J2EE实现，利用GeOSerVer可以方便地发布地图数据，允许用户对数据进行更新、删除、插入操作，通过GeOSerVer可以比较容易地在用户之间迅速共享地理信息。GeOSerVer是社区开源项目，可以直接通过社

16、区网站(如中文社区网站GeOSerVer支持OGC标准规范的系列服务支持POStgreSQL、MySQL等数据库，以及ArcSDEsShaPefiIe等中间件和文件资源，能够将网络地图输出为JPEG、PNG、KML等多种图片和数据格式，可以运行在任何基于J2EESerVlet的容器之上，支持多种客户端框架，如C)PenLayerS等。4. MapServerM叩SerVer是美国明尼苏达大学(UniversityofMinnesota,UMN)在20世纪90年代利用C语言开发的开源WebGIS项目。图1.4GeOSerVer界面M叩SerVer是一套基于胖服务器端/瘦客户端模式的实时地图发布系

17、统，客户端发送数据请求时，服务器端实时地处理空间数据，并将生成的数据发送给客户端。M叩SerVer的核心部分是C语言编写的地图操作模块，它的许多功能都依赖一些开源或免费的库。M叩SerVer遵循OGC系列规范，可以集成POStGlS和开源数据库POStgreSQL,并对地理空间数据进行存储和SQL查询操作，同时还支持其他客户端APl实现地理空间数据的传输与表达。5. OpenLayersOPenLayerS是一个专为WebGlS客户端开发提供的JaVaSCriPt类库包，用于实现地图数据的网络访问。它访问地理空间数据的方法都符合行业标准，支持各种公开的和私有的数据标准和资源。OPenLayer

18、S采用纯面向对象的JaVaSCriPt方式开发，同时借用了PrOtotyPe框架和Rico库的一些组件。OPenLayerS是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，具有灵活的扩展机制。目前，OPenLayerS已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架。目前OPenLayers2已经升级为OPeilLayerS3,可以从其官方网站(http:/openLayers.org/)下载相关资源，如图1.5所示。图1.5OPenLayerS官网6. OpenScalesOPenSCaleS是一个基于FleX的优秀的前台地图框架，可以用

19、来开发各种网络版、手机版和桌面版地图程序。OPenSCaleS是基于ACtionSCriPt3和FleX编写的，能够支持各种标准的地图服务，如WMS、WFS.WMTS.OSM等。它是开源的、免费的客户端开发框架，基于LGPL开源协议，它在FIaShPIayer中运行，可以在各个浏览器中使用，具宥很好的跨平台特性。OPenSCaleS作为一个开源的GlS客户端框架，具有非常大的应用潜力，可以从其官方网站(http:/WWw.openscales.org/)下载相关资源，如图1.6所示。图1.6OPenSCaleS官网C）PenSCaleS可以看成对OPenLayerS的AetionSCriP【翻

20、译，所以在学习OPenSCaIeS时可以适当参考OPenLayerS的官方教程。箱比之下，虽然OPenLayerS的教痛也是英文的，不过非常详细，提供的示例也远比OPenSCaIeS的官方教程丰富。针对WebGlS应用开发，最具代表性的开源GIS项目有：服务器端为GeOSerVer与MapServer1客户端为OPenLayerS与OPenSCaleS。总的来说GeOSerVer的功能要稍强于M叩SerVer,MaPSerVer对WMS的士持更高效，GeOSerVer则更擅长符合WFS规范而属性查询。由于不同的GlS开源项目所采用的技术框架不同，根据开发环境可以将主流的WebGIS开源解决方案

21、分成两派，一派是C/C+,另一派是Java。常用的WebGlS全套解决方案如下。（1）基于C/C+的解决方案：M叩SerVer（服务器）+QGIS（桌面软件）+Tomcat（中间件）+PostGISZMySQL（空间数据库）+OpenLayers（JS）OpenScales（Flex）（浏览器客户XLLl/0（2）基于JaVa的解决方案：GeOSerVer（服务器）+uDig（桌面软件）+Tomcat（中间件）+PostGISZMySQL（空间数据库）+OpenLayers（JS）OpenScales（Flex）（浏览器客户端）。采用开源WebGlS平台进行二次开发，一般需要从客户端、服务器端

22、、数据层三个方面进行设计和实现。(1)客户端：可以选择使用OPenLayers、OPenSCaleS等开源框架，也可以结合互联网方向的在线地图APl(即百度地图APl等)。(2)服务器端：使用最具代表性的GeOSerVer或M叩SerVer作为地理信息服务器，基于服务器发布地图数据服务(如OGC的WMS、WFSsWCS等),Web应用程序则通过HTTP请求访问服务器发布的服务。若设计简单的大众化WebGlS应用，可以不使用服务器端开源GlS平台，直接访问第三方提供的数据服务，或者直接使用存储在关系数据库中的Pc)I数据。(3)数据层：数据源可使用公共在线地图服务(如百度地图、天地图、GoogI

23、e地图等，一般将其作为底图)，或者GIS服务器发布的地图服务数据，以及开放格式的文件数据等。针对空间数据的存储，一般可选择开源的空间数据库，如使用P。StgreSQL作为关系数据库，用其扩展模块POStGlS存储空间数据。尽管这些开源GlS项目为开发者提供了很多二次开发资源，给广大GISer带来了便利，但只能满足一部分WebGIS开发需求，更多地面向大众应用。目前，GlS开源项目的不足主要表现在：对底图处理能力不足，对空间数据的管理能力不足，空间分析能力较弱，无法实现一体化的系统构建与应用等。针对开源GlS项目的不足，往往需要借助专业的WebGlS开发平台，以满足更多的应用需求。第2章WebG

24、IS开发基础2.1 Web开发基础理论2.1.1 B/S体系架构Web软件开发通常使用B/S（BrowserZServer,浏览器/服务器）架构，这是Web兴起后的一种网络结构模式，是目前网络软件开发的主流趋势。B/S模式采用开放式的客户/服务器结构，其基本结构一般包括Web服务器、Web页面、Web浏览器和HTTP通信协议等部分，如图2.1所示。HTTP是基于客户/服务器模型的信息传输方式，原意为“请求/响应模型”，即网页文件存放在Web服务器上，客户端以Web浏览器为媒介，通过程序向Web服务器发出请求并访问相应的网页。基于B/S模式的Web应用，一般都是将Web应用程序安装部署在服务器端

25、，客户端直接通过网页浏览器访问Web应用，如网络上常见的门户网站、论坛、商城等。1.向WCb服务器发送WCb请求图2.1Web基本结构Web应用的经典多层架构为表现层、业务逻辑层、数据访问层、数据源。对应于Web的多层结构，从物理角度划分，依次为数据服务器、Web服务器、客户端（浏览器）三个核心构件，如图2.2所示，其中，Web应用程序主要分为Web客户端与Web服务器端，即通常说的Web前台与Web后台。Web客户端通常指表现层，Web服务器端包括业务逻辑层与数据访问层，目前使用WebSerViCe（Web服务）封装系统业务逻辑功能与数据操作功能已成为主流趋势。整个Web系统开发完成后，将编

26、译后的Web应用程序部署在Web服务器，数据库则部署在数据服务器，用户通过客户端的网页浏览器进行访问。客户端WCb服务器数据服务器图2.2Web系统逻辑结构(1)表现层(UI):使用者与整个系统的交互场所。通俗讲就是展现给用户的界面，即用户在使用一个系统的时候他的所见即所得。(2)业务逻辑层(BLL)：与系统所对应的业务(领域)逻辑有关，关注于业务规则的制定、业务流程的实现等。业务逻辑层扮演两个不同的角色，对于数据访问层而言是调用者；对于表示层而言，是被调用者。业务逻辑层可以使用WebSerViCe的模式实现。(3)数据访问层(DAL):该层直接操作数据库，主要负责数据库的访问，实现对数据表的

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

28、与Web后台开发这两种不同类别的技术。在Web发展过程中，用户需求和技术进步是推动架构进步的原动力。一个Web应用系统在系统架构设计中，要切实满足当前用户需求，同时也要考虑灵活性，因此，Web系统架构的扩展性非常关键。如果每次需求变化都要对系统架构做出重大改动，那么这无疑是一个失败的系统设计。2.1.2客户端技术Web前端开发技术包括网页开发技术、客户端交互实现技术等内容。Web前端开发技术的三要素为HTML、CSS和JaVaSCriPt,但随着RIA(富客户端)的流行与普及，Flash(Flex)sSilVerlight等也非常受欢迎。随着技术的发展，Web前端开发技术的三要素已经演变为现今

29、的HTML5、CSS3jQueryo1. HTMLHTML(HypertextMarkupLanguage)即超文本标记语言，是用于描述网页文档的一种标记语言。它通过在用户文档中加入特定的控制字符或命令，使文档能够按照用户期望的格式输出。HTML语言主要用于客户端的页面设计。HTML作为Imemet上通行无阻的语言，简单易用且功能强大，支持不同数据格式的文件嵌入，具有简易性、可扩展性、平台无关性等特点。HTML文档是使用HTML语言编写的文本文件，扩展名为.htm或.html,用于定义Web页面的内容与显示格式。HTML文档包含文档内容与HTML标记(Tag)两部分，HTML标记基本上是成对出

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

31、联样式表，通常又称为“风格样式表(StyleSheet)”，我们用它来进行网页的风格设计，即显示HTML或XML等文件的样式。比如，如果想让超链接的文字未点击时是蓝色的，当鼠标移上去后文字变成红色的且有下画线，这就是一种风格。通过设置级联样式表，可以统一地控制HTML中各标签的显示样式，能够更有效地控制网页外观。CSS具有精确指定网页元素位置、外观以及创建特殊效果的能力。有三种方法可以在网页上使用样式表：外部样式、内页样式、行内样式。如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。在设计Web界面时，通常采用CSS+DIV的页面布局方式。与传统的T

32、able布局方式相比，CSS+DIV方式具有代码精简、易重构、网页访问速度快、浏览器兼容性好、搜索引擎优化等特点。CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体、字号，拥有对网页对象精确访问的能力，并能够进行初步交互设计，是目前基于文本展示的最优秀的表现设计语言。HTML5也兼容CSS3,使得其应用更加广泛。3. JavaScriptJaVaSCriPt语言的前身为LiVeSCript。NetSCaPe与SUn合作之后，引进了JaVa的程序设计思想，将其改

33、名为JaVaSCriPI。之所以取名为JaVaScript,原因在于JaVaSeTiPt是一种嵌入HTML文档的、基于对象的语言，语法同JaVa语言很相似，而且JaVaSCriPt的设计使它很容易同JaVa语言一同工作，还可以充分支持JaVa的APPIet小应用程序。目前，几乎所有浏览器都支持JaVaSCriPt语言。JaVaSCriPt是一种通用的、基于原型的、面向对象的语言，属于解释型语言，它的设计目标是在不占用很多系统和网络资源的情况下提供一种可以嵌入不同应用程序的通用代码。它不需要依赖于特定的机器和操作系统，独立于操作平台。JaVaSCriPt语言主要用于创建具有动态性、交互性的Web

34、页面，有如下几个特点。(1)简单性：JaVaSCriPt语句可以直接嵌入到HTML文档中，其语句的解析执行由Web浏览器负责，不需要额外的开发环境。(2)基于对象：JaVaSCriPt采用面向对象的编程方法，通过设置属性和调用方法来实现所需要的功能。(3)事件驱动：JaVaSCriPt采用事件驱动方式，可以对用户的鼠标单击、移动窗口、菜单选择等事件产生响应。(4)平台无关性：JaVaSCriPt语言的运行依赖于Web浏览器，与操作系统环境无关。只要客户机能运行支持JaVaSCriPt的Web浏览器，就可以运行嵌入了JaVaSCriPt的Web页面。(5)安全性：JaVaSCriPt语言是通过W

35、eb浏览器处理的，不能修改其文件内容。因此，当Web浏览器浏览嵌入了JaVaSCriPt的Web页面时，用户无须担心JaVaSCriPt会被删除或修改。同时，没有服务器端程序的协同，JaVaSeriPt不能在服务器上打开文件或存储信息。JaVaSCriPt功能强大，且非常灵活。如果了解了其特性与适用场合，便能运用自如。JaVaSCriPt主要适用于交互式用户界面设计、动态更新页面信息、数据校验、通过AjaX异步访问服务器提取数据等。鉴于JaVaSCript的优良特性，业界很多个人或组织投入研究与应用，涌现出大量优秀的JaVaSCriPt开源框架和插件，让Web开发事半功倍。基于这些开源框架和插

36、件，HTML+CSS+JavaScript的Web应用具有丰富的交互体验效果，可以与FlexsSilVerlight等富客户端应用媲美，获得更多Web开发人员的青睐。因此，HTML5+CSS3+JavaScript已成为目前Web前端开发使用最为广泛的主流方式，本教程也基于此开发方式展开介绍。4. FlexFleX通常指AdobeFlex,基于其专有的MaCromediaFIaSh平台，它涵盖了支持RIA(RichInternetApplications)的开妥和部善的一系列技术。FleX彳乍为RlA开发的主流方式之一，应用较广。FleX是基于组件的开源开发框架，它使用MXML与ACtkmSC

37、riPt语言构建富客户端应用系统。其应用系统编译后生成FlaSh文件，通过FlaShPIayer插件运行，兼容性非常好。FleX继承了FlaSh在表现层得天独厚的优势，其丰富的交互性和视觉效果吸引了越来越多的Web开发者。5. SilverlightSiIVerIight是一种融合了微软的多种技术的Web呈现技术，也是RIA开发的主流方式之一。SiIVerIight提供了一套开发框架，为开发设计人员提供了一个统一的开发应用模型，基于XAML进行交互，使具有不同背景知识的开发设计人员能够更好的协作，高效地创造出能在WindoWS和MaCintoSh上运行的内容丰富、界面绚丽的Web应用程序。6.

38、 其他相关技术另外，基于HTML+CSS+JavaScript的Web客户端开发，通常会涉及XML、DOMxAJAX等相关技术。(1) XML(ExtensibleMarkupLanguage),可扩展标记语言，用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。XML是标准通用标记语言(SGML)的子集，非常适合Web传输。XML提供统一的方法来描述和交换结构化数据，它与HTML的设计区别是：XML的核心是数据，其重点是数据的内容；而HTML被设计用来显示数据，其重点是数据的显示。XML的简单使其易于在任何应用程序中读写数

39、据，这使XML很快成为数据交换的一种公共语言。(2) DOM(DocumentObjectModel)1即文档对象模型，是表示文档(如HTML和XML)和访问、操作构成文档的各种元素的应用程序接口(API)。DoM是JaVaSCriPt与页面交互的一种方式，它能够动态修改文档中的节点、元素、属性等。支持JaVaSCriPt的所有浏览器一般都支持DoM。在DoM下，HTML文档中的各个节点被视为各种类型的NOde对象，每个Node对象都有自己的属性和方法，利用这些属性和方法可以遍历整个文档树。(3) AjaX是ASynChrOnOUSJaVaSCriPtandXML的缩写。AjaX并不是一门新的

40、语言或技术，它实际上是几种技术按一定的方式组合在一起，在共同协作中发挥各自的作用。AjaX的一个最大的特点是无须刷新页面便可向服务器传输或读写数据(又称为无刷新更新页面)，这一特点主要得益于XMLHTTP组件XMLHttPReqUeSt对象，它是一种支持异步请求的技术。只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数据处理的工作提交给服务器来做，这样既减轻了服务器的负担又加快了响应速度、缩短了用户等待时间。7.开源框架与插件随着JaVaSCriPt和相关技术在Web开发中的广泛应用，出现了很多JaVaSCriPt开源框架，即JaVaSeriPt库。其中，jQuery是目前最流

41、行的JaVaSCriPt库。jQuery是一个轻量级的js库，兼容CSS3与各种浏览器，它简化了HTML与JaVaSCriPt之间的操作，使用户能更方便地处理HTMLdocumentsseventsx实现动画效果，并且尚以很方便地为网站提供AjaX交互。除了jQuery之外，还有大量优秀的JaVaSCriPt框架和插件，0PrototypesEXtJS、MooTooIssDojo、YUI等。(1) Prototype：是一个致力于简化动态Web应用程序开发、独特的、易用的工具库和最好的AjaX库。(2) ExtJS：是一个用于创建前端用户界面，与后台技术无关的前端AjaX框架，主要用来开发Rl

42、A富客户端AjaX应用，具有强大的UL而且性能不错。(3) MooTooIs：是一个模块化的、面向对象的JaVaSCriPt框架，适合中高级JaVaSCriPt开发人员。(4) Dojo：其强大的核心使Web开发更加敏捷，它拥有出色的Ul工具库，号称UnbeatableJavaScriptTools,适合企业应用和产品开发，背后有IBM、SunsBEA等厂商的强大支持。(5) YUI：是YahOO公司推出的开源JaVaSCriPI框架，用于快速开发交互性强、更加稳健的Web应用。在实际应用中选用这些框架与插件，可以大幅提高开发效率、强化Web应用，使Web前端开发人员更加得心应手。由于有了We

43、bKit和HTML5的支持，很多Web开发厂商开始转向基于移动设备的Web应用框架，推出了一些移动应用的JaVaScTiPt框架：如Yahc)OYUI3.2的ToUCh版、jQuery的JQueryMobilesEXtJS整合JQTOUCh,以及RaPhael推出的SenChaTOUCh框架等02.1.3服务端技术Web服务端开发技术，一直以来主要分为两大不同派系：.NET与Java。.NET为微软提供的框架，可以使用ASP.NET进行动态网页开发，后台使用C#语言实现；基于JaVa技术进行Web应用开发，则主要用J2EE平台体系，使用JSP进行动态网页开发，后台使用JaVa语言实现。除此之外

44、，还有CGI、PHPsPythOn等技术。随着WebSerViCe的兴起，越来越多的人喜欢用WebSerViCe技术，基于面向服务的模式构建Web应用，解决系统集成、异构平台协作、资源共享等问题。WebSerViCe这项技术只有通过日益广泛的应用才能体现出其价值，比较流行的方法是使用NET和JaVa两种技术，并且两种实现方法可以进行互操作。1. .NET基于.NET的Web开发是指使用微软的.NET框架进行开发。.NET框架(.NETFramework)是一个致力于敏捷软件开发、快速应用开发、平台无关性和网络透明化的软件开发平台，它包含很多有助于互联网和内部网应用迅捷开发的技术。.NET框架是

45、一个多语言组件开发和执行环境，它提供了一个跨语言的统一编程环境。.NET框架的目的是便于开发人员更容易地建立Web应用程序和Web服务，使得Internet上的各应用程序之间，可以使用Web服务进行沟通。从层次结构来看，.NET框架又包括三个主要组成部分：公共语言运行时(CLR)s服务框架(SerViCeSFramework),以及上层的两类应用模板传统的WindOWS应用程序模板(WinFOrmS)和基于ASPNET的面向Web的网络应用程序模板(WebFormS和WebSerViCeS),如图2.3所示。.NET开发框架在通用语言运行时的基础上，给开发者提供了完善的基础类库、高效的数据库访

46、问技术ADO.NET、网络开发技术ASP.NET等，开发者可以使用多种语言及VisualStUdiO.NET来快速构建网络应用。基于.NET的Web开发，我们可以使用成熟且规范的.NET开发框架，遵循.NET技术标准，以便快速开发各种Web应用系统。目前，基于.NET开发框架的Web应用，Web服务器端通常采用C#语言实现系统业务逻辑，或者使用C#语言编写实现系统功能的Web服务；客户端则使用ASP.NET中的相关控件，并结合HTML、CSSsJaVaSCriPt等进行开发。2. Java基于JaVa的Web开发，即使用JaVa技术开发Web应用程序。JaVa是一种可以编写跨平台应用软件的面向

47、对象的程序设计语言，是由SUn公司推出的JaVa程序设计语言和JaVa平台的总称。JaVa技术具有卓越的通用性、高效性、平台移植性和安全性，被广泛应用于各个领域。在全球云计算和移动互联网的产业环境下，JaVa具有更显著的优势和广阔的应用前景。AS网络服务P.NET网络表单Windows 应用ADONETVisua - scdNETHF7IIC#IIJSCriPt通用语言规范基础类库通用语言运行时图2.3.NET框架图JaVa编程语言的风格十分接近C、C+语言，它继承了C+语言面向对象技术的核心，是纯面向对象的程序设计语言。JaVa不同于一般编译执行或解释执行的计算机语言，它首先将源代码编译成二

48、进制字节码，然后依赖于各种不同平台上的虚拟机来解释执行字节码，从而实现了“一次编译、到处运行”的跨平台特性。JaVa平台由JaVa虚拟机和JaVa应用编程接口（API）构成。在硬件或操作系统中安装一个JaVa平台之后，即可运行JaVa应用程序。JaVa平台主要分为三个体系，即J2SE（Java2PlatformStandardEdition,JaVa平台标准版）、J2ME（Java2PlatformMicroEdition,Java平台微型版）、J2EE（Java2PlatformEnterpriseEdition,JaVa平台企业版）。J2EE可以帮助开发和部署可移植、健壮、可伸缩且安全的服务器端JaVa应用程序。J2EE提供Web服务、组件模型、管理和通信API,通常用来实现企业级的面向服