Ajax技术学习总结.docx

Ajax技术原理总结院系：软件学院专业：软件工程 12-01指导教师：赵晓君姓名：李亚峰学号：521213460119摘要Ajax即“Asynchronous Javascript And XML（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，也是一种用于创建快速动态网页的技术,它通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。确切的说Ajax不是一种特定技术，而是一种技巧，这种技巧是以JavaScript为粘着剂综合XHTML、CSS、DOM、XML、XSTL、XMLRequest等已存在的Web开发技术而形成的协作开发平台。这个平台主要是链接传统的客户端和Web服务器的异步数据传输。AbstractAjax namely asynchronous JavaScript and XML (asynchronous JavaScript and XML), is refers to a kind of creating interactive web applications, web development technology, is a kind of used to create a fast dynamic web page technology, through a small amount of data exchange in the background with the server, AJAX can be made to realize asynchronous update page. This means that the page can be updated without loading the entire page. AJAX = asynchronous JavaScript and XML (standard generic markup language subset). AJAX is not a new programming language, but a technology for creating faster and more interactive Web applications.The exact AJAX is not a particular technology, but a skill, this skill is web development technology in JavaScript for adhesive XHTML, CSS, DOM, XML, xstl, XMLRequest etc. existing and the formation of collaborative development platform. This platform is mainly linked to the traditional client and Web server asynchronous data transfer.一、 Ajax技术背景及发展历程众所周知，任何一项技术的发展都不可能像孙悟空一样“砰”地一声从石头里面蹦出来，Ajax也不例外。Ajax是伴随着web技术的发展而产生的，Ajax的产生也带来了由web1.0向2.0的转变。可以说ajax是为了解决传统的web应用当中等待-响应-等待“的弊端而创建的一种技术。下面我来介绍一下Ajax技术的发展历程：动态网页第一阶段：服务器端CGI动态网页第二阶段：客户端Applet客户端编程语言：JavaScript和VBScript服务器端动态网页技术的繁荣让客户端有声有色DHTML的革新XML及其衍生语言Ajax概念和技术的出现不可否认，ajax技术的流行得益于google的大力推广，正是由于google earth、google suggest以及gmail等对ajax技术的广泛应用，催生了ajax的流行。而这也让微软感到无比的尴尬，因为早在97年，微软便已经发明了ajax中的关键技术，并且在99年IE5推出之时，它便开始支持XmlHttpRequest对象，并且微软之前已经开始在它的一些产品中应用ajax，比如说MSDN网站菜单中的一些应用。遗憾的是，不知道出于什么想法，当时微软发明了ajax的核心技术之后，并没有看到它的潜力而加以发展和推广，而是将它搁置起来。对于这一点来说，我个人是觉得非常奇怪的，因为以微软的资源和它的战略眼光来说，应该不会看不到ajax技术的前景，唯一的解释也许就是因为当时它的主要竞争对手Netscape的消失反而使它变得麻痹和迟钝，毕竟巨人也有打盹的时候，比如IBM曾经在对微软战略上的失误。正是这一次的失误，成就了它现在的竞争对手google在ajax方面的领先地位，而事实上google目前在ajax技术方面的领先是微软所无法达到的，这一点在后面我讲述ajax缺陷的时候也会提到。现在微软也意识到了这个问题，因此它也开始在ajax领域奋起直追，比如说推出它自己的ajax框架atlas，并且在.NET2.0也提供了一个用来实现异步回调的接口，即ICallBack接口。那么微软为什么对自己在ajax方面的落后如此紧张呢？现在就让我们来分析一下ajax技术后面隐藏的深刻意义。二、Ajax技术的意义以及优缺点分析我们在平时的开发中都多多少少的接触或者应用到了ajax，谈到ajax技术的意义，我们关注得最多的毫无疑问是提升用户的体验。但是，如果我们结合将来电脑和互联网的发展趋势，我们会发现ajax技术在某些方面正好代表了这种趋势。为什么这样说呢？我们知道，自从电脑出现以来，一直是桌面软件占据着绝对主导的地位，但是互联网的出现和成功使这一切开始发生着微妙的变化。相当一部分的人都相信，迟早有一天，数据和电脑软件将会从桌面转移到互联网。也就是说，将来的电脑有可能抛弃笨重的硬盘，而直接从互联网来获取数据和服务，我记得我念大学的时候，有位教授给我们上课的时候，曾经设想过这样一种情景，也许在将来的电脑桌面上，没有任何多余的软件和程序，而仅仅只有一个IE，虽然现在看起来我们距离这一天还很遥远，并且这其中还有很多的问题需要解决，但是我觉得这个并非梦想，而是迟早将实现的现实。那么，这其中的主要问题就是互联网的连接不稳定，谁也不愿意看着自己的电脑从服务器一点一滴的下载数据，那么，ajax是不是解决了这个问题呢，说实话，与其说ajax解决了这个问题，倒不如 它只是掩盖了这个问题，它只是在服务器和客户端之间充当了一个缓冲器，让用户误以为服务没有中断。精确的说，ajax并不能提高从服务器端下载数据的速度，而只是使这个等待不那么令人沮丧。但是正是这一点就足以产生巨大的影响和震动，它实际上也对桌面软件产生了巨大的冲击。这一点我用一个例子来说明，我们可以比较一下Outlook Express和Gmail，前者是典型的桌面软件，后者是ajax所实现的B/S模式，实际上后者目前已经在慢慢取代前者了，Gmail在收发邮件的时候已经和Outlook Express的功能几乎没有差别了，而且它不需要安装客户端程序。这就是为什么微软对ajax所带来的冲击有着如此的恐惧心理，并且在它前不久所进行的调查之中，将google看做他们未来十年内的主要竞争对手的主要原因之一。当然，这种变化也并不会将桌面软件全部淘汰，现有的浏览器还没有一个能像PhotoShop等桌面程序那样处理复杂的图像。但是我们也不能忽视它带来的影响和冲击。Ajax具有很多web应用无法比拟的优点，主要体现在以下几个方面。（1） 分离数据与呈现（2） 减轻服务器负担（3） 减少宽带消耗（4） 更好的用户体验（5） 市场认可度较高“金无赤足，人无完人”，强大的Ajax也由于先天原因，存在着一些缺点。（1） 用户习惯的改变（2） 浏览器的兼容性问题（3） 安全问题（4） 对流媒体的支持不足（5） 对搜索引擎不友好问题当然，Ajax技术拥有很强大的功能，能适应很多传统web应用无法很好完成的场景。（1） 表单驱动的交互传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用Ajax，在点击sunmit按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果，这里没有整个页面刷新的问题（2） 深层次的树的导航深层次的级联菜单（树）的遍历是一项非常复杂的任务，使用JavaScript来控制显示逻辑，使用Ajax延迟加载更深层次的数据可以有效的减轻服务器的负担。（3） 快速实现用户与用户之间的交流响应在众多人参与的交流讨论的场景下，最不爽的事情就是让用户一遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最快的速度显示出来，而把用户从分神的刷新中解脱出来，Ajax是最好的选择。（4） 类似投票、yes/no等场景对于类似这样的场景中，如果提交过程需要达到40秒，很多的用户就会直接忽略过去而不会参与，但是Ajax可以把时间控制在1秒之内，从而更多的用户会加入进来。（5） 对数据进行过滤和操作相关数据的场景对数据使用过滤器，按照时间排序，或者按照时间和名称排序，开关过滤器等等。任何要求具备很高交互性数据操纵的场合都应该用JavaScript，而不是用一系列的服务器请求来完成。在每次数据更新后，再对其进行查找和处理需要耗费较多的时间，而Ajax可以加速这个过程。（6） 普通的文本输入提示和自动完成的场景在文本框等输入表单中给予输入提示，或者自动完成，可以有效的改善用户体验，尤其是那些自动完成的数据可能来自于服务器端的场合，Ajax是很好的选择。Ajax不适用的场景（1） 部分简单的表单（2） 搜索（3） 替换大量的文本（4） 基本的导航（5） 对呈现的操纵三、 Ajax关键技术和流程Ajax并不是一种孤立的技术，它是由多种技术综合而成的，这些技术包括：JavaSvript、XHTML、CSS、DOM、XML、XSTL、XMLRequest等。DOM实现动态显示和交互，XML实现资料交换和处理，XMLRequest进行异步数据读取，JavaSvript用于绑定和处理所有数据。（1） JavaSvriptjavaScript 所处理的每一个对象都是属于一个类 (class)类里边定义了组成对象的数据、属性、方法（即是类里边的一些函数）等，使用类可以增加程序代码的复用性，这在一种程序语言中是很重要的，因为这样可以避免重复开发。（2） XMLRequestAjax的一个最大的特点是无需刷新页面便可向服务器传输或读写数据(又称无刷新更新页面),这一特点主要得益于XMLHTTP组件XMLHTTPRequest对象。这样就可以向再发桌面应用程序只同服务器进行数据层面的交换,而不用每次都刷新界面也不用每次将数据处理的工作提交给服务器来做,这样即减轻了服务器的负担又加快了响应速度、缩短了用户等候时间。对于大多数情况，XMLHttpRequest对象和，MS的XMLHTTP组件很相似,方法和属性也类似,只是有一小部分属性不支持（3） XMLXML是EXtensible Markup Language的缩写，XML是一种类似于HTML的标记语言，XML是用来描述数据的 (用来存放数据的)，XML的标记不是在XML中预定义的，你必须定义自己的标记，XML使用文档类型定义（DTD）或者模式（Schema）来描述数据 XML使用DTD或者Schema后就是自描述的语言。Ajax是为了解决传统的web应用当中等待-响应-等待“的弊端而创建的一种技术，其实质可以理解为：使用浏览器内置的一个对象(XmlHttpRequest)向服务器发送请求，服务器返回xml数据或者是文本数据给浏览器，然后再浏览器端，使用这些数据更新部分页面，整个过程，页面无任何的刷新。等待-响应-等待是指：比如注册用户填写完整个注册信息，然后提交，此时浏览器会将整个注册页面抛弃，等待服务器返回一个新的完整的页面。在等待过程中，用户不能够做其他操作，服务器生成新的页面发送给浏览器，浏览器需要从新解析这个页面生成相应的界面。它的流程如下：（1）Ajax引擎（即XmlHttpRequest对象），首先为该对象注册一个监听器（该监听器是一个事件处理函数，对状态改变事件（readyStatechange）迚行监听）。（2）当用户对GUI 做了某种操作（将产生对应的事件，如焦点失去事件等）。（3）一旦产生对应的事件，将触发事件处理代码。（4）在执行事件处理代码时，会调用Ajax引擎（XmlHttpRequest对象）（5）发送请求：Ajax引擎被调用后，将独自向服务器发送请求（独立亍浏览器外）继续其他操作：在Ajax引擎发送请求的同时，用户在浏览器还可以对GUI 继续做其他操作 该请求是异步请求（Ajax引擎发送请求时，没有打断用户的操作）。（6）服务器的web组件对请求迚行处理。（7）服务器可能会调用到数据库戒者处理业务逻辑的Java类。（8）服务器将处理结果响应给（只返回部分数据，可以是xml戒者文本）Ajax引擎。（9）监听器通过Ajax引擎获取响应数据（xml戒者文本）（10）监听器对GUI 中的数据迚行更新（局部更新，尤其是整个页面刷新）在整个过程中大部分是通过JS实现的，响应数据可能是xml，所以Ajax可以看做是多种技术的融合。具体步骤：（1） 获得XmlHttpRequest对象。 该对象由浏览器提供，但是该类型并没有标准化。ie和其它浏览器不同，其它浏览器都支持该类型，而ie不支持。function getXmlHttpRequest() var xhr = null; if(typeof XMLHttpRequest)!=undefined) xhr = new XMLHttpRequest(); else xhr = new ActiveXObject(Microsoft.XMLHttp); return xhr; （2） 使用XmlHttpRequest向服务器发请求 var xhr = getXmlHttpRequest(); /* open(请求方式,请求地址,同步/异步) * 请求方式: get/post * 请求地址：如果是get请求，请求参数添加到地址乊后。 * 比如 check_user.do?username=zs * 同步/异步:true表示异步。*/ xhr.open(get,check_user.do,true); /* 注册一个监听器(即当xhr 的状态发生改变产生了readystatechange 事件， * 该事件会由f1函数来处理。我们需要在f1函数里面获得服务器返回的数据， * 然后更新页面) */ xhr.onreadystatechange=f1; /* 只有调用send方法乊后，请求才会真正发送 */ xhr.send(null); （3） 发送post请求var xhr = getXmlHttpRequest(); xhr.open(post,check_username.do,true); /必须添加一个消息头content-type xhr.setRequestHeader(Content-Type,application/x-www-form-urlencoded); xhr.onreadystatechange=f1; xhr.send(username=zs);（4） 在服务器端处理请求（5） 在监听器中，处理服务器返回的响应是 xhr.onreadystatechange=function() /编写相应的处理代码 if(xhr.readyState = 4) /只有readyState等亍4,xhr 才完整地接收到了服务器返回的数据。 /获得文本数据 var