（计算机应用技术专业论文）基于ajax技术的环保监控系统.pdf

摘要 随着w e b 技术的不断发展，使得a j a x 成为w e b 技术领域的研究热点。a j a x 技 术引进了异步调用，使页面可按需局部刷新，节省了网络带宽，提升了用户体验。 对比a p p le t ，f l a s h 等传统的w e b 技术，a j a x 不需要专门的软件支持即可通过 x m i 。h t t p r e q u e s t 对象发送异步请求，可以直接在大多数流行浏览器中使用。 环保监控系统是在a s p n e t 的平台上实现了a j a x 技术。系统使用a j a x n e t 框 架实现a j a x 。a j a x n e t 封装了x m l h t t p r e q u e s t 请求服务器的实现细节，实现了一 种基于代理的方式来调用服务器端函数，能把j a v a s c r i p t 中的调用传递到a s p n e t 方法，并返回到j a v a s c r i p t 客户端。 本文的主要工作包括以下几方面： 第：围绕a j a x 局部刷新技术，研究了基于a j a x 技术的w e b 应用的当前进展， 总结了a j a x 技术发展的现状。 第二：研究了a j a x 技术与传统w e b 技术的区别。探讨了a j a x 是如何完成异 步调，总结分析了a j a x 工作的原理。 第三：研究了a j a x 各种相关技术，深刻剖析a j a x 核心技术，并对几种类似 a j a x 技术w e b 终端技术进行了比较。 第四：研究了a j a x 技术的工具箱及实现框架，比较和分析了各种工具和框架 的优缺点，总结和概括了a j a x 应用的利弊。 第五：a j a x 实现技术研究。结合实际应用需求，在环保监控系统中选择a ia ) 【n e t 框架来实现a j a x 技术，详细介绍了a j a x 在系统中具体实现过程。 关键词：a j a x 、局部刷新、异步调用、a ja ) ( n e t 、x m l h t t p r e q u e s t 、j a v a s c r i p t a b s t r a c t c u r r e n t l y ，a st h er a p i dd e v e l e p o m e mo faw e b ，m o r ea n dm o r ep e o p l ep a yg r e a t a t t e n t i o nt oaw e bt e c h n o l o g ya j a x a j a xi n t r o d u c e da s y n c l l r o n o u st r a j l s f e rt e c h n 0 1 0 9 y t op r o m o t e1 0 c a l r e n e w a b l ep a g e s ，柏c hs a v e dt h ew e bb a n d w i d t ha i l de n h a i l c e du s e r e s e x p e r i e n c e c o m p a r et ot h et r a d i t i o n a lw e bt e c h n 0 1 0 9 yl i k ea p p l e t ，n a s h ，a j a xd o e s n t n e e ds p e c i a l i z e ds o f t w a r et ob eu s e di nm o s tp o p u l a rb r o w s e r s ，b e c a u s ea j a xu s e x m l h t t p r e q u e s tt os e n dt h ea s y n c h r o n o u sr e q u e s t ，a n dx m l h t t p r e q u e s ti ss u r p o r tb y m o s tp o p u l a rb r o w s e r s t h ee n v i r o 啪e n t a lm o n i t o rs y s t e mu s ea j a xb a s eo nt h ea s p n e tp l a t f o 啪w e u s ea 叩e n s o u r c ef r a m e w o r k a j a x n e tt o r e a l i z ct h ea j a xt e c h n o l o g y a j a x n e t i n c l u d e sx m l h t t p r e q u e s tw h i c hr e a l i z c saw a y st ou s et h ef b l l f l c t i o n so rm e t h o r d so f s e “e r s a j a x n e te n a b l ej a v a s c r i p tc o d ed i r e c t l ya c c e s sa s p n e tf o u n c t i o n so rm e t h o d s ， a i l dr e s p o n s eb a c kt ot h ej a v a s c r i p tc l i e n t 1 1 1 i sp a p e rf o c u s e so nt h ef o l l o w i n ga s p e c t s ： 1 、f o c u s e do na j a x sp a r t i a lr e g e n e r a t i o n ，t h i sp a p e rs t u d i e st h ec u h e n tp r o 瞽e s so f w e bt e c h n o l o g yw l l i c hi sb a s e da j a x ，a n ds u m m a r i z e sc u r r e n ts i t u a t i o no fa j a x d e v e l o p m e n t 2 、t h ep 印e rs t u d i e st h ed i 虢r e n c eb e t w e e nt r a d i t i o n a lw e ba n da j a xw e b ，a n d a n a l y z e st l l ea s y n c h r o n o u st r a t l s f e ro fa j a x ，t h e ns u m m a r i z e st h et l l e o r yo fa j a x s w o r k 3 、t h ep a p e rs t u d i e st e c h n o l o g y 曲o u ta j a x ，e s p e c i a l l ye m p h a s i z i n go nm em i a n t e c h n o l o g yo f a j a x ，a 1 1 ds h o wt h ed i 玎e f e n c eo fs o m ea s s e m b l ea j a xt e c h n o l o g y 4 、t h ep a p e rs t u d i e st l l et o o l sa f l dt h ef h m eo fa j a x ，a 1 1 ds w n m a r i z e sm e r i ta 1 1 d d e f e c to f a j a x 5 、t h er e s c a r c ho fr e a l i z a t i o nt e c h n o l o g yo fa j a xb a s eo nt h ef 锄eo f a j a ) 【n e t s h o wt h ed c t a j ld e s i g no f t h es y s t e mb a s eo na j a x k e yw o r d s ：a j a x 、p a 州a j ”g e n e r a t i o n 、a s y n c l l r o n o u st r a n s f e r 、 a j a ) ( n e t 、 x m l m p r e q u e s t 、 j a v a s c r i p t 浙江大学硕 学位论文基于a j a x 技术的环保监控系统 1 1a j a x 的研究背景 第一章前言 随着各种网络技术的迅速发展，i n t e m e t 经历了翻天覆地的重大变革，它已经成为 商业贸易和信息的中心。到了今天，w e b 已经成为大量应用的首选平台。由于w e b 系统 非常容易部署，人们对w 曲系统的依赖程度越来越高，但它们并不能像桌面应用那样 提供丰富的客户端功能。 w 曲应用给人的用户体验不是太好。因为传统的w e b 应用架构是一个同步的请求 响应系统，由用户触发个h t t p 请求到服务器，服务器对其进行处理后再返回一个新的 h t h l 页到客户端，每当服务器处理客户端提交的请求时，客户都只能空闲等待，并且哪怕 只是次很小的交互、只需从服务器端得到很简单的一个数据，都要返回个完整的 h t m l 页，而用户每次都要浪费时间和带宽去重新读取整个页面。使得w e b 的效率是很 低的，浪费了大量的通信带宽。而事实上，重薪加载所有这些项目可能完全没有必要， 也许只需要从数据库中调出很小的一段文本就能解决问题。 a j a x 利用异步调用方式可以对页面进行局部刷新。可以创建很丰富的基于浏览器 的应用，它能提供高度交互的w e b 应用。用户感觉几乎所有的操作都会很快响应没有页 面重载的等待。利用a j a x 技术开发人员可以通过异步方式向服务器请求一个区块的信 息，而无需重新加载整个页面。这样就使w 曲应用能够更快地对用户的互动行为做出 反应。也就是说a j a x 技术实现了页面的局部刷新。由于a j a x 采用的各种技术基于现 有的浏览器，而无需特殊的插件，所以兼容性最好。 a j a x 使得w c b 应用丌发人员可以自由地与服务器异步交互，这样使得许多原本只 能在胖客户( 内容丰富，功能强大的w e b 应用) 上完成的任务。例如，用户输入一个邮 政编码时，可以验证这个邮政编码是否正确，而不用刷新整个页面，然后用相应的城市 填写表单中的其他部分；或者，用户选择一个省时，可以用该省的各个城市来填写一个 下拉列表。以前也可以用其他方式模拟这些工作，但是使用a j a x 的话，这些工作会更 加简单。 浙江大学硕上学位论文 基于a j a x 技术的环保监控系统 1 2a j a x 的发展现状 a j a x 技术有两个推动力，w 曲标准的成熟和软件交互设计和可用性理论的成熟。 在软件的可用性方面，除了一些通用的软件可用性和交互设计理论之外( 这方面的经典 著作包括面向使用的软件设计、a b o u tf a c e2 0 中文版等等) ，w e b 应用的可用性 ( w 曲u s a b i l i t v ) 也是国外非常热l 、j 的一个研究领域，主要侧重于研究如何提高w e b 应 用的可用性。美国在这个领域有着非常深入的研究，并且对于一些公共机构网站的可用 性还有相关的法律条款来约束( s e c t i o n 5 0 8 ，5 0 8 条款，于2 0 0 1 年6 月2 l 目成为美国的 法律，直接影响了联邦部门和些代理机构，还有为他们服务的网页设计师。这条法律 也适用于政府投资项目和任何采用了该法律的州) 。对于这些网站，如果无法达到条款 上的一些可用性要求，网站经营者就违法了。如果是开发公司无法达到这些要求，就别 指望从联邦政府手中拿到这些项目。 为了对如何提高w e b 应用的可用性做出指导，w 3 c 在2 0 世纪9 0 年代建立了w e b a c c e s s i b i l i t yi n i t j a t i v e ( w a i ) ，致力于为网站建造者提供实现可访问性( 与可用性同义) 的方法和策略( 啦；丛坠盟型3 ：q 型她丛q l ) w e b 可用性方面的经典著作包括网站重 构。 综上所述，可以认为a j a x 就是w 曲标准和w e b 应用的可用性理论的集大成者。 它极大地改善了、b 应用的可用性和用户的交互体验，最终得到了用户和市场的广泛 任何。所以可以说，a j a x 就是用户和市场的选择。 r n 1 在汹涌的w e b 2 0 。大潮中，a j a x 已经成为人们谈论最多的技术术语。甚至已经 r 1 成为了w 曲应用的主流丌发技术，甚至在使一些一度被认为是不可能的项目“复活”1 ： 在线版的0 衔c e 。以g o 0 9 1 em a p s 为代表的一些w e b 服务的推出使得a j a x 技术名扬天 下。目前，有数十家初创厂商在利用它开发包括从字处理软件到项目管理软件在内的桌 面软件的在线版本。但是，它们并非简单地在互联网上复制0 伍c e ，有时被称为w 曲2 ，o 的许多这些w e b 应用软件的重点是通过网络发布和共享信息。大量的业界巨头已经采 纳并且在大力推动这个技术的发展。最近的动态包括： 1 i b m 、0 r a c l e 、y 曲0 01 、b e a 、r e d h a t 、n o v e l l 等页界领先的公司启动了0 d e n a j a x 项目。致力于为a j a x 开发建造先进强大的的开发工具。i b m 在2 月底已经发布了 沥江人学硕十学位论文 幕于a j a x 技术的环保蒲控系统 o p e n a j a x 项目的a j a xt 0 0 l k j t f r a m e w o r k ( a t f ) 1 0 ，是一个基于e c l i p s e i d e 的 a j a x 开发工具。 2 微软开发了自己的a j a x 框架a l t a s ，不过主要是和服务器端他们自己的a s p n e t 框架配合工作。 3 s l l i l 虽然行动迟缓，但是也将a j a x 技术列入了j 2 e e 的b l u e p r i m ( 蓝图) 中，作 为j 2 e e 技术的有益的补充。 除了上述这些公司之外，g o o g l e 公司不可不提，因为正是他们率先采用a j a x 技 术建造出了一大堆非常出色的应用，才将a j a x 技术引到了聚光灯下。g o o 四e 公司建 造的a j a x 应用包括g o o g 】em a p s 、g m a i l 、g o 0 9 1 es u g g e s t 等等，其中公认最优秀最复 杂的a j a x 应用是g o o g l em a p s 。由于完全基于a j a x 技术来建造g o 0 9 1 em 印s 的界面， g o 0 9 1 em a p s 提供了远远超越其竞争对手的地图服务的交互体验。如果说g o o g l e 后台 的地图技术并不存在巨大优势的话，那么a j a x 技术和优秀的交互设计成为了他们压 倒竞争对手的最后一根稻草。最终使得g o o g l em a p s 脱颖而出，获得了用户的青睐。 我们可以对比一下微软前后的两个地图服务就可以看出差别。 微软公司所提供的旧的地图服务：蛳；丛卫登型些堡i 垃s q 丛：q 型。是传统w 曲应 用的代表，性能很差而且极其难用。 微软公司所推出了新的地图服务：丛乜；丛q 趔：! i ! ：q 世。新的地图服务包括这个网 站上的很多其他服务完全基于a j a x 技术来建造，获得了极好的可用性。这个地图可 以看作是在g o o g l e 推出了g o o g l em a p s 服务之后，微软公司痛定思痛的产物，在很多 地方模仿了g 0 0 9 l em 印s 。 a j a x 的典型应用除了g o 0 9 1 em 印s ，还有微软的w i n d o w sl i v e 、y 曲o o ! 的f 1 i c k r 等等。此外国内新浪的b l o g 也使用了一些a j a x 的技术。 1 3 本文的工作与创新 本文主要探讨了目前非常热门的w e b 技术a j a x ，包括a j a x 的由来，核心概念， 以及支援a j a x 技术的相关工具和应用的框架等，同时结合一个实际的项目“聊城环保 浙江大学倾 学位论艾 草于a 】a x 技术的环保监控系统 监控系统”，讨论了在系统中如何结合a s p n e t 平台来实现a j a x 技术。 随着w 曲技术的不断发展，a j a x 在其中扮演了重要的角色。g o 0 9 1 e 的很多项目如 g o o g l es u g g e s t ，g m a i l ，g o o g l e m a p ，还有a m a z e ，、铀o o 等互联网公司应用了很多的a j a x 技 术。传统的w 曲应用给人的用户体验不是太好，a j a x 技术可以解决很多传统w e b 应 用遗留的很多问题，比如可输可选的下拉框，数据联动，页面长时间等待等问题一直没有 优雅的解决方案。 在这个项目中，我们创新性地在系统中引入了当今很流行的a j a x 技术很好地解决 了这些问题，提升了用户体验。 针对项目的具体需求，技术平台是a sp n e t ，所以我们采用了丌源的a j a x 开发框 架a ja ) 【n e t ，实现了反应灵敏的g o 0 9 1 es u g g e s t 似的下拉框，数据联动及无刷新自动更 新实时数据等技术。论文中深入探讨了a j a ) 【n e t 的配置，使用以及具体实现流程。对其 他欲采用a j a x 技术的a sp n e t 项目具有很好的借鉴意义。 论文主要在讨论了a j a x 相关技术，以及a j a x 在环保监控系统如何实现的进行了 研究。 主要探讨了以下问题： ( 1 ) 研究了a j a x 技术特点和应用领域，研究了基于a j a x 技术的w e b 应用的当 前进展，总结了a j a x 技术发展的现状。 ( 2 ) 研究了a j a x 技术与传统w e b 技术的区别，探讨了a j a x 是如何完成异步调， 总结分析了a j a x 工作的原理。 ( 3 ) 研究了a j a x 各种相关技术，深刻剖析a j a x 核心技术，并对几种类似a j a x 技术w e b 终端技术进行了比较。 ( 4 ) 研究了a j a x 技术的工具箱及实现框架，比较和分析了各种工具和框架的优 缺点，总结和概括了a j a x 应用的利弊。 ( 5 ) a j a x 实现技术研究。结合实际应用需求，在环保监控系统中选择a ia ) n e t 框架来实现a j a x 技术，介绍了a j a ) 【n e t 框架的使用配置，详细分析了a j a x 在系统中 的数据联动、a u t o c o m p l e t e 自动完成下拉框、无刷新的实时数据更新等技术的实现。 1 4 本论文的组织和结构 论文从理论上构筑了较为完善的、基于a j a x 技术的w e b 构架，并根据理论研究 浙汀人学碗上学位论文 罐丁a j a x 技术的环保监拄系统 结合应用实际，使用a j a x n e t 框架在环保监控系统中实现了a j a x 技术应用，从而验证 田论的可行性，推动a j a x 技术在商业应用中的发展。 论文主要由六个部分组成： 第一章 第二章 第三章 第四章 第五章 第六章 前言。主要对课题研究背景、国内外研究发展的现状、课题主要工作与 创新等进行了综述。 a j a x 技术概述。主要介绍了a j a x 定义、概念，a j a x 工作的原理以 及a j a x 与传统w e b 模式的区别。探讨了使用a j a x 的理由，并从一 个简单的实例来认识a j a x 技术。 a j a x 的核心技术。主要介绍a j a x 核心技术，通过一个实例来说明 a j a x 是如何实现异步调用的。最后介绍了a j a x 工具箱及丌发架构， 总结和概括了a j a x 应用的利弊。 a j a x 技术典型案例分析。主要对两个经典案例进行详细分析，使初学 者迅速掌握a j a x 技术起到了事半功倍的作用。该部分内容对于设计和 实现实时监控系统有十分重要的意义。 a j a x 技术在实时环保监控系统中的设计与实现。这部分是本文的另一 个重点，它是a j a x 技术的应用部分。对系统中的经典案例数据联动、 a u t o c o m p l e t e 自动完成下拉框、无刷新的实时数据更新进行了详细的分 析说明。 a j a x 技术总结与展望。就本系统对a j a x 技术进行了经验总结，指出 技术的发展趋势和下一步工作的重点，展望a j a x 技术在监控系统中发 展的前景。 浙江大学硕上学位论文 基于a j a x 技术的环保监控系统 2 1a j a x 的定义 第二章a 黝技术概述 a j a x 全称为“a s ”c l l r o n o u sj a v a s c r i p t 卸dx m l ( 异步j a v a s c r i p t 和x m l ) ，是指 一种创建交互式网页应用的网页丌发技术。a j a x 这个名词的首次出现是在2 0 0 5 年2 月1 8 日美国一位叫做杰西詹姆斯- 加勒特( j e s s ej a m e sg a r r e t t ) 发表的一篇题为a j a x 一个w o b 应用的新途径的论文中。文章认为a j a x 不是一种技术。实际上，它由几种 蓬勃发展的技术以新的强大方式组合而成。a j a x 包含： 4 使用x h t m l 和c s s 标准化呈现； 4 使用d o m ( d o c u m e n t0 b j e c tm o d e l ) 进行动态显示和交互； 溶使用x m l 和x s l t 进行数据交换与处理； 4 使用x m l h t t p r e q u e s t 与服务器进行异步通信； 溶使用j a v a s c r i p t 绑定和处理所有数据。 a j a x 技术是目前在浏览器中通过j a v a s c r i p t 脚本可以使用的所有技术的集合。 r e l a j a x 并没有创造出某种具体的新技术，它所使用的所有技术都是在很多年前就已经 存在了，然而a j a x 以一种崭新的方式来使用所有的这些技术，使得古老的b s 方式的 w 曲开发焕发了新的活力。 具体来说，a j a x 基于以下的技术： x h t m l ：对应w 3 c 的x h 州l 规范，目前是x h t m l l 0 。 c s s ：对应w 3 c 的c s s 规范，目前是c s s 2 o 为了正确的浏览a j a x 应用，c s s 是一种a j a x 开发人员所需要的重要武器。c s s 提供了从内容中分离应用样式和设计的 机制。虽然c s s 在a j a x 应用中扮演至关重要的角色，但它也是构建创建跨浏览器应 用的一大阻碍，因为不同的浏览器厂商支持各种不同的c s s 级别。 d o m ：这里的d o m 主要是指h t m ld o m ，x m ld o m 包括在下面将要介绍的 x m l 中。 j a v a s c r i p t ：对应于e c m a 的e c m a s c r i p t 规范。如名字所示a j a x 的概念中最重要 而最容易被忽视的是一种j a v a s c r i p t 编程语言。j a v a s c r i p t 是一种粘合剂使a j a x 应 6 浙江大学硕十学位论文基十a j a x 技术的环保监控系统 用的各部分集成在一起。在人部分时间，j a v a s c r i p t 通常被服务端丌发人员认为是一种 企业级应用不需要使用的东西应该尽力避免。这种观点来来自以前编写j a v a s c r i p t 代 码的经历：繁杂而又易出错的语言。类似的，他也被认为将应用逻辑任意地散布在服务 端和客户端中，这使得问题很难被发现而且代码很难重用。在a j a x 中j a v a s c r i p t 主 要被用来传递用户界面上的数据到服务端并返回结果。) ( m l h t t p r e q u e s t 对象用来响应通 过h t t p 传递的数据，一旦数据返回到客户端就可以立刻使用d o m 将数据放到网面上。 x m l ：对应w 3 c 的x m ld 、x s l t 、x p a t h 等等规范。 x ml i l t t p r e q u e s t ：对应w h a l w g 的w e ba p p l i c a t i o n s l o 规范的一部分。 x m l j h t t p r e q u e s t 对象在大部分浏览器上已经实现而且拥有一个简单的接口允许数据从 客户端传递到服务端，但并不会打断用户当前的操作。使用x m l h t t p r e q u e s t 传送的数 据可以是任何格式，虽然从名字上建议是x m l 格式的数据。 开发人员应该已经熟悉了许多其他x m l 相关的技术。x p a t h 可以访问x m l 文档中的 数据，但理解x m ld o m 是必须的。类似的，x s l t 是最简单而快速的从) ( m l 数据生成h t m l 或) ( m l 的方式。许多丌发人员已经熟悉x p a t h 和x s l t ，因此a j a x 选择x m l 作为数据 交换格式有意义的。x s i ，t 可以被用在客户端和服务端，他能够减少大量的用j a v a s c r i p t 编写的应用逻辑。 可以看出，除了x m l h t t p r e q u e s t 以外，所有的技术都是目前已经广泛使用，得到 了广泛理解的基于w 曲标准的技术。而x m l h t t p r e q u e s t 虽然尚未被w 3 c 采纳，其实 已经是一个事实上的标准。几乎所有主流的浏览器，例如i e 、f i r e n ) x 、n e t s c 印e 、o p e r a 、 s a f 撕全部都支持这个技术。所以a j a x 就是目前做w 曲丌发最符合标准的技术。上述 的所有技术都已经可以在浏览器巾使用，因此用户不需要安装任何额外的软件( 只需要 一个浏览器，例如1 e ) ，就可以运行任何符合标准的a j a x 应用。这对于a j a x 技术的 普及、降低部署维护的成本是非常重要的。 此外，随着浏览器的发展，更多的技术还会被添加进a j a x 的技术体系之中。例 如，目前f i r e f o x 浏览器的最新版本已经可以直接支持矢量图形格式s v g 。f i r e f o x 已经 可以支持j a v a s c r i p t2 o ( 对应e c m a s c r i p t4 o 规范) 中的e 4 x ( j a v a s c r i p t 的x m l 扩 展) 。f i r e f o x 、o p e r a 、和s a f a r i 浏览器还可以支持c a n v a s ( 也是w 曲a p p l i c a t i o n s l o 规 范的一部分) ，网络上已经有人开发出了使用c a i l v a s 技术制作的3 d 射击游戏的演示版。 浙江人学碗上学位论文 基于a j a x 技术的环保监控系统 但是因为这些技术目前还没有得到市场占有率最高的i e 浏览器的支持，因此目前只能 被应用于一些有限的场合( 例如，在企业机关内部，可以要求用户只使用f i r e f o x 浏览 器) 。 2 2 使用a j a x 的理由 由于w e b 非常容易部署，就算是再苛刻的客户，都会把w 曲作为首选的平台。但 r ：i 1 是传统的w e b 应用中都存在着这样的“一些问题： 为了在页面上刷新显示一个服务端的变量，必须重新加载 整个贞面，网页新提供的信息和用户等待的时间小成比例， 网络缓慢时用户难以忍受 由于程序对网页的几乎所有操作都需要重新发送整个页面 的数据，所以很浪费网络流量 提交表单后，用户点击刷新按钮，浏览器提示“无法刷新 此页除非重新发送数据? ” 提交表单后，用户却又点击了后退按钮，则浏览器当前的数据 很可能是过期的 针对上面提到的基于w e b 应用所存在的基本问题，我们需要更好的解决方案。客户 希望得到一个功能更完备的应用，而开发人员想避开繁琐的部署工作，不想把可执行文 件逐个地部署到数以千计的工作站上。我们已经做过很多尝试，但是任何种方法都不 像它原来标榜得那么完美。不过，最近又提出一个极其强大的工具a j a x 。它可以创 建确实很丰富的基于浏览器的应用。 使用a j a x 的主要原因有两个： l 、通过适当的a j a x 应用达到更好的用户体验； 2 、把以前的一些服务器负担的工作转嫁到客户端，利用客户端闲置的处理能力来处 理，减轻服务器和带宽的负担，从而达到节约1 s p 的空间及带宽租用成本的目的。 a j a x 在大多数现代浏览器中都能工作，而且不需要任何专门的软件或硬件。实际 l ，这种方法的一大优势就是，开发人员不需要学习一种新的语言，也不必完全丢掉他 们原先掌握的服务器端技术。a j a x 是一种客户端方法，可以与j 2 e e 、n e t 、p h p 、r u b y 浙t i 大学硕上学位论文幕于a j a x 技术的环保监控系统 和c ( ；i 脚本交匠，它并不关心服务器是什么。尽管存在一些很小的安全限制，但即使不 清楚这些安全限制，你也可以现在就丌始使用a j a x ，而且能充分利用你原有的知识。 使用了a j a x 技术，w e b 应用开发人员现在可以自由地与服务器异步交互，创建出 更加动念的w e b 应用。下面介绍一些典型的应用： 假设你有一个下拉列表，这个列表是根据另外一个域或下拉列表的输入来填写 的。f 常情况f ，必须在加载第一个页面时把所有数据都发送给客广，然后使 用j a v a s c r i p t 根据输入来填写下拉列表。这么做并不困难，但是会让你的页面 变得很臃肿，取决于你的下拉列表到底有多“动态”，页面很可能膨胀得过大， 这就有问题了。利用a j a x 的话，当作为触发源的域有变化，或者失去了输入焦 点，就可以向服务器做一个简单的请求，只要求得到更新下拉列表所需的部分 信息。 网页上实现可输可选的下拉列表。假设一个下拉列表中，当选项数目很多的时 候，要找到特定的项比较困难，而且只能选择而不能输入这样就给用户带来了 不便。利用a j a x 的自动完成的功能，即a u t o c o m p l e t e 就可以达到这神奇的效果。 用户可以快速定位到要选择的项中，或者直接输入要查找的项。提高了速率， 给用户带来了更好的体验。 当然上面说的两个效果用i f r a m e s 或隐藏框架也可以做到，甚至还使用这种技术来 提交或刷新页面的一部分，而不是整个浏览器( 页面) ；不能不承认，这确实可行。不 过，许多入认为这种方法只是一种修补手段，以弥补x h r 原来缺乏的跨浏览器支持。作 为a j a x 的核心，x h r 对象设计为允许从服务器异步地获取任意的数据。 基于以上的种种情况，使得a j a x 技术在很多领域得到到了广泛的运用。 2 3a j a x 的工作原理 a j a x 的工作原理相当于在用户和服务器之脚加了一个中间层，使用户操作与服务 器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等 都交给a j a x 引擎自己来做，只有确定需要从服务器读取新数据时才由a j a x 引擎代为 向服务器提交请求。下面我们通过a j a x 的w e b 模式与传统的w c b 模式进行比较，我 们就可以更好的理解其工作的原理。 r 1 传统的w e b 应用遵循一种请求响应模式( 图2 一1 ) 。如果没有a j a x ，对于每个 9 浙江大学硕1 学位论立 基于a j a x 技术的环保怖控系统 请求都会重新加载整个页面( 或者如果利用i f r a m e s ，则是部分页面) 。原来查看的页 俪会放到浏览器的历史栈中( 不过，如果使用了i f r a m e s ，点击“后退”( b a c k ) 按钮 不一定能得到用户期望的历史页面) 。与此不同，用x h r 做出的请求不会记录在浏览器 的历史中。如果你的用户习惯于使用后退按钮在w e b 应用中导航的话，就可能会产生问 题。 c l a s s i ew e ba p p l i c a t ；a nm o d e i ( s y n c h r o n o u s ) 图2 1 传统的w e b 模型( 同步) ! i ! ! 坚查堂堡主堂堡笙兰 基于a j a x 技术的环保精拄系统 与传统的w e b 应用不同，a 】a x 采用异步交互过程。a j a x 在用户与服务器之间引入一 个叶t 间媒介，从而消除了网络交互过程中的处理一等待一处理一等待缺点。用户的浏览 器在执行任务时即装载了a - i a x 引擎。a j a x 引擎用j a v a s c r i p t 语言编写，通常藏在一个隐 藏的框架中。它负责解释执行用户界面及与服务器之间的交互。a j a x 引擎允许用户与应 用软件之间的交互过程异步进行，独立于用户与网络服务器问的交流。现在，可以用 j a v a s c r i p t 调用a j a x 引擎来代替产生一个h t t p 的用户动作，内存中的数据编辑、页面导 航、数据校验这些不需要重新载入整个页面的需求可以交给a j a x 来执行。”a x 方式的 h w e b 模型如图2 2 所示。 捌a w 渤嘉p p i i c a t l o nm l d 刽 浙江人学硕j - 学位论支基于a j a x 技术的环保监控系统 a j a xw 曲a p p c a 牲o nm 喇e i ( a s y n 曲n d n o u s ) 图2 2a j a x 的w e b 模型( 异步) 通过上面的比较，可以总结出a j a x 与传统的w e b 主要有以下两个个区别： 1 使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的的响应 能力。 2 不刷新整个页面，在页面内与服务器通信。 2 4a j a x 实例演示 介绍了那么多，下面让我们来看一个简单的例子来体会下到底什么是a j a x 技术， 为什么a j a x 有如此大的魅力! 下面的介绍的例子就是使用a j a x 技术，采用异步方式直 接从客户端发送h t t p 请求将参数提交到服务器，并将服务器端返回的信息在文本框中 显示出来。 浙江大学顾士学位论文基十a j a x 技术的环保监摔系统 单击超链接按钮： 型际i 谥葡万i i 文本框巾显示文字：h a p p yb i n h d a yt oy o u 。在这个过程中页面没有重新刷新，只 是局部更改了文本框的内容。这样既提高了用户体验，又减轻了服务器的负担。在这里 我们只是让大家先来认识一下a j a x 的神奇魅力，在后面的章节里面我们会对这个例子 详细分析其实现的过程。 浙自大学硕士学位论文基十a j a x 技木的环保啦挖系统 第三章a j a x 的相关技术 3 1a j a x 的核心技术 a j a x 其核一心有j a 怕s c r i p t 、) 【】l l h t t p r e q u e s t 和m ，如果所用数据格式为x 札的 话，还可以再加上x m l 这一项( a j a x 从服务器端返回的数据可以是) 【m l 格式，也可以是 f9 9 1 文本等其他格式) 。 1 x m l h t t p r e q u e s t 对象 a j a x 技术之中，最核心的技术就是x m l h t t p r e q u e s t ，它最初的名称叫做 x m l h t t p ，是微软公司为了满足开发者的需要，1 9 9 9 年在i e 5 o 浏览器中率先推出的。 后来这个技术被上述的规范命名为x m l h t t p r e q u e s t 。它j f 是a j a x 技术之所以与众不 同的地方。简而言之，x m l h t t p r e q u e s t 为运行于浏览器中的j a v a s c r i p t 脚本提供了种 在页面之内与服务器通信的手段。页面内的j a v a s c r i m 可以在不刷新页面的情况下从服 务器获取数据，或者向服务器提交数据。而在这个技术出现之前，浏览器与服务器通信 的唯一方式就是通过h t m l 表单的提交，这一般都会带来一次全页面的刷新。 x m l n 印r e q u e s t 的出现为w 曲开发提供了一种全新的可能性，甚至整个改变了人 们对于w e b 应用由什么来组成的看法。在这个技术出现之前，由于技术上的限制，人 们认为w e b 应用就是由一系列连续切换的页面组成的。因此整个w 曲应用被划分成了 大量的页面，其中大部分是一些很小的页面。用户大部分的交互都需要切换并刷新整个 页面，而在这个过程中( 下一个页面完全显示出来之前) ，用户只能傻等，什么都做不 了。然而x m l h n p r e q u e s t 技术的出现使得我们可以打破这种笨拙的开发模式，以一种 全新的方式来做w 曲开发，为用户提供更好的交互体验。 x m l h t t p r e q u e s t 是x m l h t t p 组件的对象，通过这个对象，a j a x 可以像桌面应 用程序一样只同服务器进行数据层面的交换，而不用每次都刷新界面，也不用每次将数 据处理的工作都交给服务器来做；这样既减轻了服务器负担又加快了响应速度、缩短了 用户等待的时间。 i e 5 o 开始，开发人员可以在w e b 页面内部使用x m l h t t p a c t i v e x 组件扩展自身 浙江人学硕士学位论文肇十a j a x 技术的环保监撺系统 的功能，不用从当前的w e b 页面导航就可以直接传输数据到服务器或者从服务器接收 数据。，m o z i l l a l ，o 以及n e t s c a p e 7 则是创建继承x m l 的代理类x m l h t t p r e q u e s t ；对于 人多数情况，x m l h n p r e q u e s t 埘象和x m l h t t p 组件很相似，方法和属性类似，只是 部分属性不同。 x m l h t t p r e q u e s t 对象初始化 28 ： x m l h t t p r e q u e s t 对象的方法 方法 描述 a b o r t ( ) 停止当前请求 g e t a llr e s p o n s e h e a d e r s ( ) 作为字符串返回完整 的h e a d e r s g e t r e s p o n s e h e a d e r ( ”h e a d e r l a b e l ”) 作为字符串返回单个 的h e a d e r 标签 o p e n ( ”m e t h o d ”，”u r l ” ，a s y n c f l a g ，”u s e r n a m e ” ， 设置未决的请求的目 ”p a s s w o r d ” )标u r l ，方法，和其 他参数 s e n d ( c o n t e n t ) 发送请求 s e t r e q u e s t h e a d e r ( ”l a b e l ”，”v a l u e ”) 设置h e a d e r 并和请求 一起发送 浙江大学颁士学位论文革于a j a x 技术的环保监控系统 x m l h tt p r e q u e s t 对象的属性 属性描述 o n r e a d y s t a t e c h a n g e 状态改变的事件触发器 r e a d v s t a t e 对象状态( i n t e g e r ) ： o = 未初始化 1 = 读取中 2 = 已读取 3 = 交互中 4 = 完成 r e s d o n s e t e x t 服务器进程返回数据的文本版本 r e s p o n s e x m l 服务器进程返回数据的兼容d o m 的x m l 文档对象 s t a t u s 服务器返回的状态码，如：d 0 4 = ”文件未找到”、2 0 0 = ” 成功” s t a t u s t e x t 服务器返回的状态文本信息 2 j a v a s c r i p t j a v a s c r i p t 一直被定位为客户端的脚本语言，应用最多的地方是表单数据的校 验。现在，可以通过j a v a s c r i p t 操作x m l h t t p r e q u e s t ，来跟数据库打交道。 3 d o m d o m ( d o c u m e n t0 b j e c tm o d e l ) 是提供给i l t m l 和x m l 使用的一组a p i ，提供了 文件的表述结构，并可以利用它改变其中的内容和可见物。脚本语言通过d o m 才可以 跟页面进行交互。w e b 开发人员可操作及建立文件的属性、方法以及事件都以对象来 展现。比如，d o c u m e n t 就代表页面对象本身。 4 x m l 通过x m l ( e x t e n s i b l em a r k u pl a n g u a g e ) ，可以规范的定义结构化数据，是网 上传输的数据和文档符合统一的标准。用x m l 表述的数据和文档，可以很容易的让所 有程序共享。 6 浙7 l 大学硕上学位论文基于a j a x 技术的环保监控系统 3 2