AJax技术

一种新的胖客户端技术

字号+ 作者:H5之家 来源:H5之家 2017-03-26 14:00 我要评论( )

一、选题目的和意义 选题的目的: 随着Web2.0时代的到来,Ajax已经成为人们谈论最多的技术术语。Ajax是异步java script 和XML(Asynchronous java script and XML)的英文缩写。它是2005年2月才诞生但是现在已经炙手可热的一项全新技术。这项新技术可以提供

一、选题目的和意义
选题的目的:
 随着Web2.0时代的到来,Ajax已经成为人们谈论最多的技术术语。Ajax是异步java script 和XML(Asynchronous java script and XML)的英文缩写。它是2005年2月才诞生但是现在已经炙手可热的一项全新技术。这项新技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。
Ajax也可以说是一种方法,使用它可以构建更为动态和响应更灵敏的Web应用程序。该方法的关键在于对浏览器端的java script、DHTML和与服务器异步通信的组合。而且启用这种方法非常简单:利用一个Ajax框架构造一个应用程序,它直接从浏览器与后端服务进行通信。这样就可以使应用程序更加自然和响应灵敏,从而提升用户的浏览体验。这项技术也改变了传统的瘦客户端存在的弊端。通过浏览器来部署应用的传统方式给服务器造成了很大的负担,代价是与服务器交互需要完全刷新页面,因此用户界面没有了丰富的交互性。而胖客户端的开发长期以来成了桌面应用程序的代名词,Ajax的出现,使我们改变了这种思维,Ajax是一种可以使Web应用程序实现胖客户端的一种技术。

选题的意义:
 掌握Ajax,可以构建更为动态和响应更灵敏的Web应用程序,从而提升用户的浏览体验。在这项技术正在积极使用的今天,理解它的工作原理及技术实现方式,有着重要的意义。
 因为自己对Web开发的浓厚兴趣,希望通过本次毕业论文课题的研究,加深对WEB开发体系的认识了解,培养自己的文章材料组织和分析能力。
二、本选题在国内外的研究现状和发展趋势
 
 目前Ajax已经成为了Web应用的主流开发技术,大量的业界巨头已经采纳并且在大力推动这个技术的发展。 IBM、Oracle、Yahoo!、BEA、RedHat、Novell等页界领先的公司启动了Open Ajax项目。致力于为Ajax开发建造先进强大的的开发工具。 微软开发了自己的Ajax框架Altas,不过主要是和服务器端他们自己的ASP.NET框架配合工作。Sun也将Ajax技术列入了J2EE的blueprint(蓝图)中,作为J2EE技术的有益的补充。另外,Google的很多产品都采用了Ajax技术,例如Orkut、Gmail、Google Suggest, Google Maps和Google Groups等。Amazon的A9.com搜索引擎也采用了类似的技术。在国内,网易等公司已经将Ajax应用于实际产品之中,而且取得了很好的效果……
 Ajax理念的出现,揭开了无刷新更新页面时代的序幕,并有代替传统Web开发中采用form(表单)递交方式更新Web页面的趋势,提高了用户与界面的交互性,更新了传统的客户端的开发思维,可以算是一个里程碑。
 随着网络的发展,Ajax一定会被更广泛的使用,运用Ajax开发网络应用的最大挑战并不在于技术,因为其所使用的技术都已经很成熟、稳定和易于理解,对于网络应用开发者来说,最大的挑战在于突破陈旧的思维方式,开始想象一个更加宽广的世界。
 


三、课题设计方案 
 
研究的基本内容:
 1.引言:Web应用的发展与Ajax的由来。
 2.Ajax的概念:定义、相关技术及工作原理。
 3.流行的原因:从商业市场角度和技术实现角度上阐述分析原因。
 4.目前的应用:应用场景、实例设计,应用分析。
 5.结论:Ajax技术是一种胖客户端技术。
 
采取的研究途径:
 在指导老师的指导下,阅读指导老师提供的有关书籍中的基本知识以及指导老师提供的一些个人的研究成果,并通过网络查阅相关论文数据库、借鉴国内大学往届优秀研究生论文,以及查阅相关国外大学论文数据库的资料,搜索网络中多媒体网络教学的具体数据和资料,综合概括查询得到的有关知识,确定论文研究内容的可行性、完成开题目报告,积极与指导老师探讨研究方法、研究中疑惑的问题和论文的写作方法,针对指导老师对论文内容和格式等方面提出的意见和建议,修改论文,直到最终完成论文。


四、计划进度安排

