Ajax和jQuery.docx
- 文档编号：24136400
- 上传时间：2023-05-24
- 格式：DOCX
- 页数：16
- 大小：233.10KB
Ajax和jQuery.docx
《Ajax和jQuery.docx》由会员分享，可在线阅读，更多相关《Ajax和jQuery.docx（16页珍藏版）》请在冰豆网上搜索。
Ajax和jQuery
Ajax和jQuery
1Ajax简介
1.1Ajax的定义
（1）Ajax（AsynchronousJavaScript+XML），即异步JavaScript+XML。
（2）Ajax将一系列传统技术重新锻造、组合，并赋予新的概念和含义。
（3）Ajax主要由以下四种技术组成：
a）JavaScript（浏览器中的脚本语言）
b）CSS（层叠样式表）
c）DOM（文档对象模型）
d）XMLHttpRequest对象
1.2Ajax富客户端（RichClient）的优势
（1）富客户端：
表现能力丰富的客户端。
（2）富互联网应用：
RichInternetApplication.
（3）桌面应用和客户/服务器系统的架构示意图：
图1.桌面应用的架构示意图
图2.客户/服务器和n层架构的示意图
（4）桌面应用（Excel/Word）比传统客户端的用户体验要好：
a）桌面应用与用户的交互是“富”的。
b）桌面应用反应速度快。
c）传统的客户端，交互就是点击链接、填写表单等（交互匮乏）。
d）传统的客户端等待页面刷新时间长（存在网络延迟）。
图3.本地过程调用的顺序图
图4.远程过程调用的顺序图
（5）异步交互
a）应当以异步的方式响应用户的输入。
b）瞬态的（transient）和独占的（sovereign）应用：
增强独占的应用体验。
图5.以同步方式响应用户输入的顺序图
图6.以异步方式响应用户输入的顺序图
1.3Ajax的四个基本原则
（1）浏览器中的是应用而不是内容。
a）传统Web应用是用户和应用会话的所有状态都保留在服务器上。
b）传统Web应用的用户在会话中看到的是一系列的页面，每次页面切换都不可避免地要到服务器上走一个来回。
c）Ajax应用的用户在登录后，服务器交付一个客户端应用给浏览器。
d）Ajax客户端应用可以独立处理很多的用户交互。
e）Ajax客户端应用对于无法处理的交互，应用会以后台方式发送请求给服务器，而不会打断用户的操作流程。
图7.传统Web应用的生命周期
图8.Ajax应用的生命周期
（2）服务器交付的是数据而不是内容。
a）服务器可以只向客户端发送必要的数据，更新部分页面。
b）服务器向客户端发送的数据比传统Web应用要少很多。
（3）用户交互变得流畅而连续。
a）需要为客户端提供除超链接和表单外更多的UI组件。
b）这些组件可以由各种JavaScript库提供：
如jQueryUI/Dojo’sDijit/Dojo’sDojox等。
（4）有纪律的严肃编程。
a）严肃的JavaScript编程
b）各种JavaScript库的问世：
Dojo
Prototype/Script.aculo.us
jQuery（※）
Yahoo!
UILibrary（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服务器以后台活动的方式获取数据。
2jQuery
2.1jQuery实例
（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:
02em;
}
.highlight{
font-style:
italic;
border:
1pxsolid#888;
padding:
0.5em;
margin:
0.5em0;
background-color:
#ffc;
}
b）alice.js
$（document）.ready（function（）{
$（'.poem-stanza'）.addClass（'highlight'）;
}）;
（2）09-02:
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
--引入jQuery-->
//等待DOM元素加载完毕：
$（document）.ready（function（）{
alert（"HelloWorld!
"）;
}）;