移动互联网-Ajax技术

《移动互联网-Ajax技术》由会员分享，可在线阅读，更多相关《移动互联网-Ajax技术（18页珍藏版）》请在金锄头文库上搜索。

1、Ajax技术与移动互联网付长冬 北京邮电大学14.1-Ajax技术Ajax定义wAjax不是一种技术。实际上，Ajax由几种蓬 勃发展的技术以新的强大方式组合而成。 wAjax包含：基于XHTML和CSS标准的表示； 使用Document Object Model(DOM)进行动态显 示和交互； 使用XMLHttpRequest与Web服务器进行异步通 信； 使用JavaScript绑定一切(CSSL)。 Ajax=Asynchronous JavaScript + XML 24.1-Ajax技术为什么需要Ajax？页面A 页面B正常情况下，页面A到页面B需要用户主动刷新，页面问题Ajax技术

2、主动的存取数据，部分页面自动更新，后台异步执行。34.1-Ajax技术Ajax工作原理当服务器正在处理自己的事情的时候，用户在做什么?没错，等待。每一个动作 ，用户都要等待极差的用户体验。 XHTMLHTTP请求中存在具体的格式要求44.1-Ajax技术Ajax工作原理用户等待具体算法54.1-Ajax技术Ajax工作原理w在会话的开始，浏览器加载了一个Ajax引擎-采用JavaScript编写并且 通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通 讯。Ajax引擎允许用异步的方式实现用户与程序的交互-不用等待Web 服务器的通讯。 w通常要产生一个HTTP请求的用户动作现

3、在通过JavaScript调用Ajax引擎 来代替. 任何用户动作的响应不再要求直接传到服务器-例如简单的数据 校验，内存中的数据编辑，甚至一些页面导航-引擎自己就可以处理它. 如果引擎需要从服务器取数据来响应用户动作-假设它提交需要处理的 数据，载入另外的界面代码，或者接收新的数据-引擎让这些工作异步 进行，通常使用XML, 不用再担误用户界面的交互。 wAjax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之， XmlHttpRequest使您可以使用JavaScript向服务器提出

4、请求并处理响应 ，而不阻塞用户。 Ajax最大的作用：提升用户体验，这是Web2.0/Mobile2.0应用至关重要64.1-Ajax技术Ajax技术五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了 关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟上最新的技术 时尚，那您的目标就是 Ajax。 Ajax技术Web表单Web服务器JavascriptXmlHttpRequest74.1-Ajax技术Ajax技术wJavaScript wXMLHttpRequest wCSSCSS提供了从内容中分离应用样式和设计的机制。虽然CSS在AJAX 应

5、用中扮演至关重要的角色，但它也是构建创建跨浏览器应用的一 大阻碍，因为不同的浏览器厂商支持各种不同的CSS级别。 wDHTMLDHTML 或 Dynamic HTML，用于动态更新表单。我们将使用 div、 span 和其他动态 HTML 元素来标记 HTML。 wDOM文档对象模型 DOM 用于(通过 Javascript 代码)处理 HTML 结构和( 某些情况下)服务器返回的 XML。 JavaScript编程的最大问题来自不同的浏览器对各种技术和标准的支持。构建一个运 行在不同浏览器（如IE和火狐）是一个困难的任务。 84.1-Ajax技术Ajax-结构关系HTTPXMLHTTPDOM

6、XMLHTML/XHT ML/CSSJavascript语言- CSSLXML serverHttp Server94.1-Ajax技术Ajax实例分析wtryif( window.ActiveXObject ) /IEfor( var i = 5; i; i- )tryif( i = 2 )xmlhttp_request = new ActiveXObject( “Microsoft.XMLHTTP” );elsexmlhttp_request = new ActiveXObject( “Msxml2.XMLHTTP.” + i + “.0” );xmlhttp_request.setReq

7、uestHeader(“Content-Type”,“text/xml”);xmlhttp_request.setRequestHeader(“Content-Type”,“gb2312”);break;catch(e)xmlhttp_request = false;else if( window.XMLHttpRequest ) /Firefox，Mozillaxmlhttp_request = new XMLHttpRequest();if (xmlhttp_request.overrideMimeType) xmlhttp_request.overrideMimeType(text/xm

8、l);catch(e)xmlhttp_request = false; 104.1-Ajax技术Ajax实例分析w用JavaScript来创建XMLHttpRequest 类向服务器发送一个HTTP请求后 ，接下来要决定当收到服务器的响应后，需要做什么。这需要告诉 HTTP请求对象用哪一个JavaScript函数处理这个响应。可以将对象的 onreadystatechange属性设置为要使用的JavaScript的函数名，如下所 示：xmlhttp_request.onreadystatechange =FunctionName; w在这个函数中。首先要检查请求的状态。只有当一个完整的服务器响

