Ajax技术简介和案例分析.pptVIP

齐鲁学堂Ajax技术简介和案例分析 张英锋zhangyingfeng@ 研讨内容 Ajax原理与Web2.0 通过案例分析Ajax优缺点 Ajax常用开发技巧 与Ajax相关的常用JavaScript库分析 Ajax资源分享 Ajax原理与Web2.0 Ajax原理 推出背景 Ajax技术组成 Asynchronous JavaScript and XML 老技术新思路 使用XHTML与CSS的设计标准表现 使用DOM进行动态显示与交互 使用XML和XSLT 进行数据交换与操作 使用XMLHttpRequest进行异步数据传输 使用JavaScript将所有这些绑在一起 XMLHttpRequest 1999年IE5.0作为一个ActiveX对象形式引入了XMLHttpRequest对象 目的是实现通过后台获取数据 其他浏览器则把它作为window对象的属性 var XMLHttpRequestObject = false; if (window.XMLHttpRequest) { XMLHttpRequestObject = new XMLHttpRequest(); } else if (window.ActiveXObject) { XMLHttpRequestObject = new ActiveXObject(Microsoft.XMLHTTP); } function getData(dataSource, divID) { if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open(GET, dataSource); XMLHttpRequestObject.onreadystatechange = function() { if (XMLHttpRequestObject.readyState == 4 XMLHttpRequestObject.status == 200) { obj.innerHTML = XMLHttpRequestObject.responseText; } } XMLHttpRequestObject.send(null); } } ReadyState 传统请求响应方式 Ajax的方式 Ajax诞生背景 2001年网络泡沫破灭到2004年开始复苏 人们反思 哪些互联网公司最终活下来了？ 哪些活得最好？ 共同的特征是什么？ 炸弹1 Google在2004年4月发布Gmail 突破性的容量，1G 口碑式营销策略 打破传统的界面设计 开始研究分析Google的UI设计思想 长尾理论 2004年10月长尾理论The Long Tail发表 打破80/20理论 炸弹2 Google Map 2005年1月 在线地图的创新设计 无须安装任何客户端 数据、接口完全开放 Ajax概念提出 2005年1月Ajax名词诞生 交互设计专家Jesse James Garrett “Ajax: A New Approach to Web Applications” Web2.0概念提出 2005年9月Web2.0诞生 Tim OReilly What Is Web 2.0:Design Patterns and Business Models for the Next Generation of Software 典型Web2.0应用 Google MySpace Flickr Delicious YouTube Linkedin Facebook Web 2.0八个核心模式 群众智慧（Collective Intelligence） 建立一个参与架构，借助网络效应和算法，使得软件随着使用的人越来越多而变得越来越好。 数据，下一个“Intel Inside” 利用独特、难以复制的数据源，成为这个时代的“Intel Inside”，其中，数据变得跟功能一样重要，成为核心竞争能力。 “复合”创新 建立一个平台，通过数据和服务的组合，来创造新的市场和机会。 丰富用户体验 超越传统的 Web 页面模式，让在线应用拥有桌面应