AJAX技术与应用.doc

此表由评阅人填写评价项目满分得分总分教师签字论点、论据40写作规范性30论述逻辑性30河南理工大学河南理工大学计算机学院课程论文课程名称： JAVA EE 编程技术（二）论文题目： AJAX技术及应用学生姓名 _田 迎 迎_专业年级 _计软 11-1_ _学 号 _411120040105_2012年 11 月河南理工大学计算机学院Java EE编程技术（二） 课程论文Ajax技术及应用关键字：Ajax，JavaScript，DOM等相关技术。Ajax论述Ajax是web2.0的核心之一，它采用异步模式，可以开发出基于浏览器的具有告用户交互性的web应用，改变了传统web应用的交互模式，从而可以构建出更为动态、影响更灵敏与用户体验更好的web应用程序。Ajax全称为“Asynchronous javascript and XML”（异步javascript与XML），是一种创建交互式网页应用的网页开发技术。Ajax运用了如下的一些技术：HTML：用于建立web应用界面；javascript：ajax技术的核心，帮助改进与服务器应用程序的通信；DHTML（Dynamic HTML）：用于动态更新表单。通常使用div、span与其他动态HTML元素来标记HTML；文档对象模型DOM：用于（通过javascript代码）处理HTML结构。Ajax相关技术1、XMLHttpRequest简介XMLHttpRequest，是我们得以实现异步通讯的根本。最早在IE5中以activeX组件实现；最近，mozilla 1.0与safari 1.2中实现为本地对象。XMLHttpRequest虽然不是w3c标准，但却得到了firefox、safari、opera、konqueror、IE等绝大多数浏览器的支持。这就使得ajax有了今天如火如荼的发展。用XMLHttpRequest进行异步通讯，首先必须用javascript创建一个XMLHttpRequest对象实例。创建XMLHttpRequest对象实例的代码清单如下所示：var xmlHttp = false; try xmlHttp = new ActiveXObject(Msxml2.XMLHTTP); catch (e) try xmlHttp = new ActiveXObject(Microsoft.XMLHTTP); catch (e2) xmlHttp = false; if (!xmlHttp & typeof XMLHttpRequest != undefined) xmlHttp = new XMLHttpRequest(); 在创建XMLHttpRequest对象之后，就可以结合javascript代码完成以下工作：丛web表单中获取数据-打开到服务器的链接-设置服务器处理完成后的响应函数，这也是ajax工作的一般流程。可以看出，创建XMLHttpRequest对象相当容易。首先，声明一个全局变量xmlHttp用来保存即将创建的XMLHttpRequest对象的引用；然后，在create XMLHttpRequest()方法中完成具体创建工作。因为IE与其他浏览器对XMLHttpRequest对象的实现方法不同，因此在创建时，通过一个分支语句进行判断。如果window.ActiveXObject调用返回true，则证明IE浏览器，那么就通过传递Microsoft.XMLHTTP给ActiveXObject()来创建XMLHttpRequest对象，否则就把XMLHttpRequest实现为本地javascript对象。XMLHttpRequest对象在不同浏览器上的实现是兼容的，所以可以用同样的方法访问XMLHttpRequest的方法与属性。表 1 标准XMLHttpRequest方法方 法说 明Abort()getAllResponseHeader()getAllResponseHeader(“header”)open(“method”,”url”)send(content)setRequestHeader(“header”,”value”)停止当前请求把http请求的所有响应头部作为键值返回返回指定收不的串值建立对服务器的调用向服务器发送请求把指定收不设为所提供的值表 2 标准XMLHttpRequest的属性属 性说 明OnreadystatechangeReadystateResponseTextResponseXMLStatusStatusText每个状态改变都会触发这个事件处理器请求的状态：0-未初始化，1-正在加载，2-已加载，3-交互中，4-完成服务器响应表示为一个文本字符串值服务器的响应，表示为一个XML服务器的HTTP状态码HTTP状态码的相应文本2、利用XMLHttpRequest对象发送简单请求创建了XMLHttpRequest对象，并了解了XMLHttpRequest对象的方法与属性后，让我们来看看怎样利用XMLHttpRequest对象发送简单请求。利用XMLHttpRequest对象发送简单请求的基本步骤如下：1）创建XMLHttpRequest对象实例。2）设定XMLHttpRequest对象的回调函数，利用Onreadystatechange属性。3）设定请求属性：设定HTTP方法（GET或POST）；设定目标url。利用open()方法。4）将请求发送给服务器。利用send()方法。3、利用DOM对服务器响应进行处理前面已经设置了回调函数，回调函数正是用来处理服务器相应信息的。但是，别忘了我们的最终目的：解决页面完全刷新与缺乏交互性的问题。在服务器对我们的请求信息作出响应后，我们就得实现页面的无缝更新（就是无闪烁的更新信息）。要实现这一点，那么就不得不提到DOM了。DOM（Document Object Model）,文档对象模型，是以面向对象方式描述页面文档的对象模型。DOM中定义了，与平台与语言无关的，用来表示与修改文档所需的对象、以及这些对象的属性与方法。通过DOM我们可以把页面上的数据与结构抽象成一个树形表示，进而可以通过DOM中定义的属性与方法对文档进行操作，如遍历，编辑等。这样，服务器相应信息就可以通过DOM的方法与属性，动态的更新到叶明的响应节点。从而使用户感觉不到刷新过程的存在，提高了交互性。传统web应用与Ajax的应用的比较在传统的web应用模型下，客户机（浏览器或者本地机器上运行的代码）向服务器发出请求。该请求是同步的，客户机等待服务器的响应。当客户机等待的时候，会用某种形式通知您正在处理：a、沙漏（特别是windows上）b、旋转皮球（通常在Mac机器上）c、应用程序基本上冻结了，然后过一段时间光标变化了这正是传统web应用程序让人感到笨拙或缓慢的原因-缺乏真正的交互性。按下按钮时，应用程序实际上变得不能使用，直到刚刚触发的请求得到响应。如果请求需要大量服务器处理，那么等待的时间可能很长。Ajax应用通过在用户与服务器指甲引入一个媒介（ajax engine）来异步发送请求，消除了传统的发送请求-等待-发送请求-等待的特性，极大的提高了用户体验。异步请求不能等待服务器响应。发送请求后应用程序继续运行。用户任然可以再web表单中输入数据，甚至离开表单。没有旋转的皮球或者沙漏，应用下程序也没有明显的冻结。服务器悄悄地响应请求，完成后告诉原来的请求者工作已经结束。结果是，应用程序感觉不那么迟钝或者缓慢，而是响应迅速、交互性强、感觉快多了。处理服务器响应请求发出后，用户可以继续使用web表单（同时服务器在处理请求）。而将服务器完成了请求处理，服务器查看onreadystatechange属性确定要调用的方法。除此之外，可以将应用程序看做其他应用程序一样，无论是否异步。换句话说，不一定要采取特殊的动作编写响应服务器的方法，只需要改变表单或其他的页面结构，让用户访问另一个URL或者做响应服务器需要的任何事情。处理函数（仅弹出简单的警告）：Function updatepage() Alert(“server is done”);运行以上代码，根据浏览器的不同，在表单停止弹出警告之前会看到两次、三次甚至四次警告。原因在于还没有考虑HTTP就绪状态，这是请求/响应循环中的一个重要部分。HTTP就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。他还可以帮助确定读取服务器提供的响应文本或数据是否安全。在ajax应用程序中需要了解五种就绪状态：0：请求没有发出（在调用open()之前）1：请求已经建立但还没有发出（调用在send()之前）2：请求已经发出正在处理之中（这里通常可以从相应得到内容头部）3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应4：响应已经完成，可以访问服务器响应并使用它链接web表单最后使用javascript事件函数触发ajax调用：输入框的onblur属性指定的函数当焦点离开时触发，ajax开始运行了。结果就会看到填完邮编后焦点移开时，标点的城市与省份信息突然更新了！Ajax新技术借web应用 催生微软在线版office特别是以google maps为代表的一些高界面的web服务的推出，与传统的web相比，能够更明显的向用户提供更明显的向用户提供一个更好的体验，对ajax技术祈祷了大力宣扬的作用。目前，数十家初创厂商正在利用它开发包括从字处理软件到项目管理软件在内的桌面软件的在线版本。然而，它们远不是简单地在互联网上复制Office，有时被称为Web 2.0版的许多这些Web应用软件重点都是通过网络发布与共享信息的。用于JavaScript语言以及其它Web标准的基础的AJAX技术是由微软公司在1990年代发明的，但据分析人士与业界组织表示，然而，直到最近大约是在“AJAX”这个词汇出现的二月份左右才有大量的开发人员与企业抓住了AJAX带来的这一进的机会。从Google公司今年对AJAX的使用帮助已经证明了Web应用软件在外观与风格上是怎样与那些看得见、摸得着的现有的桌面应用软件试比高低的。而且Web标准在浏览器中的进一步得到的广泛的采用已经给了开发人员一些保证：AJAX应用软件将运行于大多数的PC上。据Burton集团的分析师理查德表示，很多年以来，使用Flash与Flex等多媒体工具开发的交互式网页的存在了，这些所谓的“富互联网应用软件”工具将继续适用于复杂的任务，然而，AJAX却能够适合完成诸如在现有的Web网站上增添交互性等简单任务的需求。构造一个更好的Web的能力正在为托管服务扫除道路到的障碍，这是从传统的桌面软件模式的一次转移。微软公司正在积极地转向基于Web的应用软件服务。微软公司在11月份以软件服务为中心重组了其业务部门，并推出了L服务。包括Windows Live Mail(Hotmail)在内的许多L服务都依赖一个使用了AJAX的前端。Google公司已经使其部分员工从事OpenOffice开放源代码项目，这将会使人们猜测它将提供托管版OpenOffice。然而微软公司并没有公布它将要提供完全托管版的Office。据微软公司于上个月宣布，它将推出旨小型企业的Office Live服务，为客户记帐或管理用户，但这一服务将补充而非取代Office。据微软公司表示，Office Live服务将有广告支持版本与订购版本。 另外一家开发基于Web的Office风格应用软件的初创企业是SilverofficegOffice的开发商，它提供文字处理与打印功能，并打算即将推出在线电子表格