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 重構(gòu)
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(){
...
}
};
基于模板的系統(tǒng)：
Prototype:
Prototype是一個(gè)為Javascript編程提供多用途的助手類庫(kù)，使用一個(gè)導(dǎo)向擴(kuò)展
Javascript語(yǔ)言自己支持一個(gè)OO編程方式。Prototype有一個(gè)有特色的Javascript編碼
樣式，基于這些已經(jīng)增加的語(yǔ)言特性。雖然Prototype編碼自身很難閱讀，從Java/C#/
樣式中被移除存在很久了，使用Prototype，和內(nèi)建在它上的，是直接的。Prototype
可以考慮為類開發(fā)者提供類。AJax應(yīng)用程序作者更多希望使用類建立類而不是使用
Prototype自身。我們將查詢這些類在下面的部分中。在期間，一個(gè)主要的關(guān)于
Prototype核心的特性討論將幫助介紹它自身的編碼的樣式和將在我們討論
Scriptaculous、Rico和Rubt on Rail.
Prototype允許一個(gè)對(duì)象擴(kuò)展通過(guò)復(fù)制所有的父對(duì)象的屬性和方法給子其他。這個(gè)
特性是最好的舉個(gè)例子,讓我們看一下定義的Vehicle父類
function Vehicle(numWheels,maxSpeed){
this.numWheels = numWheels;
this.maxSpeed = maxSpeed;
}
對(duì)此我們想要定義一個(gè)精確的實(shí)例來(lái)表現(xiàn)一個(gè)乘客列車。在我們的子類中我們也想表
現(xiàn)客車的數(shù)量并支持增加或減少的機(jī)制。在常用的Javascript中，我們可能這樣寫：
var passTrain = new Vehicle(24,100);
passTrain.carriageCount = 12;
passTrain.addCarriage = function(){
this.carriageCount++;
}
passTrain.removeCarriage=function(){
this.carriageCount--;
}
這為我們的PassTrain對(duì)象提供需要的功能性。從設(shè)計(jì)的視圖的查看這些代碼，雖然它
有點(diǎn)掩飾了擴(kuò)展擴(kuò)展性功能性到一個(gè)連貫的單元。Prototyp可以在這里幫助我們，通
過(guò)允許我們定義擴(kuò)展行為作為一個(gè)對(duì)象并且接著使用它擴(kuò)展基礎(chǔ)對(duì)象。首先，我們作
為一個(gè)對(duì)象定義擴(kuò)展的功能性：
function CarriagePuller(carriageCount){
this.carriageCount = carriageCount;
this.addCarriage=function(){
this.carriageCount++;
}
this.removeCarriage=function(){
this.carriageCount--;
}
}
接著我們合并這兩個(gè)來(lái)支持一個(gè)對(duì)象包含所有的需要的行為：
var parent = new Vehicle(24,100);
var extension = new CarriagePuller(12);
var passTrain = Object.extend(parent,extension);
注意我們分別在開始后來(lái)定義父和擴(kuò)展對(duì)象，接著將他們進(jìn)行混合。這父子關(guān)系存在
這些例中，不在Vehicle和CarriagePuller類中。當(dāng)它不是正確的經(jīng)典的面向?qū)ο?，?/P>
允許我們保持我們代碼與系統(tǒng)功能進(jìn)行關(guān)聯(lián)，在這個(gè)拉車按例中，在一個(gè)地方，通過(guò)
在我們更容易進(jìn)行復(fù)用。我們做這個(gè)例子看起來(lái)似乎沒有什么用處，在大的項(xiàng)目中，
用這種方法封裝功能性是非常有用的。
Prototype也以AJax對(duì)象的方式提供對(duì)Ajax支持，這可以解決超平臺(tái)XMLHttpRequest對(duì)
象。Ajax是被Ajax.Request類型擴(kuò)展，它可以使用XMLHttpRequest向服務(wù)器發(fā)送請(qǐng)求
，例如： var req = new Ajax.Request('myData.xml');
這個(gè)構(gòu)造子使用一個(gè)我們也將要看到的在很多Prototype-based類庫(kù)中的樣式。它使用
結(jié)合的數(shù)組來(lái)作為一個(gè)可選的參數(shù)，允許一個(gè)寬范圍的按照需要進(jìn)行配置。
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