第一章 Rethinking the web application
Ajax的第一步
包括
l
介绍Ajax之前的技术
l
使用CSS定义外观和感觉
l
使用DOM定义用户界面结构
l
使用XMLHttpRequest 异步与服务器通信
在第一章，我们侧重点在使用者和怎样让Ajax帮助我们。我们大多数的人是开发者，而且我们已经说服自己“Ajax是个好东西”。我们需要知道的是怎样使用它工作。一个好消息是，就像许多新技术，大部分的过程会是熟悉的，尤其是你已经在互联网方面工作。
在这一章里，我们会揭示Ajax技术。我们将要讨论4种基础的Ajax技术和他们相互是怎样联系的。这里会有一些示范，展示他们怎样工作和相互协作。
你可以认为这一章类似其他书的“hello world”。我们更加感兴趣的是让这样技术工作。如果你已经熟悉一些Ajax技术，你可以跳过它。
2.1 Ajax关键元素
Ajax不是独立的技术。实际上他是4种技术的集合。
|
JavaScript
|
JavaScript is a general-purpose scripting language designed to be embedded inside applications. The JavaScript interpreter in a web browser allows programmatic interaction with many of the browser’s inbuilt capabilities. Ajax applications are written in JavaScript.
|
|
Cascading Style
Sheets (CSS)
|
CSS offers a way of defining reusable visual styles for web page elements. It offers a simple and powerful way of defining and applying visual styling consistently. In an Ajax application, the styling of a user interface may be modified interactively through CSS.
|
|
Document Object
Model (DOM)
|
The DOM presents the structure of web pages as a set of programmable objects that can be manipulated with JavaScript. Scripting the DOM allows an Ajax application to modify the user interface on the fly, effectively redrawing parts of the page.
|
|
XMLHttpRequest
object
|
The (misnamed) XMLHttpRequest object allows web programmers to retrieve data from the web server as a background activity. The data format is typically XML, but it works well with any text-based data. While XMLHttpRequest is the most flexible general-purpose tool for this job, there are other ways of retrieving data from the server, too, and we’ll cover them all in this chapter.
|
我们已经在第一章里看到了，一个Ajax程序怎样传递一个复杂的函数应用到用户。JavaScript就是将这一切粘合在一起的胶水，它定义用户工作流和商业逻辑。用户界面被JS操纵和刷新。JS操纵DOM，连续不断的重绘和重组数据以及处理整个过程中鼠标和键盘的响应。
CSS提供一致的和谐的外观，同时它也处理DOM的标记。XMLHttpRequest对象被用于与服务器的异步通信。
以上4种技术中，CSS、DOM、JS已经被DHTML涉及。虽然DHTML为网页提供了令人振奋的功能，但是他仍然没有跨越网页无刷新状态的事实。如果没有与服务端后台的通信，那么网页所能做的是非常有限的。虽然Ajax大量用到了dhtml，但是通过增加了异步通信，他能够极大的扩展网页的声明周期，同时这样做也使浏览网页没有停顿。
尽管所有这些新技术都已经安装到了现有的浏览器中，但是你会发现他们版本更新频繁使用不便。好在，这样的情况在过去的5年已经得到了解决。我们已经排除了不兼容的版本。
现在，几乎没一种操作系统都预安装了浏览器。他们都可以运行Ajax程序。
尽管所有这些新技术都已经安装到了现有的浏览器中，但是你会发现他们版本更新频繁使用不便。好在，这样的情况在过去的5年已经得到了解决。我们已经排除了不兼容的版本。
现在，几乎没一种操作系统都预安装了浏览器。他们都可以运行Ajax程序。
2.2 使用Javascript的经验
在Ajax中扮演主要角色的无疑是JavaScript。Ajax程序将完全下载到本地内存。JS语言是一种弱类型的解释性语言。弱类型的例子是
var x=3.1415926;
x='pi';
“解释性”表示，他并不直接编译成可执行代码。当执行JS程序，你可以将源文件摆在服务器上，然后源文件直接传输到浏览器。
var x=3.1415926;
x='pi';
“解释性”表示，他并不直接编译成可执行代码。当执行JS程序，你可以将源文件摆在服务器上，然后源文件直接传输到浏览器。
2.3用CSS定义外观
CSS是网页设计的一部分。CSS集中提供了视觉样式类。
另外，颜色、边框、背景图片、过渡和大小尺寸这些明显的样式元素，甚至是简单的交互事件效果都可以用CSS元素定义。
在传统的web程序中，CSS提供了实用的定义，一处声明就可以控制多个页面。在ajax中，我们根本不必考虑继承的问题，不过他仍旧是提供预定义页面样式的最佳途径。在这一节中我们将使用基本的CSS例子。首先，需要了解CSS的规则。
CSS使用文档定义规则，通常使用一个特定的文件，将它应用到网页里。CSS同样可以直接定义在网页中。
一个CSS规则包括2个部分 选择器 和 样式声明。
我们可以声明一个CSS规则，就像 h1 { color: red } ，及 所有的<H1>标签的网页内容字体为红色。这个CSS选择器是非常简单的。样式声明同样也很简单，只做了一个变化。实际上，选择器和样式声明可以做的非常复杂。让我们逐个看看他们。
在传统的web程序中，CSS提供了实用的定义，一处声明就可以控制多个页面。在ajax中，我们根本不必考虑继承的问题，不过他仍旧是提供预定义页面样式的最佳途径。在这一节中我们将使用基本的CSS例子。首先，需要了解CSS的规则。
CSS使用文档定义规则，通常使用一个特定的文件，将它应用到网页里。CSS同样可以直接定义在网页中。
一个CSS规则包括2个部分 选择器 和 样式声明。
我们可以声明一个CSS规则，就像 h1 { color: red } ，及 所有的<H1>标签的网页内容字体为红色。这个CSS选择器是非常简单的。样式声明同样也很简单，只做了一个变化。实际上，选择器和样式声明可以做的非常复杂。让我们逐个看看他们。
2.3.1 CSS选择器
有几种方法定义选择器：用网页tag，用声明的类，用元素的ID。
首先是tags。例如，对包含在<div>表现中的<H1>标签里的内容应用样式声明 div h1 { color: red; }
我们还可以定义类。例如，我们对class属性是 callout的标签内容应用样式 .callout { border: solid blue 1px; background-color: cyan }
将一个样式类赋值给一个网页元素，我们可以在html标签中定义类属性。例如:
<div>I'll appear as a normal bit of text</div>
<div class='callout'>And I'll appear as a callout!</div>
网页元素也可以被分配到一个以上的样式类。例如，我们再定义一个loud类 .loud { color: orange } ，然后输入一下代码：
<div class='loud'>I'll be bright orange</div>
<div class='callout'>I'll appear as a callout</div>
<div class='callout loud'>
And I'll appear as an unappealing mixture of both!
</div>
我们会发现，第三个div标签里将会应用到2个类的集合。
另外，我们还可以联合元素和样式类的规则，例如：span.highlight { background-color: yellow } 它定义了span标签元素和highlight类。
我们还可以为父一级元素应用css。例如 ： div.prose span.highlight { background-color: yellow } 这条规则定义了应用了嵌套在类属性是prose的div标签中的，highlight类的span标签的样式规则。（天啊，自己也看不懂了。）
css选择器还可以用于指定ID的标签。例如将id是close的按钮变成红色 #close { color: red }
css还可以允许我们建立伪选择器。一般浏览器都定义了一定数量的伪选择器。例如：
*:first-letter {
font-size: 500%;
color: red;
float: left;
}
我们还可以对这一规则增加限制。
p.illuminated:first-letter {
font-size: 500%;
color: red;
float: left;
}
还有其他的例子，例如：
a:hover{ color:yellow; }
有几种方法定义选择器：用网页tag，用声明的类，用元素的ID。
首先是tags。例如，对包含在<div>表现中的<H1>标签里的内容应用样式声明 div h1 { color: red; }
我们还可以定义类。例如，我们对class属性是 callout的标签内容应用样式 .callout { border: solid blue 1px; background-color: cyan }
将一个样式类赋值给一个网页元素，我们可以在html标签中定义类属性。例如:
<div>I'll appear as a normal bit of text</div>
<div class='callout'>And I'll appear as a callout!</div>
网页元素也可以被分配到一个以上的样式类。例如，我们再定义一个loud类 .loud { color: orange } ，然后输入一下代码：
<div class='loud'>I'll be bright orange</div>
<div class='callout'>I'll appear as a callout</div>
<div class='callout loud'>
And I'll appear as an unappealing mixture of both!
</div>
我们会发现，第三个div标签里将会应用到2个类的集合。
另外，我们还可以联合元素和样式类的规则，例如：span.highlight { background-color: yellow } 它定义了span标签元素和highlight类。
我们还可以为父一级元素应用css。例如 ： div.prose span.highlight { background-color: yellow } 这条规则定义了应用了嵌套在类属性是prose的div标签中的，highlight类的span标签的样式规则。（天啊，自己也看不懂了。）
css选择器还可以用于指定ID的标签。例如将id是close的按钮变成红色 #close { color: red }
css还可以允许我们建立伪选择器。一般浏览器都定义了一定数量的伪选择器。例如：
*:first-letter {
font-size: 500%;
color: red;
float: left;
}
我们还可以对这一规则增加限制。
p.illuminated:first-letter {
font-size: 500%;
color: red;
float: left;
}
还有其他的例子，例如：
a:hover{ color:yellow; }
2.3.2 css样式属性
翻译略，详细内容可查阅css参考。
2.3.3 一个简单的css例子
<html>
<head>
<link rel='stylesheet' type='text/css'
href='window.css' />
</head>
<body>
<div class='window'>
<div class='titlebar'>
<span class='titleButton' id='close'></span>
<span class='titleButton' id='max'></span>
<span class='titleButton' id='min'></span>
</div>
<div class='contents'>
<div class='item folder'>
<div class='itemName'>Documents</div>
</div>
<div class='item folder'>
<div class='itemName'>lost and found</div>
</div>
<div class='item folder'>
<div class='itemName'>stuff</div>
</div>
<div class='item file'>
<div class='itemName'>shopping list</div>
</div>
<div class='item file'>
<div class='itemName'>things.txt</div>
</div>
<div class='item special'>
<div class='itemName'>faves</div>
</div>
<div class='item file'>
<div class='itemName'>chapter 2</div>
</div>
</div>
</div>
</body>
</html>
网页源文件。
div.window{
position: absolute;
overflow: auto;
background-color: #eeefff;
border: solid #0066aa 2px;
margin: 8px;
padding: 0px;
width: 420px;
height: 280px;
}
div.titlebar{
background-color: #0066aa;
background-image:
url(images/titlebar_bg.png);
background-repeat: repeat-x;
color:white;
border-bottom: solid black 1px;
width: 100%;
height: 16px;
overflow:hidden;
}
span.titleButton{
position: relative;
height: 16px;
width: 16px;
padding: 0px;
margin: 0px 1px; 0px 1px;
float:right;
}
span.titleButton#min{
background: transparent
url(images/min.png) top left no-repeat;
}
span.titleButton#max{
background: transparent
url(images/max.png) top left no-repeat;
}
span.titleButton#close{
background: transparent
url(images/close.png) top left no-repeat;
}
div.contents {
background-color: #e0e4e8;
overflow: auto;
padding: 2px;
height:240px;
}
div.item{
position : relative;
height : 64px;
width: 56px;
float: left;
color : #004488;
font-size: 18;
padding: 0px;
margin: 4px;
}
div.item div.itemName {
margin-top: 48px;
font: 10px verdana, arial, helvetica;
text-align: center;
}
div.folder{
background: transparent
url(images/folder.png) top left no-repeat;
}
div.file{
background: transparent
url(images/file.png) top left no-repeat;
}
div.special{
background: transparent
url(images/folder_important.png)
top left no-repeat;
}
position: absolute;
overflow: auto;
background-color: #eeefff;
border: solid #0066aa 2px;
margin: 8px;
padding: 0px;
width: 420px;
height: 280px;
}
div.titlebar{
background-color: #0066aa;
background-image:
url(images/titlebar_bg.png);
background-repeat: repeat-x;
color:white;
border-bottom: solid black 1px;
width: 100%;
height: 16px;
overflow:hidden;
}
span.titleButton{
position: relative;
height: 16px;
width: 16px;
padding: 0px;
margin: 0px 1px; 0px 1px;
float:right;
}
span.titleButton#min{
background: transparent
url(images/min.png) top left no-repeat;
}
span.titleButton#max{
background: transparent
url(images/max.png) top left no-repeat;
}
span.titleButton#close{
background: transparent
url(images/close.png) top left no-repeat;
}
div.contents {
background-color: #e0e4e8;
overflow: auto;
padding: 2px;
height:240px;
}
div.item{
position : relative;
height : 64px;
width: 56px;
float: left;
color : #004488;
font-size: 18;
padding: 0px;
margin: 4px;
}
div.item div.itemName {
margin-top: 48px;
font: 10px verdana, arial, helvetica;
text-align: center;
}
div.folder{
background: transparent
url(images/folder.png) top left no-repeat;
}
div.file{
background: transparent
url(images/file.png) top left no-repeat;
}
div.special{
background: transparent
url(images/folder_important.png)
top left no-repeat;
}
window.css 样式单源文件。
很简单应该看的懂。
很简单应该看的懂。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
