Ajax培训卡片.docVIP

福沃德软件技术有限公司技术培训 Ajax技术培训 整理人 ：杨志 整理时间 ：2011年10月 内部资料 注意保存  Ajax（即异步 JavaScript 和 XML）是一种 Web 应用程序开发的手段，它采用客户端脚本与 Web 服务器交换数据。所以，不必采用会中断交互的完整页面刷新，就可以动态地更新 Web 页面。使用 Ajax，可以创建更加丰富、更加动态的 Web 应用程序用户界面，其即时性与可用性甚至能够接近本机桌面应用程序。 目 录 1. Ajax简介 1 1.1. Ajax起源和技术路线 1 1.2. 与传统的web应用比较 1 1.3. 其他不刷新整个页面便可与服务器通讯的办法 2 1.4. Ajax的缺陷 3 1.5. Ajax的应用场景 3 2. 使用XMLHttpRequest对象 4 2.1. XMLHttpRequest对象的概述 4 2.2. XMLHttpRequest的方法 4 2.2.1. open 方法 5 2.2.2. send方法 5 2.2.3. setRequestHeader方法 6 2.2.4. abort方法 6 2.3. XMLHttpRequest的属性 6 2.3.1. onreadystatechange 6 2.3.2. readyState 7 2.3.3. status 7 2.3.4. responseText 8 2.3.5. responseXML 9 2.4. 发送请求 9 2.5. 接收响应 9 3. 使用jQuery Ajax支持 11 3.1. .load( url, [data], [callback]) 11 3.2. jQuery.get( url, [data], [callback]) 11 3.3. jQuery.post( url, [data], [callback], [type]) 11 3.4. serialize() 与 serializeArray() 12 3.5. 其他：请参考jQuery API文档 12 4. 工程实践 13 4.1. AjaxUtils. loadPageSegment($element, options) 13 4.2. AjaxUtils.showPageSegment($element, htmlData) 13 4.3. 由服务器端指定处理类型 13 Ajax简介 Ajax起源和技术路线 是谁发明了Ajax？要找到真正的源头，总免不了一场争论。不过，有一点确定的是，2005年2月，Adaptive Path的Jesse James Garrett最早创造了这个词。在他的文章《Ajax: A New Approach to Web Applications》第一次提出了“Ajax”的概念，在这篇文章中，Garrett讨论了如何消除胖客户（或桌面）应用与瘦客户（或WEB）应用之间的界限。当Google在Google Labs发布Google Maps和Google Suggest时，这个技术才真正为人所认识。 Ajax全称为“Asynchronous JavaScript and XML (异步JavaScript和XML)”的简称，是一种创建交互式网页应用的网页开发技术。Ajax是以下四个单词的首字母缩写： Asynchronors JavaScript And XML 但如今，这个词覆盖面有所扩展，把允许浏览器与服务器通信而无需刷新当前页面的技术都涵盖在内。 Ajax并非是一个新的技术或者语言，它只是几项技术按一定的方式组合起来，在共同协作中发挥各自的作用；用俗语说就是“老瓶装新酒”。具体讲，Ajax使用的技术包括： 1、使用XHTML和CSS的来显示信息； 2、使用DOM进行动态显示和交互； 3、使用XML和XSLT进行数据交换和处理及相关操作； 4、使用XMLHttpRequest对象与Web服务器进行异步数据检索； 5、使用JavaScript将以上技术融合在一起，绑定和处理所有数据。 Ajax技术是一种客户端技术，与服务器端语言无关。 XHTML eXtended Hypertext Markup Language DOM Document Object Model XML eXtensible Markup Language 与传统的web应用比较 传统Web模式中是一种同步的概念：用户必须等待每个请求，当一个请求完成后才能获得结果，在使用完这些结果后才会发出新的请求。 从图中可以看到，在传统的Web开发中，完全是一种请求刷新响应的模型，用户只有等请求完成后才能进行用户操作，操作完成后才能提交下一个请求，用户行为和服务器行为是一种同步的关系，需要相互等待。 从上图中可见