起止时间:2006年1月1日——2005年1月10日  
进度安排:搜集查阅毕业论文的有关资料,为选题做好必要的准备工作。
起止时间:2006年1月10日——2006年2月28日
进度安排:通过查阅搜索的有关资料,确定毕业论文方向,完成开题报告。        
起止时间:2006年3月1日——2006年4月30日
进度安排:毕业论文的具体实施阶段,并填写中期检查表。
起止时间:2006年4月30日——2006年5月20日
进度安排:在导师的指导建议下对论文进行全面修改,完成毕业论文。

五、主要参考文献
[1] Ryan Asleson Nathaniel T.Schutta.Ajax基础教程.人民邮电出版社中文版.2006
[2] Avid Flanagan. java script 权威指南第四版.中国电力出版社中文版.2005
[3] Didier Martin.XML 高级编程.机械工业出版社中文版.2005
[4] Chelsea Valentine, Chris Minnick.XHTML 教程(XHTML).人民邮电出版社中文版.2006
[5] 施伟伟,张蓓.征服Ajax——Web 2.0快速入门与项目实践.人民邮电出版社.2006
[6] Dave Crane .AJAX IN ACTION.人民邮电出版社中文版.2006
[7] .Ajax技术概况与现状.Ajax中国
[8] .用Ajax开发智能Web应用程序.蓝晶石博客
[9] .Ajax与Atlas开发系列讲座.Microsoft Technet
[10] .Ajax: A New Approach to Web Applications.Adaptive path

指导教师意见及建议:
                 

摘要:随着Internet的迅速发展和其用户的增多,以及新型网络服务的研究、实施和应用,传统的基于Web的应用程序渐渐不能满足用户与Web页面高度交互的希望,它的弊端渐渐显露。Ajax(异步java script和XML)是一种开发Web应用程序的方法,它通过提交Web页面内容的方法提高了用户界面的速度。在基于Ajax的应用程序中,页面的更新是有选择性的,可以在本地完成的,并且是异步的。客户端的java script将与服务器的交互减至最少,同时用户能连续与Web页面交互。Ajax的出现,使我们改变了传统的关于胖客户端的思维,经过分析可以得出,利用Ajax,也可以使基于的Web应用程序成为实现胖客户端的一种技术。
 关键词:Ajax,XMLHttpRequest,MVC, RIA,Rich Client
