Ajax技术与移动互联网.ppt

文档介绍：Ajax技术与移动互联网
北京邮电大学
0
-Ajax技术
Ajax定义
Ajax不是一种技术。实际上,Ajax由几种蓬勃发展的技术以新的强大方式组合而成。
Ajax包含:
基于XHTML和CSS标准的表示;
使用Document Object Model(DOM)进行动态显示和交互;
使用XMLHttpRequest与Web服务器进行异步通信;
使用JavaScript绑定一切(CSSL)。
Ajax=Asynchronous JavaScript + XML
1
-Ajax技术
为什么需要Ajax?
页面A
页面B
正常情况下,页面A到页面B需要用户主动刷新,页面问题
Ajax技术
主动的存取数据,部分页面自动更新,后台异步执行。
2
-Ajax技术
Ajax工作原理
当服务器正在处理自己的事情的时候,用户在做什么?没错,等待。每一个动作,用户都要等待—极差的用户体验。
XHTML
HTTP请求中存在具体的格式要求
3
-Ajax技术
Ajax工作原理
用户等待
具体算法
4
-Ajax技术
Ajax工作原理
在会话的开始,浏览器加载了一个Ajax引擎---采用JavaScript编写并且通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通讯。Ajax引擎允许用异步的方式实现用户与程序的交互--不用等待Web服务器的通讯。
通常要产生一个HTTP请求的用户动作现在通过JavaScript调用Ajax引擎来代替. 任何用户动作的响应不再要求直接传到服务器---例如简单的数据校验,内存中的数据编辑,甚至一些页面导航---引擎自己就可以处理它. 如果引擎需要从服务器取数据来响应用户动作---假设它提交需要处理的数据,载入另外的界面代码,或者接收新的数据---引擎让这些工作异步进行,通常使用XML, 不用再担误用户界面的交互。
Ajax的核心是JavaScript对象XmlHttpRequest。 Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。
Ajax最大的作用:提升用户体验,
5
-Ajax技术
Ajax技术
五年前,如果不知道 XML,您就是一只无人重视的丑小鸭。十八个月前,Ruby 成了关注的中心,不知道 Ruby 的程序员只能坐冷板凳了。今天,如果想跟上最新的技术时尚,那您的目标就是 Ajax。
Ajax技术
Web表单
Web服务器
Javascript
XmlHttpRequest
6
-Ajax技术
Ajax技术
JavaScript
XMLHttpRequest
CSS
CSS提供了从内容中分离应用样式和设计的机制。虽然CSS在AJAX应用中扮演至关重要的角色,但它也是构建创建跨浏览器应用的一大阻碍,因为不同的浏览器厂商支持各种不同的CSS级别。
DHTML
DHTML 或 Dynamic HTML,用于动态更新表单。我们将使用 div、span 和其他动态 HTML 元素来标记 HTML。
DOM
文档对象模型 DOM 用于(通过 Javascript 代码)处理 HTML 结构和(某些情况下)服务器返回的 XML。
JavaScript编程的最大问题来自不同的浏览器对各种技术和标准的支持。构建一个运行在不同浏览器(如IE和火狐)是一个困难的任务。
7
-Ajax技术
Ajax-结构关系
HTTP
XMLHTTP
DOM
XML
HTML/XHTML/CSS
Javascript
语言--CSSL
XML server
Http Server
8
-Ajax技术
Ajax实例分析
try{ if( ){ //IE for( var i = 5; i; i-- ){ try{ if( i == 2 ){ xmlhttp_request = new ActiveXObject( “”); }else{ xmlhttp_request = new ActiveXObject( “.”+ i + “.0”); } (“Content-Type”,“text/xml”); (“Content-Type”,“gb2