Ajax和jQuery
Ajax和jQuery
1 Ajax简介
1.1 A jax的定义
(1)Ajax(Asynchronous JavaScript + XML)，即异步JavaScript + XML。
(2)Ajax将一系列传统技术重新锻造、组合，并赋予新的概念和含义。
(3)Ajax主要由以下四种技术组成：
a)JavaScript（浏览器中的脚本语言）
b)CSS（层叠样式表）
c)DOM（文档对象模型）
d)XMLHttpRequest对象
1.2 A jax富客户端(Rich Client)的优势
(1)富客户端：表现能力丰富的客户端。
(2)富互联网应用：Rich Internet Application.
(3)桌面应用和客户/服务器系统的架构示意图：
图1. 桌面应用的架构示意图
图2. 客户/服务器和n层架构的示意图
(4)桌面应用(Excel/Word)比传统客户端的用户体验要好：
a)桌面应用与用户的交互是“富”的。
b)桌面应用反应速度快。
c)传统的客户端，交互就是点击链接、填写表单等（交互匮乏）。
d)传统的客户端等待页面刷新时间长（存在网络延迟）。
图3. 本地过程调用的顺序图
图4. 远程过程调用的顺序图
(5)异步交互
a)应当以异步的方式响应用户的输入。
b)瞬态的(transient)和独占的(sovereign)应用：增强独占的应用体验。
图5. 以同步方式响应用户输入的顺序图
图6. 以异步方式响应用户输入的顺序图
1.3 A jax的四个基本原则
(1)浏览器中的是应用而不是内容。
a)传统Web应用是用户和应用会话的所有状态都保留在服务器上。
b)传统Web应用的用户在会话中看到的是一系列的页面，每次页面切
换都不可避免地要到服务器上走一个来回。
c)Ajax应用的用户在登录后，服务器交付一个客户端应用给浏览器。
d)Ajax客户端应用可以独立处理很多的用户交互。
e)Ajax客户端应用对于无法处理的交互，应用会以后台方式发送请求
给服务器，而不会打断用户的操作流程。
图7. 传统Web应用的生命周期
图8. Ajax应用的生命周期
(2)服务器交付的是数据而不是内容。
a)服务器可以只向客户端发送必要的数据，更新部分页面。
b)服务器向客户端发送的数据比传统Web应用要少很多。
(3)用户交互变得流畅而连续。
a)需要为客户端提供除超链接和表单外更多的UI组件。
b)这些组件可以由各种JavaScript库提供：
如jQuery UI/Dojo’s Dijit/Dojo’s Dojox等。
(4)有纪律的严肃编程。
a)严肃的JavaScript编程
b)各种JavaScript库的问世：
Dojo
Prototype/https://www.360docs.net/doc/fb10426390.html,
jQuery(※)
Yahoo! UI Library(YUI)
Mootools
ExtJS
1.4 组成Ajax的四种技术
(1)JavaScript（浏览器中的脚本语言）
a)JavaScript是通用的脚本语言，用来嵌入在某种应用之中。
b)Web浏览器中嵌入的JavaScript解释器允许通过程序与浏览器的很多
内建功能
(2)CSS（层叠样式表）
a)CSS为Web页面元素提供了可重用的定义和使用样式的方法。
b)在Ajax应用中，用户界面的样式可以通过CSS独立修改。
(3)DOM（文档对象模型）
a)DOM以一组可以使用JavaScript操作的可编程对象展现出Web页面
的结构。
b)通过使用脚本修改DOM，Ajax应用程序可以在运行时改变用户界面，
或者高效地重绘页面中的某个部分。
(4)XMLHttpRequest对象
a)XMLHttpRequest对象允许Web程序员从Web服务器以后台活动的方
式获取数据。
2 jQuery
2.1 j Query实例
(1)09-01:
a)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;
}
b)alice.js
$(document).ready(function() {
$('.poem-stanza').addClass('highlight');
});
(2)09-02:
"https://www.360docs.net/doc/fb10426390.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2.2 工厂函数$()
(1)平时使用的jQuery对象都是通过工厂函数$()制造出来的。
(2)jQuery对象和DOM对象之间的相互转换：
a)jQuery对象→DOM对象：[index]和get(index)。
var $cr = $("#cr"); // jQuery对象
var cr = $cr[0]; // DOM对象
alert(cr.checked) // 检测这个checkbox是否被选中。
var $cr = $("#cr"); // jQuery对象
var cr = $cr.get(0); // DOM对象
alert(cr.checked) // 检测这个checkbox是否被选中。
b)DOM对象→ jQuery对象：$(DOM对象)。
var cr = document.getElementById("cr") // DOM对象
var $cr = $(cr); // jQuery对象
2.3 j Query选择器
(1)基本选择器：09-04.html
a)id / class
b)element / *
c)selector1, selector2, ... , selectorN
表1. 基本选择器
(2)层次选择器：09-05.html
a)后代元素
b)子元素
c)相邻元素
d)兄弟元素
表2. 层次选择器
(3)过滤选择器
a)基本过滤选择器：09-06.html
:first / :last / :not(selector)
:even / :odd / :eq(index) / :gt(index) / :lt(index) :header / :animated
表3. 基本过滤选择器
b)内容过滤选择器：09-07.html
子元素
文本元素
表4. 内容过滤选择器
可见状态/ 不可见状态
表5. 可见性过滤器
d)属性过滤选择器：09-09.html
表6. 属性过滤选择器
表7. 子元素过滤选择器
f)表单对象属性过滤选择器：09-11.html
表8. 表单对象属性过滤选择器
(4)表单选择器：09-12.html
表9. 表单选择器