A web browser provides two input mechanisms out of the box:hyperlinks and
HTML forms.
Second, the requests themselves are asynchronous,meaning that the
contextual links, zoom control , and the other page features remain
accessible while the map is gathering new data.
The four main components of Ajax:Javascript defines business rules and
program flow. The Document Object Model and Cascading Style Sheets allow
the application to reorgnize its appearance in response to data feteched in
the background from the server by the XMLHttpRequest object or its close
cousins.
We've hightlighted a few more here , to demonstrate the breadth of concerns
to which CSS can be applied:
(1)on-screen placement
(2)texturing elements
(3)assisting in layout of elements
(4)placing text relative to accompanying graphics
The DOM presents an HTML document as a tree structure , with each element
representing a tag in the HTML markup.
Working with the DOM using Javascript
An Example:
window.onload=function(){
var hello=document.getElementById('hello');
hello.className='declared';
var empty = document.getElementById('empty');
addNode(empty,"reader of");
addNode(empty,"Ajax in action");
var children = empty.childNodes;
for (var i=0;i<children.length;i++){
children[i].className='programmed';
}
empty.style.border='solid green 2px';
empty.style.width='200px';
}
function addNode(el,text){
var childEl = document.createElement('div'); --create new element
el.appendChild(childEl);
var txtNode=document.createTextNode(txt); --create text element
childEl.appendChild(txtNode);
}
A third method worth mentioning allows us to make a shortcut through
documets that we haven't tagged with unique IDs. DOM nodes can also be
searched for based on their HTML tag type,usinf getElementByTagName(). For
example , document.getElementByTagName('UL') will return an array of all
<UL> tags in the document.
FINDING A DOM NODE
CREATING A DOM NODE
Adding styles to your document:
hello.className='declared';
empty.style.border="solid green 2px";
innerHTML
refactoring 重构
Working with DOM elements
A web page is exposed to Javascript through the Document Object Model
(DOM),a tree-like structure whose elements correspond to the tags of an
HTML document. When manipulating a DOM tree progarmmatically ,it is quite
common to want to find out an element's position on the page.
Unfortunately,browser vendors have provided various nonstandard methods for
doing so over the years,making it diffcult to write fail-safe cross-browser
code to accommplish the task.
window.onloadListeners = new Array();
window.addOnLoadListener(listener){
window.onloadListener[window.onloadListeners.length]=listener;
}
window.onload=function(){
for(var i=0;i<window.onloadListeners.length;i++){
var func = window.onloadListeners[i];
}
}
//------------------------------------------
Reusing user action handlers:命令模式
function buttonOnClickHandler(event){
var data = new Array();
data[0]=6;
data[1]=data[0]/3;
data[2]=data[0]*data[1]+7;
var newRow = createTableRow(dataTable);
for (var i=0;i<data.length;i++){
createTableCell(newRow,data[i]);
}
}
buttonDiv.onclick=buttonOnClickHandler;
//------------------------------------
Keeping only one reference to a resource:Singleton pattern
function TradingMode(){
this.mode=MODE_RED;
}
TradingMode.prototype.setMode=function(){
}
TradingMode.instance = new TradingMode();
var TradingMode={
mode:MODE_RED,
setMode:function(){
...
}
};
基于模板的系统：
Prototype:
Prototype是一个为Javascript编程提供多用途的助手类库，使用一个导向扩展
Javascript语言自己支持一个OO编程方式。Prototype有一个有特色的Javascript编码
样式，基于这些已经增加的语言特性。虽然Prototype编码自身很难阅读，从Java/C#/
样式中被移除存在很久了，使用Prototype，和内建在它上的，是直接的。Prototype
可以考虑为类开发者提供类。AJax应用程序作者更多希望使用类建立类而不是使用
Prototype自身。我们将查询这些类在下面的部分中。在期间，一个主要的关于
Prototype核心的特性讨论将帮助介绍它自身的编码的样式和将在我们讨论
Scriptaculous、Rico和Rubt on Rail.
Prototype允许一个对象扩展通过复制所有的父对象的属性和方法给子其他。这个
特性是最好的举个例子,让我们看一下定义的Vehicle父类
function Vehicle(numWheels,maxSpeed){
this.numWheels = numWheels;
this.maxSpeed = maxSpeed;
}
对此我们想要定义一个精确的实例来表现一个乘客列车。在我们的子类中我们也想表
现客车的数量并支持增加或减少的机制。在常用的Javascript中，我们可能这样写：
var passTrain = new Vehicle(24,100);
passTrain.carriageCount = 12;
passTrain.addCarriage = function(){
this.carriageCount++;
}
passTrain.removeCarriage=function(){
this.carriageCount--;
}
这为我们的PassTrain对象提供需要的功能性。从设计的视图的查看这些代码，虽然它
有点掩饰了扩展扩展性功能性到一个连贯的单元。Prototyp可以在这里帮助我们，通
过允许我们定义扩展行为作为一个对象并且接着使用它扩展基础对象。首先，我们作
为一个对象定义扩展的功能性：
function CarriagePuller(carriageCount){
this.carriageCount = carriageCount;
this.addCarriage=function(){
this.carriageCount++;
}
this.removeCarriage=function(){
this.carriageCount--;
}
}
接着我们合并这两个来支持一个对象包含所有的需要的行为：
var parent = new Vehicle(24,100);
var extension = new CarriagePuller(12);
var passTrain = Object.extend(parent,extension);
注意我们分别在开始后来定义父和扩展对象，接着将他们进行混合。这父子关系存在
这些例中，不在Vehicle和CarriagePuller类中。当它不是正确的经典的面向对象，它
允许我们保持我们代码与系统功能进行关联，在这个拉车按例中，在一个地方，通过
在我们更容易进行复用。我们做这个例子看起来似乎没有什么用处，在大的项目中，
用这种方法封装功能性是非常有用的。
Prototype也以AJax对象的方式提供对Ajax支持，这可以解决超平台XMLHttpRequest对
象。Ajax是被Ajax.Request类型扩展，它可以使用XMLHttpRequest向服务器发送请求
，例如： var req = new Ajax.Request('myData.xml');
这个构造子使用一个我们也将要看到的在很多Prototype-based类库中的样式。它使用
结合的数组来作为一个可选的参数，允许一个宽范围的按照需要进行配置。
Ajax.Updater
The View in an Ajax application
Keepling the logic out of the View 将View分离出logic
间接使用CSS增加事件
绑定事件控制代码
The Rico framework has a concept of Behavior objects that target specific
sections of a DOM tree and add interactivity to them.
Keeping the view out of logic