没有合适的资源?快使用搜索试试~ 我知道了~
适合初学者,内容浅显易懂。文件是word格式,便于打开
资源详情
资源评论
资源推荐
第 2 章 Ajax 新手上路
2.1 Ajax
的关键元素
不是单一的技术,而是四种技术的集合。表 简要介绍了这些技术,以及它们所扮演的角色。
表 2-1 Ajax 的关键元素
是通用的脚本语言,用来嵌入在某种应用之
中。 浏览器中嵌入的 解释器允许通过程序与
浏览器的很多内建功能进行交互。 应用程序是使用
编写的
(层叠样式表) 为 页面元素提供了一种可重用的可视化样式的定
义方法。它提供了简单而又强大的方法,以一致的方式定义和
使用可视化样式。在 应用中,用户界面的样式可以通过
独立修改
(文档对象模
型)
以一组可以使用 操作的可编程对象展现出
页面的结构。通过使用脚本修改 , 应用程序
可以在运行时改变用户界面,或者高效地重绘页面中的某个部
分
对
象
对象允许 程序员从 服务器以
后台活动的方式获取数据。数据格式通常是 ,但是也可
以很好地支持任何基于文本的数据格式(
这个名字取得实在是很不恰当)。尽管 对
于完成这件工作来说是最为灵活和通用的工具,但还有其他方
法也可以从服务器获取数据。我们在本章中会讨论所有的方法
在第 章中我们看到了 如何为用户提供了复杂的、运转良好的应用,改善了用户的交互体验。
就像胶水将各个部分粘合在一起,定义应用的工作流和业务逻辑。通过使用 操作 来改变和刷新用户
界面,不断地重绘和重新组织显示给用户的数据,并且处理用户基于鼠标和键盘的交互。 为应用提供了一致的
外观,并且为以编程方式操作 提供了强大的捷径。 对象(或者类似的机制)则用来与服务
器进行异步通信,在用户工作时提交用户的请求并获取最新的数据。图 显示了这些技术在 中是如何配合
的。
图 的四个主要组件: 定义了业务规则和程序流程。应用程序使用 对象(或
类似的机制)以后台方式从服务器获得的数据,通过 和 来改变界面的外观
的四种技术之中,、 和 这三个都不是新面孔,它们以前合在一起称作动态 ,或
者简称 。 是在 !!" 年因特网大跃进时代放的一颗“卫星”,它从来也没有实现过自己最初的承诺(在
这个行业早已见怪不怪了[1])。 可以为 页面创造新奇古怪的、交互性很强的界面,但是它永远也无法
克服需要完全刷新整个页面的问题。问题在于,如果没有和服务器通信的能力,空有漂亮的界面,还是无法实现一些
真正有意义的功能。 除了大量使用 ,还可以发送异步请求,这大大延长了 页面的寿命。通过与服
务器进行异步通信,无需打断用户正在界面上执行的操作, 与其前任 相比,为用户带来了真正的价值。
更加方便的是,所有这些技术都已经预先安装在绝大多数的现代 浏览器之中,包括微软公司的
#$、%&''()*% 系列的浏览器(例如 +,%、%&''、--.% 和 /0%)、、
苹果公司的 ,,以及它的近亲 1-#2$ 桌面系统里的 2%0%。可惜的是,这些技术的实现细节在不同的
浏览器之间,甚至在同一浏览器的不同版本之间存在着很多差异,这就是所谓的跨浏览器不兼容(%%3
0%/')问题。不过近 4 年来,这一状况得到了持续的改善,现在我们写代码时需要处理的此类问题已经
非常少了。
所有现代的操作系统都会预先安装一个现代的浏览器。也就是说,这个星球上的绝大多数桌面电脑和笔记本电脑
都已经为运行 应用程序做好了准备。这正是大多数 或5-$ 开发者所梦想的。(虽说在 6 和智能手机上
也安装了浏览器,但是它们的功能通常已经被大幅裁减,无法支持 所需的关键技术。即使它们能够支持这些技
术,屏幕尺寸和输入方法方面的限制也是非常棘手的问题。因此就目前而言, 主要是一种用于桌面电脑和笔记
本电脑上的技术。)
我们的做法是先分别考察每一种技术,然后再去考察它们如何相互配合。如果你已经是一个 开发的老手,
对这些技术已经烂熟于胸,那么可以直接跳到第 7 章,在那里我们将会考察如何使用设计模式来管理这些技术。
我们就从考察 来开始我们的探索之旅吧。
2.2 用
JavaScript
改善用户体验
毫无疑问是 工具箱中的核心技术。 应用程序完全下载到客户端的内存中,由数据、表现和
程序逻辑三者组成, 就是用来实现逻辑的工具。 是一种混合了多种编程思想的通用编程语言,
提供了一个表面上与 系列语言相似的语法接口。
可以简短地描述为一种弱类型的、解释型的和通用的脚本语言。弱类型(
'%%'889
)意味着
变量不需要明确声明为字符串、整数或者对象,同一个变量可以使用不同的类型来赋值。例如,下面的代码是合法的:
:75;4!<=
:>>=
变量 x 最初定义为一个数字类型的值,后来又赋给一个字符串类型的值。
解释型(
09
)意味着不需要编译,源代码本身就可以直接执行。将源代码放在
服务器上,通过因
特网传输到用户的浏览器中,
应用的部署就完成了。此外,在
中,甚至还可以在运行时对一
小段代码进行求值。
:'?>"@4>A=
在这里,我们将表达式定义为一段文本,而不是两个数字加一个算术操作符。使用这段文本来调用 eval(),将会解
释文本中包含的 ,并且返回表达式的值。在大多数场合,这样做执行效率不高;但是在某些场合,这样做
是很有用的,因为它可以带来很大的灵活性。
通用(.0'%)意味着这种语言适用于大部分的算法和编程任务。 语言核心支持数字、
字符串、日期和时间、数组、用于处理文本的正则表达式,以及数学函数(例如三角运算、随机数生成等)。
还支持定义结构化的对象,因此可以使用面向对象的设计原则来建造更加复杂的代码。
在浏览器环境中,通过 引擎可以访问浏览器的一些本地功能,例如 、、
对象,这允许页面开发者通过编程方式在不同程度上控制页面的表现。尽管在浏览器中遇到的 环境和特
定于浏览器的对象紧紧绑在一起,但是从底层来看,语言本身的语法却是一致的。
本书并不是一本详细介绍 基础知识的教程。在附录 B 中,我们近距离考察了 语言,讨论
了 与 系列语言(包括名字上很相似的 语言)的根本区别。 的例子散布在本书的各个部
分,已经有几本其他书籍专门介绍这门语言的基础知识(参见本章“资源”一节)。
在整个 技术体系中, 就像胶水一样将所有的部分黏合在一起,对 有基本的了解是编
写 应用的前提。只有熟练掌握和深刻理解了 ,你才能够释放出 的全部潜力。
接下来的话题将会转向 ,它是 页面中元素视觉样式的主宰。
2.3 用
CSS
定义应用的外观
是 设计沿用已久的部分,无论是在传统的 应用还是在 应用中, 都 是一种频繁使用的
技术。样式表提供了集中定义各种视觉样式的方法,并且可以非常方便地设置在页面的元素上。样式表可以定义一些
明显的样式元素,例如颜色、 边框、背景图片、透明度和大小等。此外,样式表还可以定义元素相互之间的布局以
及简单的用户交互功能,仅仅通过样式表就可以实现眩目的视觉效果。
在传统的 应用中,样式表提供了一种很有用的方法,可以在某个地方定义在很多页面中重用的样式。在
应用中,我们不再将应用思考为快速切换的一系列页面,但是样式表仍然是很有帮助的,它可以用最少的代码
动态地为元素设置预先定义的外观。在本节中我们将看到一些基本的 例子。不过首先我们来考察一下 规则
是如何定义的。
样式为一个文档定义显示规则,通常放在一个单独的文件中,由应用这些样式的 页面来引用。当然,
也可以在 页面中定义样式规则,但这通常是一种很糟糕的做法。
一个样式规则由两部分组成:选择器('%)和样式声明(8'9'%0)。选择器表明要为哪一个元
素设置样式,样式声明则表明要应用哪些样式属性。例如我们想让文档中的一级标题(也就是 标签)以红色显示,
就可以这样定义 规则:
CD%'%E9F
这个例子中的选择器非常简单,文档中的所有 标签都将应用这个样式。样式声明也很简单,仅仅设置了一个样式属
性。在实际应用中,选择器和样式声明都要复杂得多。我们来分别考察一下它们的设置方法,就从选择器开始吧。
575 选择器
除了为某种类型的 标签设置样式,我们还可以将规则限制在一个指定的上下文内。有几种方法可以指定上
下文:通过 标签类型、通过已声明类的类型或者通过元素的唯一 #。
先看看标签类型的选择器。举例来说,如果我们只需要对位于 标签中的 标签应用上面的样式规则,那么就可以
将 规则修改为:
9CD%'%E9=F
这也称作“基于元素的选择器”,因为一个 元素是否应用这个样式取决于它的元素类型。我们也可以定义样式类
(8''),通过与 标签类型无关的样式类来设置样式。例如,如果我们定义一个名为 callout 的样式
类,将其显示在一个彩色框中,就可以这样写:
5''%D%9E%'9'=*.%09%'%E80F
要将一个样式类分配给一个元素,我们只需要简单地在
标签中声明一个类属性,例如:
一个元素可以分配多个样式类。假设我们还定义了一个名为 loud 的样式类:
5'%9D%'%E%0.F
可以在文档中同时应用这两个样式,就像这样:
09#>''00'0./%,%CG
第三个元素会显示为蓝色边框、青色背景和橙色文字。通过组合 样式类,我们可以创造出令人愉快的、和谐的
设计。 我们也可以混合使用样式类和基于元素的规则,来定义一个仅仅针对特定标签类型的样式类。例如:
05C.C'.CD*.%09%'%E8''%3F
这个规则仅仅会应用在声明了值为 highlight 的类属性的标签上。其他的标签或者其他有 class='highlight'属
性设置的标签将不受影响。我们甚至可以与父子关系的选择器联合使用,创建在非常特定的场合下使用的规则:
95%05C.C'.CD*.%09%'%E8''%3F
这个规则仅会应用在设置了 prose 样式类的 标签中嵌套的、设置了 highlight 样式类的标签。
#>''''%
#>''.C%0.
09#>''''%G
#>''0%/'%,
也可以为单个元素指定规则,它需要有唯一 #,这是通过在 中加上 id 属性来完成的。 中只会有一个
使用这个 # 的元素,所以,这样一类选择器通常只用来选择页面中的一个元素。例如,为了突出显示页面中的关闭
按钮,我们可以这样定义样式:
H'%D%'%E9F
在
中我们还可以定义基于伪选择器(
9%'%
)的样式。浏览器定义了一些有限的伪选择器,这里展
示一些最有用的,例如:
@EI'D
,%0&E4JJK=
%'%E9=
L%E',=
F
通过这个选择器,我们可以将任何元素的第一个字母以很大的粗体红色字体来显示。我们还可以将这个规则收紧一些,
就像这样:
5''/09EI'D
,%0&E4JJK=
%'%E9=
L%E',=
F
这样的话,红色的效果只会应用在设置了 illuminated 样式类的 元素上。其他有用的伪选择器包括 first-line
和 hover。hover 可以改变当鼠标光标停在超链接上时,超链接的显示效果。例如,当鼠标光标停在链接上时,链
接显示为黄色,我们可以编写下列规则:
EC%D%'%E8''%3=F
选择器的基本内容就是这些了。在这些例子中,我们已经非正式地介绍了几种样式声明,现在我们就来仔细考察
一下。
575 样式属性
页面中的每一个元素都可以通过很多方式来设置样式。对于那些最常见的元素(例如 标签)来说,可能会
有一大堆的样式应用在它们身上。我们来大致看一下。
对于元素的文本,可以设置它的颜色、字体大小、字体粗细、字体类型等样式。字体类型可以有多个选项,以便
在客户端机器上并未安装希望使用的字体时,仍然能够通过使用其他的替代字体得到不错的显示效果。将一个段落的
样式设置为灰色终端风格的文本,我们可以这样来定义:
5%%D
,%0&E;=
,%0,/'8E%03M%M/%0%=
,%03.CE%'9=
%'%E.8=
F
或者,使用更简捷的方式将所有字体元素合并在一起:
5%%D
,%0E%'9;%03M%M/%0%=
%'%E.8=
F
在上面的两种样式声明中,多个样式属性都以“键—值”对的形式来书写,使用分号来分隔。
通过设置
margin
和
padding
属性,
可以定义元素的布局和尺寸(常常称作盒模型),而且,上下左右每
一边的属性都可以单独设置:
5999D990.E;=F
506999D
990.%%/EN=
990.%E=
990.',E=
990..CE<=
/.0E=
F
元素的尺寸可以通过 width 和 height 属性来指定。元素的位置则可以指定为绝对的或者相对的。绝对定位的元素
可以通过设置 top 和 left 属性指定位置,而相对定位的元素则依赖于页面其他部分的布局情况。
通过使用 background-color 属性可以设置背景颜色,还可以通过 background-image 属性来设置背景图片:
5'D*.%09/.E'?/.(%50.A=F
通过设置 visibility:hidden 或 display:none 可以将元素隐藏起来。如果是相对定位,在第一种情况下,元素
仍会保留它在页面上的位置;而在第二种情况下则不会,元素会消失得无影无踪。
以上内容讨论了使用 建造 应用用户界面所需要的基本样式属性。在下面一小节,我们来看一个例子,
实际使用一下 。
5757简单的 例子
我们讨论了 的核心概念,现在来进行实战。 可以用于创建优雅的图形设计,但是在 应用中,我们
常常更加关注创建模仿桌面 1# 组件的用户界面。作为 这种用法的一个简单例子,图 展示了一个使用 来
设置样式的文件夹 1# 组件。
图 使用 为用户界面组件设置样式。两个截屏都是由同一个 生成的,只是采用了不同的样式表。左边的
截屏所使用的样式表仅仅保留了定位元素占据的位置,而右边的截屏所使用的样式表则添加了一些装饰效果,例如彩
色和图片在图 右边的截屏中, 对于创建窗口部件来说起到了两个作用。我们来逐个考察一下。
5使用 布局
完成的第一个工作是对这些元素进行定位。最外面的元素显示了整个的窗口,它使用绝对定位的方式:
95309%3D
%%0E%'=
%L%3E%=
/.0EN=
990.EJ=
39CE;J=
C.CENJ=
F
在内容区域中,使用
float
属性来设置图标的样式,使得它们在父元素的边界范围之内自动排列起来,并且在需要
的时候可以自动换行。
95/D
%%0E'=
C.CE<;=
39CE4<=
L%E',=
990.EJ=
/.0EN=
F
嵌入在
item
元素内的
itemName
元素,通过将上边距设置为与图标相等的尺寸,将文本定位在图标的下方:
95/95/-/D
/.0%E;N=
,%0EJ90M'MC'=
'.0E0=
F
5使用 设置样式
执行的第二个工作是为元素加上视觉样式。文件夹中这些条目所使用的图片是通过类名来分配的,例如:
95,%'9D
*.%09E
00'?/.(,%'950.A
%',0%=
F
95I'D
*.%09E
剩余63页未读,继续阅读
win_win3
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0