1  引言
 Internet经历了翻天覆地的重大变革。最初Internet实际上就是让科学家们和学术机构交换文章和研究成果,也就是说,只有简单的文本浏览器和静态页面仅供科学家之间交流研究心得。时至今日,Internet已不可同日而语,它得到了巨大的发展,成为贸易和信息的中心,也成为大量应用的首选平台。因此伴随而来的Web开发显得尤为重要,而以前的那种简单的请求/响应模式已不能满足用户的需要。
 在Web开发领域,随着Internet的不断普及和深入发展,各种网络应用系统的开发也由过去的Client/Server 模式转向Browser/Server。这种基于Web应用系统的优点之一是免去了客户端的部署,统一使用浏览器即可。而对于这种系统的后台维护,开发人员和系统管理人员仍然要在服务器端进行,如果系统服务器要是在异地的情况下,会浪费大量的人力和时间。于是胖客户应用的开发人员都饱受部署之苦,因为要把应用部署到数以千计的用户机器上,他们急切地希望Web能够减轻他们的负担。多年以来,已经出现了许多Web应用技术,有些是专用的,另外一些需要高超的编程能力。在用户体验方面,尽管这些技术有弱有强,但没有哪个技术能使瘦客户应用达到桌面应用的水平。
 不过,由于很容易部署,有更大的客户群体,而且维护开销更低,尽管浏览器存在一定的局限性,仍是许多应用的首选目标平台。所以开发人员往往使用一些技巧来绕过Internet对开发人员的麻烦限制。利用各种远程脚本方法和HTML元素,开发人员可以与服务器异步地通信,但是直到主流浏览器对XMLHttpRequest对象提供了支持,真正的跨浏览器方法才有可能。
 XMLHttpRequest的出现为Web开发提供了一种全新的可能性,甚至整个改变了人们对于Web应用由什么来组成的看法。在这个技术出现之前,由于技术上的限制,人们认为Web应用就是由一系列连续切换的页面组成的。因此整个Web应用被划分成了大量的页面,其中大部分是一些很小的页面。用户大部分的交互都需要切换并刷新整个页面,而在这个过程中,也就是在下一个页面完全显示出来之前,用户只能傻等,什么都做不了。这就是人们所习以为常的Web应用。在传统的Web应用中客户端与服务器的交互只能通过表单的提交\服务器的处理后返回新的页面,最后客户端进行完全的页面刷新。这样的局面已经延续了相当长时间。随着Web应用程序复杂性越来越高,这种传统的Web应用程序已经渐渐不能满足Web浏览者更高的、全方位的体验要求了。
 Web应用与桌面应用程序相比,缺少了很多交互的特性,浏览器在Web应用中所处的角色仅仅是一个呈现HTML代码的容器,而不是一个独立应用程序的宿主。然而XMLHttpRequest技术的出现使得我们可以打破这种笨拙的开发模式,以一种全新的方式来做Web开发,为用户提供更好的交互体验。大量的探索者以XMLHttpRequest技术为基础,将一些原有的Web技术重新包装整合。经过了多年的不懈努力,终于在2005年出现了一个新的术语Ajax,来描述这样一类的技术和开发方式。
 随着Web2.0时代的到来,Ajax已经成为人们谈论最多的技术术语。Ajax是2005年2月才诞生但是现在已经炙手可热的一项全新技术。这项新技术能够极大地改善网站的用户体验。Ajax技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。当Ajax的出现给所有的Web开发人员,它对Web应用来说可以是革命性的,它使得开发人员得以摆脱原有单调的开发模式,从而开发出更易用、交互性更强的Web应用。
 关键在于,Internet默认的请求/响应模式有了重大转变,这正是Ajax的核心所在,尽管这并非全新的内容。Web应用开发人员现在可以自由地与服务器异步交互,这说明,他们可以完成许多原本只能在胖客户上完成的任务。Google、Yahoo和Amazon等公司已经走在前面,我们终于看到基于浏览器的应用也能与胖客户应用不相上下。利用Ajax,你可以尽享这两方面的好处:代码位于你能控制的服务器上,而且只要客户有浏览器,就能访问一个能提供丰富用户体验的应用。Web应用开发人员,可以应用某种或者多种服务器端技术来构建Web应用。在过去几年中,服务器端有了长足的发展,服务器端软件开发越来越容易,也越来越健壮,相比之下,客户端基本上被抛在了一边。Ajax技术的出现使这种状况有所改观,因为开发人员现在有了一个更丰富的客户端工具箱,有大量工具可以使用。
 Ajax技术从本质上说是属于客户端的技术。但它的应用是精彩之处在于客户端与服务器的异步交互。而它实现的,却是胖客户端的功能,所以我们也可以这么认为:Ajax是一种新的胖客户端技术。
2  Ajax的概念
2.1  Ajax的定义
 Ajax这个概念的最早提出者Adaptive Path公司的Jesse James Garrett认为:Ajax是异步java script 和XML(Asynchronous java script and XML)的英文缩写。而大力推广并使Ajax技术炙手可热的是Google。
 Ajax是指一种创建交互式应用的网页开发技术。Ajax的核心理念是使用java script对象XmlHttpRequest发送异步请求。最初为XMLHttpRequest对象提供支持的是微软公司。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用java script向服务器提出请求并处理响应,而不阻塞用户。
   实际上,Ajax不只是一种技术,它由几种蓬勃发展的技术以新的强大方式组合而成。Ajax包含:
 (1)基于XHTML和CSS标准的表示;对网页内容重新格式化,但不是使用HTML语言,因为HTML语法很不严格,匹配性也不好,使用性能差。
 (2)使用文档对象模型(Document Object Model)进行动态显示和交互;比原来使用各种脚本和动态语言发好。
(3)使用XMLXSLT进行数据交换与处理;所有的数据的存取都XML完成。
(4)使用XMLHttpRequest与服务器进行异步通信;使用XMLHttpRequest进行异步数据读取。
(5)使用java script绑定将它们绑定在一起。使用java script整合上述技术,绑定和处理所在数据。
 2.2  Ajax的相关技术
 在基于Ajax的应用中, Ajax核心技术有java script、XMLHttpRequest和DOM,如果所用数据格式为XML的话,还可以再加上XML这一项。
