Ajax技术的研究与应用

科技信息博士·专家论坛Ajax技研我与回用中国地质大学(北京)信息工程学院临沂师范学院张峰中国地质大学(北京)信息工程学院宋莉[摘要]Ajx( Asynchronous JavaScript and xML)技术是Web2.0的核心之一本质上是一种RIA( Rich Internetapplication)技术。它主要提供丁客户端与服务器间异步通信的能力,可以实现客户端从服务按需获取數据,从而可以降低网络传镛的数据量,提高客户端的响应速度;使用的动态页面技术丰富丁客户端的表现能力极大改善丁用户的使用体验。[关键词] Ajax riA XmlhTtpreqUest异步交互模式1引宫JavaScript语言首先是在网景公司的 NetScape浏览器中被随着互联网应用的普及,Web应用以其良好的扩展性、易使用,一直被定位为一种客户端脚本语言它一般用来完成客户于部署维护方便等优点逐渐成为软件开发的主流。早期的端的表单数据校验等功能,现在很多网页中的特效也都是web应用采用的是同步交互过程,即用户首先向Web服务器 JavaScript的功劳提交一个请求或行为呼叫服务器接收到客户请求后执行相应在Ajx中, Javascript从幕后走到了前台,并发挥了巨大的处理操作,最后向用户返回处理结果。服务器在处理请求时,用作用可以说 JavaScript是粘合剂,它综合了DOM、 XHTML(或户处于等待状态,有时如果超过了服务器响应时间,甚至返回HTML)XML(或SON)以及CSS等技术,并控制它们的行“页面不可用”等提示。另外,当我们只想改变页面的部分数据为操作 XmlhTtprequEst对象来跟数据打交道时,用户的请求会导致服务器重新返回整个页面内容,包括那些(2) XmlhTtprequEst xhr)对象没有改变的数据这不但增加了网络传输的数据量,还影响了客XmlhTtprequEst对象是Ajx技术的核心。它时XML户端的响应速度,为什么我们不能“按需”获取数据呢?Ajax技Htt组件的对象,该对象在 Internet Explorer5中首次引入,该对象可以使用 JavaScript向服务器提出请求并处理响应,而不AjBx技术是web20的核心之一,本质上是一种RIA(kRch阻塞用户。通过这个对象Ajx可以像桌面应用程序一样只同Internet Application)技术。RIA是指具有高度互动性和丰富用服务器进行数据层面的交换,而不用每次都刷新整个页面,也不户体验的网络应用程序,它既具有消息确认、无刷新页面之下提用每次将数据处理的工作都交给服务器来做,这样既减轻了服供快捷的界面响应拖放式等桌面应用程序的特点同时又具有务器负担又加快了响应速度、缩短了用户等待的时间部署简单、跨平台等Web应用程序的特点。Ajax技术提供了客(3)DOM户端与服务器异步通信的能力,从而使用户从请求一响应DOM( Document Object Model)全称为文档对象模型,它提请求的循环中解脱出来,同时降低了网络传输的数据量,提高了供了操作如HTML、XML等文档对象的接口,DOM模型更像客户端的响应速度,改善了用户使用体验使得Web应用可以一个对象模型,它不依赖于对象的结构,常见的树形结构只是它接近甚至达到类似“桌面应用”的效果。其中的一个实现,DOM只是提供了操作每种文档对象的接口2Ajax技术简介在Ajx中, JavaScript脚本语言通过DOM才可以跟页面进行2.1Ajax技术定义交互,包括改变文档的内容和状态,从而达到改变页面的目的Ajax的名字是 Asynchronous JavaScript and XML的缩(4)XML和JSON写。它并不是一门新的语言或技术,实际上它是把现有的几项成Ajx中可以通过 XmlhTtpreqUest对象读取Text文熟技术按一定的方式组合在一起,通过相互协作发挥出特殊的本、XML数据和JSON等数据Text文本数据是最简单的数据作用。2005年2月Web设计咨询企业 Adaptive Path公司用户格式不做过多介绍体验总监耶西·j小加勒特发表了名为《Ajx: A New AXML( Extensible Markup language)扩展标记语言,可roach to Web application)的文章,文中加勒特阐述了Web应规范的定义结构化数据,是目前网上传输的数据和文档广泛使用程序可以更接近于传统的桌面应用程序的观点,他引用用的数据标准。用XML表述的数据和文档,可以很容易的让所些新技术和 google项目( GoogleMap、 Google Suggest等)作为有程序共享例子来说明传统的基于桌面的用户交互模型现在如何应用于JSON全名为 JavaScript Object Notation,是Web上,讨论了如何消除胖客户(或桌面)应用与瘦客户(或数据交换格式基于 JavaScript规范开发出来的,可以与Web)应用之间的界限,并给出了基于这种思想的交互模型,同 JavaScript完美结合。它实际上结构化的数据,在时将实现这种应用的技术命名为:Ax。由此Ax迅速成为了 Javascript中无需额外的解析就可以直接使用,JSON数据与当今Web开发中最为热门的词汇,Web开发掀开了崭新的XML相比有如下优点:浏览器解析JSON的速度比XML快JSON构造是友好的编程语言,并容易转换为后端编程语言(如Jesse James Garrett是这样定义Ajax技术的:Java)JSON相当稳定,其附加内容将成为超集(1)基于 XHTML和CSS技术的标准化呈现3Ajx的工作流程与应用实例(2)使用DOM( Document Object Mod)实现动态显示和3.1Ajx的工作流Ajx实质上也是遵循 Request/ Server模式, Javascript调(3)使用XML和XSLT进行数据交换与处理用Ax引来代替产生的一个Htt的用户动作,只不过这个(4)使用 XmlhTtprequEst对象与服务器进行异步通信获过程是异步的,Ajx程序工作流程如取数据;(1)初始化对象:在 Javascript脚本代码中声明异步通讯对5)最后用 Javascript脚本绑定和处理所有数据,整合以上象,如果是浏览器,就初始化为 XmlhTtp Activex,如果是mozilla或 NetScape浏览器就初始化为 XmlhTtprequEst对统的Web应用不同,Ajx采用异步交互过程。Ajx在象JavaScript语言编写,它通常藏在藏得框架中,负贵实现函数及相关传输参数然后向服务器端发送异步et的处理用户和服务器之间引入一个中间媒介一Ajx引擎,Ajx引用(2)设置参数并发送请求:设置 XmlhtTprequEst的处理传统的客户端与服务器间的交流,从而一定程度上解(3)服务器接收请求并进行处理:服务器收到客户端请求后络进行响应处理,生成相应处理结交互过程中的处理一等待一处理一等待的缺点。同时也可以把(4)服务器返回服务器端把处理结果封装成XML等格式以前服务器负担的作转移到客户端,利用客户端闲置的的数拥处理能力来处理,从而减轻服务器的负担和网络的传输压力中国煤化工eques对象接收服务器2Ajax使用的关键技术返回CNMHAjax中用到的主要技术有 JavaScript、 XmlhTtprequEstDOMXML等技术,下面做简要介绍:页面的勃地以口项圆门订x煙四数中利用脚本语言修改(1)JavaScript3.2Ajx应用实例作者简介:张峰,男临沂师范学院教师,中国地质大学(北家)06硕磺士宋莉,女中国地质大学(北家)信息工程学院,副教授,项士生导师。一数据科技信息博士·专家论坛在Ajx的应用方面,Goge无疑是当仁不让的表率(1)技术相对成熟稳定:AjBx使用的都是基于标准化的并Orkut, Gmail, Google Groups, Google Maps, google. Suggest都被广泛支持的技术而且大都经过实践检验相对稳定可靠,适应用了这项技术,微软也在积极开发更为完善的Ajx应用,目用性强。使用Ajx时不需要下载插件或者小程序,与其它RIA下面通过一个从服务器获取X红文件数据的程序实例来可以相对快捷地将该技术应用到已有的实际项目而不懵要改变现有Web内容(2)更快的响应速度,更好的用户体验:Ajx实现了按需获Ajx测试程序取数据,并异步的更新页面,使得用户请求处理时间大大减少同时在处理一个请求的时候可以处理其它的请求,这种体验就像将以前c/S模式下开发的产品迁移到Web平台上,加上/初始化 XmlhTtpreqUest对象Web自身的部署、维护方便等优点,Ajax应用的体验性和可用性自然不言而喻了3)减少了网络数据传输,节省了服务器带宽,平衡functioncreatxmlhttpreQuesTo(器端与客户端的负载:Ajax将以前服务器负担的一部分移到客户端完成,利用客户端闲置的资源处理,从而减轻xmlhttp-newActivexobject("MsxM112.XmlhTtp*)1器端处理和带宽的负担,节约了空间和成(4)良好的扩展性:Ajax利用XML或JSON可以方便读取外部数据,并且可以与其它RIA技术如 Flash、XUL等联合xmht= new ActiveXObject( Microsoft使用,从而开发出功能更强大的web应用XmlhTtp),)catch(e)try(Ajax不是完美的技术,使用Aijx时它的一些缺陷不得不xmlhttpnewxmlhTtpreqUest权衡)catch(e)(1)兼容性问题:Ajax使用了 JavaScript脚本语言和Ajx引华,而这个取决于浏览器的支持。IE5.0及以上、 mozilla1.0NetScape7及以上版本才支持,而且不同浏览器提供的xMLif(!xmlhttpHttprequest的方式也不一样,所以使用Ajx的程序必须考虑到对各种浏览器的兼容性如果客户端浏览器对象改变,有可能lert(不能创建 XmlhTtprequEst对象实例);会造成页面无法显示甚至整个系统都无法使用return falser(2)页面定位问题:由于Ajx将大量页面状态信息存储在//从服务器获取XML数据调用的主函数“后退按当用户部分剧新页面时会导致恻览器的“前进”、客户端变量用户有时搞不清楚现在的页面数据是旧的还是已经更新过的,这就需要在适当位置标示数据的状态。creatxmlhttpreQuesTo;3)对搜索引擎不友好:通过搜索引华获取信息是人们//设置参数并发送异步请求互联网的重要原因,但传统的搜索引擎对数据的分析和处理都xmihtTp. open(get. a nge = process request!是基于页面工作的,而Ajx则是基于数据工作的,两者无法很好的协调,Ajx中传输的数据都是一些数据片段,不是完整的,truexmlhttp.sendGnull),Htm文档,而且是后台异步获取,不能被搜索引擎很好的发现} catch〔e){并缓存,最终可能导致用户无法搜素到指定的内容。alert(”您访问的资源不存在!)(4)性能问题:Ajax把大算从服务器转移到了客户端浏览器,这意味着浏览器将承受更大的负担,而不再是简单的文档显示功能。由于Ajx的核心语言 JavaScript是解释型脚本回数据XmlhTtprequEst对象处理函数,在页面显示服务器返能上找到一个平衡点,并尽可能的实现按需下载5)对流媒体的支持没有 Flash、 Java Applet好,一些手持设m6(/断状态是否请求发选备(知手机的等现信不很好的支持A技术成功f(mlhttp.statu==200){//判断状态是否返回数据成想据Ajx技术的特点,它的适用范围主要有以下一些方//接收数据并显示(1)数据验证:校验用户注册、登录等信息;forml.showvalue=xmlhttp.responsetext(2)按需获取数据:按用户的要求只需要部分改变页面内容else(3)读取外部数据:可以读取XMN等格式的外部数lert("请求处理返回数据异常”);据5结束语Ajx技术能够实现浏览器与服务器间的异步数据交互以及页面内容的局部刷新,从而达到“按需”获取数据的目的,显著</script>改善Web应用的用户体验。同时它也可以把一些服务器负担的工作转移到客户端处理,平衡了服务器与客户端的负载。一般说是一个Aja
来,Ax技术主要应用在交互较多频繁读数据和数据分类良好的Web应用中,在具体运用过程中,应具体情况具体分析Input type-value=”Ajx测试” onclick才能达到较好的效果随着Web应用的快速发展,相信Ajax技startRequest,/>术一定会得到更广泛的应用,带给我们更多的惊喜
中国煤化工 论文截图