Ajax技术与移动互联网.ppt

Ajax技术与移动互联网,付长冬 北京邮电大学,4.1-Ajax技术,1,Ajax定义,Ajax不是一种技术。实际上，Ajax由几种蓬勃发展的技术以新的强大方式组合而成。 Ajax包含： 基于XHTML和CSS标准的表示； 使用Document Object Model(DOM)进行动态显示和交互； 使用XMLHttpRequest与Web服务器进行异步通信； 使用JavaScript绑定一切(CSSL)。,Ajax=Asynchronous JavaScript + XML,4.1-Ajax技术,2,为什么需要Ajax？,页面A,页面B,正常情况下，页面A到页面B需要用户主动刷新，页面问题,Ajax技术,主动的存取数据，部分页面自动更新，后台异步执行。,4.1-Ajax技术,3,Ajax工作原理,当服务器正在处理自己的事情的时候，用户在做什么?没错，等待。每一个动作，用户都要等待极差的用户体验。,XHTML,HTTP请求中存在具体的格式要求,4.1-Ajax技术,4,Ajax工作原理,用户等待,具体算法,4.1-Ajax技术,5,Ajax工作原理,在会话的开始，浏览器加载了一个Ajax引擎-采用JavaScript编写并且通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通讯。Ajax引擎允许用异步的方式实现用户与程序的交互-不用等待Web服务器的通讯。 通常要产生一个HTTP请求的用户动作现在通过JavaScript调用Ajax引擎来代替. 任何用户动作的响应不再要求直接传到服务器-例如简单的数据校验，内存中的数据编辑，甚至一些页面导航-引擎自己就可以处理它. 如果引擎需要从服务器取数据来响应用户动作-假设它提交需要处理的数据，载入另外的界面代码，或者接收新的数据-引擎让这些工作异步进行，通常使用XML, 不用再担误用户界面的交互。 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。,Ajax最大的作用：提升用户体验，这是Web2.0/Mobile2.0应用至关重要,4.1-Ajax技术,6,Ajax技术,五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟上最新的技术时尚，那您的目标就是 Ajax。,Ajax技术,Web表单,Web服务器,Javascript,XmlHttpRequest,4.1-Ajax技术,7,Ajax技术,JavaScript XMLHttpRequest CSS CSS提供了从内容中分离应用样式和设计的机制。虽然CSS在AJAX应用中扮演至关重要的角色，但它也是构建创建跨浏览器应用的一大阻碍，因为不同的浏览器厂商支持各种不同的CSS级别。 DHTML DHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。 DOM 文档对象模型 DOM 用于(通过 Javascript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。,JavaScript编程的最大问题来自不同的浏览器对各种技术和标准的支持。构建一个运行在不同浏览器（如IE和火狐）是一个困难的任务。,4.1-Ajax技术,8,Ajax-结构关系,HTTP,XMLHTTP,DOM,XML,HTML/XHTML/CSS,Javascript 语言-CSSL,XML server Http Server,4.1-Ajax技术,9,Ajax实例分析,try if( window.ActiveXObject ) /IE for( var i = 5; i; i- ) try if( i = 2 ) xmlhttp_request = new ActiveXObject( “Microsoft.XMLHTTP” ); else xmlhttp_request = new ActiveXObject( “Msxml2.XMLHTTP.” + i + “.0” ); xmlhttp_request.setRequestHeader(“Content-Type”,“text/xml”); xmlhttp_request.setRequestHeader(“Content-Type”,“gb2312”); break; catch(e) xmlhttp_request = false; else if( window.XMLHttpRequest ) /Firefox，Mozilla xmlhttp_request = new XMLHttpRequest(); if (xmlhttp_request.overrideMimeType) xmlhttp_request.overrideMimeType(text/xml); catch(e) xmlhttp_request = false; ,4.1-Ajax技术,10,Ajax实例分析,用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的onreadystatechange属性设置为要使用的JavaScript的函数名，如下所示： xmlhttp_request.onreadystatechange =FunctionName; 在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响应已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了readyState属性来对服务器响应进行判断。 if (http_request.readyState = 4) / 收到完整的服务器响应 else / 没有收到完整的服务器响应 在检查完请求的状态值和响应的HTTP状态值后，就可以处理从服务器得到的数据了。有两种方式可以得到这些数据： (1) 以文本字符串的方式返回服务器的响应 (2) 以XMLDocument对象方式返回响应,4.1-Ajax技术,11,Ajax框架（DWR）,直接使用XmlHttpRequest创建异步请求非常麻烦。不仅JavaScript代码冗长，而且必须考虑服务器端为定位Ajax请求到适当的服务所需做的工作，并将结果封送到浏览器。 设计DWR的目的是要处理将Web页面安装到后端服务上所需的所有信息管道。它是一个Java框架，可以很轻松地将它插入到Web应用程序中，以便JavaScript代码可以调用服务器上的服务。它甚至直接与Spring Framework集成，从而允许用户直接向Web客户机公开bean。 DWR真正的巧妙之处是，在用户配置了要向客户机公开的服务之后，它使用反射来生成JavaScript对象，以便Web页面能够使用这些对象来访问该服务。然后Web页面只需接合到生成的JavaScript对象，就像它们是直接使用服务一样；DWR无缝地处理所有有关Ajax和请求定位的琐碎细节。,4.1-Ajax技术,12,Ajax框架（DWR）,4.1-Ajax技术,13,Ajax框架（DWR）,DWR(Direct Web Remoting)是一个WEB远程调用框架 利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码). 它包含两个主要的部分:允许JavaScript从WEB服务器上一个遵循了AJAX原则的Servlet(小应用程序)中获取数据.另外一方面一个JavaScript库可以帮助网站开发人员轻松地利用获取的数据来动态改变网页的内容. 这个从JAVA到JavaScript的远程功能方法给DWR的用户带来非常像传统的RPC机制,就像RMI或者SOAP一样,而且拥有运行在WEB上但是不需要浏览器插件的好处.,4.1-Ajax技术,14,Ajax框架（DWR）,现在很多人普遍采用的AJAX DWR框架： IE DWR Spring Ioc,IE浏览器,XmlHttpRequest,DWR,Spring Bean,Microsoft发明XMLHTTP绝对是天才的创意，XMLHTTP之所以成功根本原因在于它和HTML的良好交互性，而且使用JS操纵。,4.1-Ajax技术,15,Ajax+Mashup,Mashup 是一个 Web 应用程序，它集成了来自多个源的内容并将其交付到一个页面中进行显示。服务器向每个内容源发出请求，解析收到的信息，并将结果综合到一个页面中发给浏览器，如 图 1 所示。 Asynchronous JavaScript + XML（Ajax）应用程序 使 Web 页面能从服务器获取内容并使用 JavaScript 代码异步地在适当位置进行自我更新，如 图 2 所示。用户就可以与富用户界面 (UI) 进行交互而无需重新加载整个页面。 服务器向浏览器发送初始页面，后者回调服务器以获取更新后的内容。异步的 JavaScript 代码调用频繁使用 XML 来编码数据；但是，其他的数据格式则更通用，如 JavaScript Object Notation (JSON)、HTML 和分隔文本。,4.1-Ajax技术,16,Ajax+Mashup,4.1-Ajax技术,17,Ajax与RIA,RIA技术并不能够取代AJAX技术，而事实上我们还没有发挥出HTML的全部潜力,本质问题：互联网传播的主要载体是什么？文本？图片？视频？还是其他的什么？