9、应 已经收到了，函数才可以处理该响应。XMLHttpRequest 提供了 readyState属性来对服务器响应进行判断。 if (http_request.readyState = 4) / 收到完整的服务器响应 else / 没有收到完整的服务器响应 w在检查完请求的状态值和响应的HTTP状态值后，就可以处理从服务器 得到的数据了。有两种方式可以得到这些数据： (1) 以文本字符串的方式返回服务器的响应(2) 以XMLDocument对象方式返回响应114.1-Ajax技术Ajax框架（DWR）w直接使用XmlHttpRequest创建异步请求非常麻烦。不仅 JavaScript代码冗长

10、，而且必须考虑服务器端为定位Ajax请 求到适当的服务所需做的工作，并将结果封送到浏览器。 w设计DWR的目的是要处理将Web页面安装到后端服务上所 需的所有信息管道。它是一个Java框架，可以很轻松地将它 插入到Web应用程序中，以便JavaScript代码可以调用服务 器上的服务。它甚至直接与Spring Framework集成，从而允 许用户直接向Web客户机公开bean。 wDWR真正的巧妙之处是，在用户配置了要向客户机公开的 服务之后，它使用反射来生成JavaScript对象，以便Web页 面能够使用这些对象来访问该服务。然后Web页面只需接合 到生成的JavaScript对象，就像

11、它们是直接使用服务一样； DWR无缝地处理所有有关Ajax和请求定位的琐碎细节。 124.1-Ajax技术Ajax框架（DWR）134.1-Ajax技术Ajax框架（DWR）wDWR(Direct Web Remoting)是一个WEB远程调用框架 w利用DWR可以在客户端利用JavaScript直接调用服务端的 Java方法并返回值给JavaScript就好像直接本地客户端调用 一样(DWR根据Java类来动态生成JavaScrip代码). w它包含两个主要的部分:允许JavaScript从WEB服务器上一个 遵循了AJAX原则的Servlet(小应用程序)中获取数据.另外一 方面一个Jav

12、aScript库可以帮助网站开发人员轻松地利用获 取的数据来动态改变网页的内容. w这个从JAVA到JavaScript的远程功能方法给DWR的用户带 来非常像传统的RPC机制,就像RMI或者SOAP一样,而且拥有 运行在WEB上但是不需要浏览器插件的好处.144.1-Ajax技术Ajax框架（DWR）现在很多人普遍采用的AJAX DWR框架： IE DWR Spring Ioc IE浏览 器XmlHttpRequestDWRSpringBeanwMicrosoft发明XMLHTTP绝对是天才的创意，XMLHTTP之所以成功根本原因在 于它和HTML的良好交互性，而且使用JS操纵。 154.1

13、-Ajax技术Ajax+MashupwMashup 是一个 Web 应用程序，它集成了来自多个源的内 容并将其交付到一个页面中进行显示。服务器向每个内容源 发出请求，解析收到的信息，并将结果综合到一个页面中发 给浏览器，如 图 1 所示。 wAsynchronous JavaScript + XML（Ajax）应用程序 使 Web 页面能从服务器获取内容并使用 JavaScript 代码异步地在 适当位置进行自我更新，如 图 2 所示。用户就可以与富用 户界面 (UI) 进行交互而无需重新加载整个页面。 w服务器向浏览器发送初始页面，后者回调服务器以获取更新 后的内容。异步的 JavaScri

14、pt 代码调用频繁使用 XML 来编 码数据；但是，其他的数据格式则更通用，如 JavaScript Object Notation (JSON)、HTML 和分隔文本。164.1-Ajax技术Ajax+Mashup174.1-Ajax技术Ajax与RIARIA技术并不能够取代AJAX技术，而事实 上我们还没有发挥出HTML的全部潜力本质问题：互联网传播的主要载体是什么？文本？图片？ 视频？还是其他的什么？ -文本HTML的诞生是适应于互联网大量文本内容的传播的，只 要你的web应用还是以文本为主，就必须以HTML为主。 如果大量操纵HTML，最趁手的工具就是JavaScript。现在开发AJAX的 确有其痛苦之处 ，跨浏览器兼容 性是最让人头疼 的。但是我们应 该清楚，只要 web应该是基于 文本形式这一点 不改变，那么 HTML/JS的地位 就不会改变，那 么AJAX无论如何 都是web开发之 首选技术 SilverLight-RIA，存在其自身的问题 184.1-Ajax技术