2.1.1 XMLHttpRequest
 XMLHttpRequest是Ajax技术的核心。它其实是XMLHTTP组件的对象,通过此对象,可以做到无需提交表单就可以实现与服务器的连接;无需刷新整个页面,就可以动态更新页面中一部分的内容。这样,Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换,而不用每次都刷新界面,也不用每次将数据处理的工作都交给服务器来做;这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
 XMLHttPRequest通常使用XML作为数据交换的载体,但也可使用其他的载体,如纯文本。简单来说,就是通过XMLHttPRequest发送信息给服务器,异步接收服务器处理并返回信息,然后通过java script动态更新页面的部分内容。XMLHttpRequest具体作用是在客户端传递XML数据给远程服务器端的。XmlDocument与XmlHttpRequest这两个技术是Ajax的核心。Ajax的关键是怎样把数据从远端获取回来。XmlDocument实际上是创建一个Document对象,这个对象是XML的Document对象。之所以要创建XML的Document对象,是因为互联网上XML格式的数据非常多,如果不创建XML的Document对象,取回来的数据就没法使用。
 这样就明确了,我们可以从客户端传递XML数据到服务器应用程序,然后处理。下面需要做的就是将要显示的内容(包括新的控件和HTML文本)和数据在服务器应用程序中处理成为XML数据,再以逆向传输发送给客户端,然后用客户端的响应代码更新全部或部分页面区域而完成无刷新的功能。
 2.2.2  java script
 java script是一在浏览器中大量使用的编程语言,它一直被定位为客户端的脚本语言,应用最多的地方是表单数据的校验,或是做一些小游戏等等。但事实上,它是一门真正的编程语言,有着自己的标准并在各种浏览器中被广泛支持。在Ajax技术应用中,可以通过java script操作XMLHttpRequest,来与数据库进行交互。
 2.2.3  DOM(Document Object Model)
 DOM(即结构化的文本结构)是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台。也就是说,它提供了文件的结构表述,并可以改变其中的內容及可见物。它提供了标准的HTML和XML对象集,并有一个标准的接口来访问并操作它们。DOM被分为不同的部分(核心、XML和HTML)和不同的版本(DOM1/2/3),其中,HTML DOM 将HTML文档视为嵌其他元素的树型结构元素。所有的元素,它们包含的文字以及他们的树型都可以被DOM树所访问到。它们的内容可以修改和删除,并且可以通过DOM建成立新的元素。元素的文字和它们的属性被识别为点。
 DOM的本质是建立网页与 Script 或程序语言沟通的桥梁。脚本语言通过DOM才可以跟页面进行交互。Web开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。这些对象可以由当今大多数的浏览器以 Script 来取用。一个用HTML或XHTML构建的网页也可以看作是一组结构化的数据,这些数据被封在DOM中,DOM提供了网页中各个对象的读写的支持。
 2.2.4  XML
 可扩展的标记语言(Extensible Markup Language)具有一种开放的、可扩展的、可自描述的语言结构,它已经成为网上传输的数据和文档符合统一的标准。它是用来描述数据结构的一种语言,可以使对某些结构化数据的定义更加容易,并且可以通过它与其它应用程序交换数据。用XML表述的数据和文档,可以很容易的让所有程序共享。XML是用于网络上数据交换的语言,具有与描述Web页面的“HTML”语言相似的格式。该语言有“可以利用Web浏览器进行数据确认”以及“易于生成数据”等优点,因此主要用于在企业之间,或者在企业内部更加方便地进行数据交换和利用。XML是Extensible Markup Language的缩写,它是一种类似于HTML的标记语言。XML是用来描述数据的,它的标记不是在XML中预定义的,开发人员必须定义自己的标记。另外,XML使用文档类型定义(DTD)或者模式(Schema)来描述数据。而当它使用DTD或者Schema后就成为一种自描述的语言。
 2.2.5  CSS
 CSS是Cascading Style Sheets(层叠样式表单)的简称。更多的人把它称作样式表。顾名思义,它是一种设计网页样式的工具。借助CSS的强大功能,可以把数据更有效的表现在网页上。CSS是一种用来显示方式描述的标记语言。对于Ajax来说,CSS的最大特性是它可以用来显示。
 我们在前面讨论过,Ajax技术有几部分组成,首先它有后台的引擎,把数据从服务器端取出来,前台取到数据以后有一种表示的方式,能把HTML取出来并在前台有条不紊的显示出来,这是一个重要的问题。网页的美感和可视化,是通过对CSS数据进行设定完成的。
 2.3  Ajax技术的实现原理
 介绍了它的相关技术后,我们来看一下它的实现原理。Ajax 这个名字代表了异步java script与XMLHttpRequest,并且意味着你可以在基于浏览器的java script和服务器之间建立通讯。这些用于现代浏览器中的若干成功技术的可能性组合的Ajax技术,使所有的Ajax应用程序实现了一种“丰富的”用户界面——这是通过java script操作HTML文档对象模型并且经由XMLHttpRequest实现的精确定位的数据检索来实现的。
 (1)原理简介
 Ajax的工作原理相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做,只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求(主要是读取XML格式的数据)。Ajax是使用XML和java script两部分,在客户端向服务器端提出请求。从原理上看,主要是Ajax可以通过调用XMLHttpRequest实现与服务器的异步通讯,并最终在网页中实现丰富友好的用户界面。
 应用Ajax的流程如下:
 (1)定义一个事件处理器 。
 (2)获取XMLHttpRequest,并将事件处理器注册给它。
 (3)与服务器连接。
 (4)发送信息。
 (5)服务器返回处理完毕的信息。
 (6)每当XMLHttpRequest的状态发生变化,自动触发事件处理器。
 (7)事件处理器动态更新页面。
 技术的关键是Ajax引擎,它实际上是一个比较复杂的java script应用程序,用来处理用户请求,读写服务器和更改DOM内容。在客户端多出来一个 Ajax engine,而且服务器传给客户端的已经不再是 HTML/CSS,而是纯的 XML 数据,客户端通过 XMLHTTP 向服务器端发送请求。所有的表示逻辑在客户端通过 java script 脚本来执行,然后通过修改 DOM 来完成展现。 由于有了位于客户端这个中间层,可以把原先必须在服务器端完成的很多交互工作放在了客户端完成,而客户端的 Ajax engine 的响应是即时的,因此用户的交互体验得到了极大的改善。
 Ajax是传统Web应用程序的一个转变。以前是服务器每次生成HTML页面并返回给客户端(浏览器)。在大多数网站中,很多页面中大部分内容都是一样的,比如:结构、格式、页头、页尾、广告等,所不同的只是一小部分的内容,但每次服务器都会生成所有的页面再返回给客户端,这无形之中是一种浪费,不管是对于用户的时间、带宽、CPU耗用,还是对于ISP的高价租用的带宽和空间来说。而Ajax可以所为客户端和服务器的中间层,来处理客户端的请求,并根据需要向服务器端发送请求,用什么就取什么、用多少就取多少,就不会有数据的冗余和浪费,减少了数据下载总量,而且更新页面时不用重载全部内容,只更新需要更新的那部分即可,相对于纯后台处理并重载的方式缩短了用户等待时间,也把对资源的浪费降到最低,基于标准化的并被广泛支持和技术,并且不需要插件或下载小程序,所以Ajax对于用户和ISP来说都是很有利的。
 Ajax使Web中的界面与应用分离(也可以说是数据与呈现分离),而在以前两者是没有清晰的界限的,数据与呈现分离的分离,有利于分工合作、减少非技术人员对页面的修改造成的Web应用程序错误、提高效率、也更加适用于现在的发布系统。也可以把以前的一些服务器负担的工作转嫁到客户端,利于客户端闲置的处理能力来处理。
 (2)交互模式
 在同步工作方式中,当我们需要改变页面中的一些数据,并要求服务器端做一些变化时,要等整个页面被传过去然后再传回来,才能被看到。而使用Ajax技术之后,我们只需要把有变化的那部分的请求发过去,服务器端获取之后,处理并只将这部分传回来,因此性能大大提高显著。具体来说,首先,我们不必传那么多的数据,其次,可以增加服务的针对性。比如,页面有好多东西,而我们只想看一下天气预报,那么要做的事,提交给服务器我们所位置,想看一下这里的天气,返回所有数据是传统的服务器端交互机制和原来的FORM提交机制的应用方式。使用Ajax后,我们只提交且只获得关于天气的新数据。
 具体地进行分析一下它们的区别:
 在传统的Web应用同步交互方式中,用户首先发送一个HTTP请求到Web服务器,然后Web服务器根据用户请示的内容,相应的任务,对其进行处理后再返回一个新的HTML页到客户端,如图所示。这是一种不连贯的用户体验,每当服务器处理客户端提交的请求时,客户都只能空闲等待, 此时浏览器显示的页面是空白的,这也就是通常所说的“白屏”现象,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Asp.net中的AJAX学习记录之二 体会AJAX页面刷新的不同

    Asp.net中的AJAX学习记录之二 体会AJAX页面刷新的不同

    2017-03-12 18:03

  • js用innerHTML实现页面局部更新与用ajax技术局部更新的区别?

    js用innerHTML实现页面局部更新与用ajax技术局部更新的区别?

    2017-02-09 15:00

  • ajax推技术,在线服务器端向客户端发送数据

    ajax推技术,在线服务器端向客户端发送数据

    2017-02-07 15:00

  • ASP.NET MVC 使用TryUpdateModel 更新的技巧

    ASP.NET MVC 使用TryUpdateModel 更新的技巧

    2016-07-02 17:00

网友点评