简介:传统的Web应用在用户交互性方面存在响应速度慢的缺点,导致用户体验较差。介绍了AJAX的概念和工作原理,通过Web实例对AJAX在Web中的应用进行分析,证明了AJAX技术具有在客户端与服务器之间进行异步通信的能力,可以有效地减少客户端的响应时间,更友好地改善了用户的实时操作体验。关键词AJAX;异步;Web;交互性中图分类号TP312文献标识码A文章编号1007-9599(2010)04-0000-01AnalysisAJAXApplicationinWebDingMinghao(TianjinPolytechnicUniversity,Tianjin300000,China)AbstractThetraditionalWebapplicationintheaspectsofuserinteractionpresenceshortcomingsofslowresponse,resultinginpooruserexperience.IntroducedtheconceptofAJAXanditsworkingprinciple,analysisthroughtheWebexamplesusingAJAXinWebapplications,provedthattheAJAXtechnologyhastheabilitybetweentheclientandserverforAsynchronouscommunication,reducetheclientresponsetimeeffectively,toimprovetheuserexperienceofreal-timeoperationmorefriendly.KeywordsAJAX;Asynchronous;Web;Interaction一、引言在互联网时代,随着网络的高速发展,一些弊端也随之出现。如等待服务器响应或屏幕刷新的时间过长等等。如何使用户能获得快速的响应,体验交互性带来的乐趣,成为目前Web应用需要解决的问题。AJAX(AsynchronousJavaScriptandXML)技术的出现有效地缓解了这一问题,它不但能使用户得到更好的体验,而且能够减轻服务器的负担。(一)AJAX技术概述AJAX是基于浏览器的应用技术,是由JavaScript、XML、DOM和XMLHttpRequest等多种技术组成的一种综合应用。AJAX包含的技术1.使用XHTML和CSS来编写结构化的页面来实现表现层,并采用DOM技术进行动态操作。2.使用XML和XSLT进行数据交互操作。3.采用XMLHttpRequest与服务器进行异步通信。4.使用JavaScript对它们进行绑定。(二)AJAX技术的基本工作原理AJAX技术的核心内容就是使用户操作与服务器之间的响应异步化。为此,它就相当于一个中间层,处理客户端和服务器端的请求,利用Javascript程序,通过调用XMLHttpRequest对象的属性和方法来与服务器端进行数据交互,然后通过DOM来解析处理XML文档和更新HTML页面的相关内容。图1AJAX工作原理流程1.创建XMLHttpRequest对象,向服务器端发送请求;XMLHttpRequest对象在大部分浏览器上已经实现而且拥有一个简单的接口,允许数据从客户端传递到服务端,但并不会打断用户当前的操作,使用XMLHttpRequest传送的数据可以是任何格式。2.服务器处理完请求后,调用回调函数;3.回调函数解析服务器端返回的处理结果,然后更新到页面所需部分。二、AJAX技术的特点AJAX主要的特点是为Web开发提供异步数据传输和交换方式,在不刷新页面的情况下与服务器进行业务处理。每一种技术的出现难免会存在一些缺点,AJAX技术也同样具有自己的优点和不足。(一)优点1.减轻服务器的负担。AJAX的原则是“按需获取”,最大程度的减少冗余请求。2.更新部分页面,减少响应时间。AJAX使用XMLHTTP对象发送请求并得到服务器响应,在不重新载入整个页面的情况下,用JavaScript操作DOM最终更新页面,更新相应部分的内容时间非常短。3.客户端能完成部分服务器端的功能。利用客户端闲置的能力来处理,减轻服务器和网路的负担,减少响应时间。4.将Web中的应用与页面显示分离。(二)不足1.浏览器对AJAX的兼容性。AJAX大量使用了JavaScript等相关技术,能否执行取决于浏览器的支持。虽然很多浏览器支持AJAX,但提供XMLHttpRequest的方式不尽相同,所以使用AJAX的程序必须针对各个浏览器进行测试。2.AJAX只是局部更新页面内容,并没有更新整个页面。网页的后退功能是失效的,这就导致用户不清楚现在的数据是否已经更新。3.Ajax对流媒体的支持较弱。三、AJAX技术的应用AJAX技术的核心理念是用异步交互替代传统的同步交互。目前,AJAX应用最普遍的领域是GIS-Map方面,Google公司成功地将AJAX技术应用到GoogleMap中,用户使用GoogleMap浏览地图时,首先显示的只是局部的地区,如果要查看全图,需要对地图进行放大操作;如果想看其余的地方,需要对地图进行平移。由于应用了AJAX技术,使得地图每次都在原有数据的基础上以增量方式显示。这样用户不用等待页面刷新就能看到其他的区域了。四、应用实例考试系统中数据的异步处理AJAX技术应用在考试系统中可以较好地解决在考试过程中出现的响应不及时、页面刷新慢等问题,实现按需存取,自动交互与响应请求,减少页面的重复加载。为了避免学生在考试结束后一起提交时产生网络堵塞问题,利用AJAX技术,在考生做题的过程中,对考生的答案进行实时保存。通过XMLHttpRequest对象在后台自动向服务器发送数据,当考生改变选择答案时进行实时跟踪,进行数据覆盖。functionsaveAnswer(){varanswers=document.getElementByld("answer");//获取考生的答题数据XHR=createXMLHttpRequest();//创建XMLHttpRequest对象XHR.open("POST","saveAnswer.do",true);//与服务器建立连接XHR.onreadystatechange=processResponse;//指定响应函数XHR.send("answers="+answers);//发送请求setTimeout("saveAnswer()",60000);//定时保存答案}functionprocessResponse()//处理返回信息函数{if(XHR.readyState==4&&XHR.status==200)//判断对象状态和信息是否成功返回document.getElementById("savelnfo").value=XHR.responseText;elsewindow.alert("答案保存失败。");}这样处理的好处就是学生最后提交的时候,不会给服务器造成沉重的负担,因为在此之前学生的数据就已经实时的提交到数据库里了。五、结语从以上实例可以看出利用AJAX来做web开发,能够减少页面的重载次数,降低响应时间;客户端还能处理一些服务端的任务,减轻服务器的负担。随着web应用的发展,AJAX技术的不断更新,用户将会得到更好的体验。参考文献1陈锋敏,罗田,李颖智.程序员突击——Ajax原理与系统开发.北京清华大学出版社,20092王星,潘郁.基于AJAX技术的Web模型在网站开发中的应用研究J.微计算机信息,20063刘志忠.ASP.NETAJAX编程参考手册.北京清华大学出版社,20094周雯.Ajax,RIA与Web开发程序员教程北京电子工业出版社,2010.5JesseJamesGarrett.AjaxANewApproachtoWebApplicationsTheXML