Ajax和jQuery.docVIP

Ajax和jQuery 1 Ajax简介 1.1 Ajax的定义 Ajax(Asynchronous JavaScript + XML)，即异步JavaScript + XML。 Ajax将一系列传统技术重新锻造、组合，并赋予新的概念和含义。 Ajax主要由以下四种技术组成： JavaScript（浏览器中的脚本语言） CSS（层叠样式表） DOM（文档对象模型） XMLHttpRequest对象 1.2 Ajax富客户端(Rich Client)的优势 富客户端：表现能力丰富的客户端。 富互联网应用：Rich Internet Application. 桌面应用和客户/服务器系统的架构示意图： 图1. 桌面应用的架构示意图 图2. 客户/服务器和n层架构的示意图 桌面应用(Excel/Word)比传统客户端的用户体验要好： 桌面应用与用户的交互是“富”的。 桌面应用反应速度快。 传统的客户端，交互就是点击链接、填写表单等（交互匮乏）。 传统的客户端等待页面刷新时间长（存在网络延迟）。 图3. 本地过程调用的顺序图 图4. 远程过程调用的顺序图 异步交互 应当以异步的方式响应用户的输入。 瞬态的(transient)和独占的(sovereign)应用：增强独占的应用体验。 图5. 以同步方式响应用户输入的顺序图 图6. 以异步方式响应用户输入的顺序图 1.3 Ajax的四个基本原则 浏览器中的是应用而不是内容。 传统Web应用是用户和应用会话的所有状态都保留在服务器上。 传统Web应用的用户在会话中看到的是一系列的页面，每次页面切换都不可避免地要到服务器上走一个来回。 Ajax应用的用户在登录后，服务器交付一个客户端应用给浏览器。 Ajax客户端应用可以独立处理很多的用户交互。 Ajax客户端应用对于无法处理的交互，应用会以后台方式发送请求给服务器，而不会打断用户的操作流程。 图7. 传统Web应用的生命周期 图8. Ajax应用的生命周期 服务器交付的是数据而不是内容。 服务器可以只向客户端发送必要的数据，更新部分页面。 服务器向客户端发送的数据比传统Web应用要少很多。 用户交互变得流畅而连续。 需要为客户端提供除超链接和表单外更多的UI组件。 这些组件可以由各种JavaScript库提供： 如jQuery UI/Dojo’s Dijit/Dojo’s Dojox等。 有纪律的严肃编程。 严肃的JavaScript编程 各种JavaScript库的问世： Dojo Prototype/Script.aculo.us jQuery(※) Yahoo! UI Library(YUI) Mootools ExtJS 1.4 组成Ajax的四种技术 JavaScript（浏览器中的脚本语言） JavaScript是通用的脚本语言，用来嵌入在某种应用之中。 Web浏览器中嵌入的JavaScript解释器允许通过程序与浏览器的很多内建功能 CSS（层叠样式表） CSS为Web页面元素提供了可重用的定义和使用样式的方法。 在Ajax应用中，用户界面的样式可以通过CSS独立修改。 DOM（文档对象模型） DOM以一组可以使用JavaScript操作的可编程对象展现出Web页面的结构。 通过使用脚本修改DOM，Ajax应用程序可以在运行时改变用户界面，或者高效地重绘页面中的某个部分。 XMLHttpRequest对象 XMLHttpRequest对象允许Web程序员从Web服务器以后台活动的方式获取数据。 2 jQuery 2.1 jQuery实例 09-01: alice.css body { font: 62.5% Arial, Verdana, sans-serif; } h1 { font-size: 2.5em; margin-bottom: 0; } h2 { font-size: 1.3em; margin-bottom: .5em; } h3 { font-size: 1.1em; margin-bottom: 0; } .poem { margin: 0 2em; } .highlight { font-style: italic; border: 1px solid #888; padding: 0.5em; margin: 0.5em 0; background-color: #ffc; } alice.js $(document).ready(function() { $(.poem-stanza).addClass(highlight); }); 09-02: !DOCTYPE html P