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