前 言
RIA是什麼
RIA是Rich Internet Application的縮寫,意為富網際網路套用,引申為富客戶端套用。那么,RIA意味著什麼呢?在回答這個問題之前,我們不妨先回顧一下從大型主機時代開始,套用軟體系統發展至今所走過的歷程:
圖中的兩個坐標軸,分別代表Rich和Reach,即套用軟體的界面表現力和套用軟體所能影響到的人群。
1.主機時代,界面表現力和用戶數量無疑是最低的。少量的用戶使用啞終端操作計算機。
2.隨著計算機製造成本的降低,尤其是個人計算機的普及,使得軟體行業出現了一種新的部署結構:客戶機負責提供豐富的用戶界面、承擔業務邏輯,在伺服器上集中存儲數據。這一階段被稱為C/S(Client/Server)時代。
3.C/S結構最大的問題是部署和維護成本極高,一旦用戶界面或者業務邏輯發生變化,便需要更新分布在每一台客戶機上的軟體。因此,B/S(Browser/Server)結構應運而生。在B/S結構中,客戶端程式統一運行在Web瀏覽器中,用戶界面由伺服器程式渲染生成,客戶端程式只負責展現。部署成本的降低,使得套用軟體的用戶數量激增:網際網路能達到的地方,都可能出現你的用戶。
4.B/S結構至今被人褒貶不一。首先,客戶機的計算能力幾乎被廢棄了,這是一種浪費;其次,用戶界面的表現能力受制於Web瀏覽器,比起C/S結構發生了倒退。那么,能否創造一種在套用軟體的界面表現力和部署成本之間雙贏的局面呢?這就是所謂的RIA。
富客戶端套用也稱胖客戶端套用,是相對於B/S時代的瘦客戶端套用而言的。在RIA時代,一個運行於Web瀏覽器中的客戶端套用,要上升為富客戶端套用,應該具備三個條件:
不輸給桌面套用的、具有豐富效果的複雜用戶界面。
有能力調度服務端的業務邏輯,自行組裝所需要的用戶界面,而不是一味地由服務端渲染生成用戶界面。
在一定程度上突破Web瀏覽器的限制。例如,在必要時能接收伺服器推送來的數據,這意味著打破“瀏覽器請求、伺服器回響”的單調格局。又例如,在必要時能在客戶端存儲部分數據——這是無與倫比的一次跨越,一旦擁有存儲能力,富客戶端套用便能在離線狀態下繼續為用戶提供服務。
JavaScript能為RIA做什麼
接下來,我們從技術方面分析RIA所能選擇的實現手段。筆者歸納,致力於富客戶端這一技術領域的IT廠商大致可以劃分為以下4個陣營。
微軟陣營:鑒於微軟是個人計算機作業系統的最大供應商,出於強化個人計算機地位的初衷,一直致力於富客戶端套用開發技術的研發,這一點從其新近於.NET Framework 3.0中集成的WPF,伴隨著Windows Vista推出的Windows邊欄Gadgets,以及Silverlight等概念中便可見一斑。再加上原有的.NET WinForm、Win32 Application、ActiveX等,微軟真不愧是樂此不疲的客戶端套用開發技術的“高產戶”。其中的ActiveX和Silverlight屬於Web瀏覽器外掛程式技術,非常有可能在RIA市場上搶到一些份額。
Adobe陣營:Adobe緊鑼密鼓地推出Apollo計畫,在其集成開發環境Flex Builder中,使用ActionScript既能開發運行於Flash Player中的Flash,又能開發運行於桌面的AIR套用。由於Flash已經無處不在,Adobe是非常令人看好的一股力量。
Sun陣營:提到Sun的大名,自然令人想到Java。沒有人奢望JavaFX及SWT/Swing/AWT能撼動微軟和Adobe,但是在桌面套用方面形成三足鼎立的局面還是值得期待的。在瀏覽器套用方面,Applet和Java Web Start已經積累下一些成功案例。
Google、Mozilla陣營:Google是雲計算和SaaS(Software as a Service)的領導廠商;Mozilla則擁有技術領先的Web瀏覽器。這是唯一沒有推出自己的桌面套用開發技術,而把全部的賭注押在Web上的陣營。JavaScript+HTML+CSS的組合,遠沒有Silverlight和WPF看起來那么光彩照人,也不像Apollo計畫那么活力四射。但是,正是這一組合,讓微軟不由得發出“Silverlight最大的對手是JavaScript”的感慨。也正是憑藉著這一組合,Google開發出了GMap、GMail、GTalk等令人大開眼界的套用。出於自信,Google認為,未來RIA的平台標準已經確立了,那就是Web。
在琳琅滿目的實現方式中,JavaScript在其中巧妙地穿針引線,扮演著“黏合劑”的作用。JavaScript與各種瀏覽器外掛程式技術(Silverlight、ActiveX、Flash、Applet)均擁有互操作能力,無論這種外掛程式技術是主流的、還是生僻的,是傳統的、還是現代的。
JavaScript是唯一不需安裝任何外掛程式,便被各大主流Web瀏覽器支持的動態腳本,可謂擁有天然的跨平台性。未來之RIA,必是以JavaScript為核心!
本書的內容
征服RIA:基於JavaScript的Web客戶端開發全書共分為5篇。JavaScript基礎篇:介紹JavaScript的語法和基礎套用。如果不打算深究JavaScript幕後機制的話,運用本篇的知識便能勝任一般的JavaScript開發了。JavaScript高級篇:揭示JavaScript的運行機理和高級套用,如面向對象編程、函式式編程和元編程。Ajax篇:Ajax是上帝賜予JavaScript的禮物。憑藉著Ajax,JavaScript擁有了異步調度服務端業務邏輯的能力。本篇除介紹Ajax原理和通用框架之外,還分別為從事Java和。NET開發的程式設計師安排了適合他們的DWR、Atlas框架。Ext篇,增值篇等內容。
本書旨在向讀者推介以JavaScript為核心的RIA開發。讀者將能從本書中發現,JavaScript如何整合各種技術流派,開發出名副其實的RIA:具有複雜用戶界面,以Ajax方式異步調度服務端業務邏輯、自行組裝所需的用戶界面,同時突破Web瀏覽器的限制,具備長連線和離線能力。
全書共分30章、1個附錄。
如何使用本書
本書共分為5篇:
JavaScript基礎篇:介紹JavaScript的語法和基礎套用。如果不打算深究JavaScript幕後機制的話,運用本篇的知識便能勝任一般的JavaScript開發了。
JavaScript高級篇:揭示JavaScript的運行機理和高級套用,如面向對象編程、函式式編程和元編程。
Ajax篇:Ajax是上帝賜予JavaScript的禮物。憑藉著Ajax,JavaScript擁有了異步調度服務端業務邏輯的能力。本篇除介紹Ajax原理和通用框架之外,還分別為從事Java和.NET開發的程式設計師安排了適合他們的DWR、Atlas框架。
Ext篇:能否提供複雜用戶界面,是RIA的一個重要判定標準。在本書中,筆者把這一重任交給了Ext。希望讀者能夠基於Ext開發出不輸給桌面程式的Web套用。
增值篇:增值篇是本書的華彩樂章。在這一篇中,讀者們將看到JavaScript如何遊刃有餘地整合各種技術流派,包括Flash、Applet、Silverlight、ActiveX等,如何開發反向Ajax程式、Comet程式和具備離線能力的程式。
請讀者關註上述的本書內容組織方式,基於這一方式,造成同類知識有時會分散在不同章節中的現象。而造成這一現象的深層次原因,則在於RIA技術選型實在太廣泛了。希望讀者能夠融會貫通。
例如Function對象。在JavaScript基礎篇中僅僅把Function作為JavaScript語法中的一個知識點,而在JavaScript高級篇中則應該將其理解為JavaScript高級編程的精髓所在。
又例如反向Ajax和Comet模式這一對具有內在聯繫的概念。在“適用於Java的Ajax框架——DWR”一章中首次引出反向Ajax這一概念;在“Comet(Server Push)模式”一章中再度實踐了一次反向Ajax;而在“用JavaScript操作ActiveX外掛程式”和“JavaScript與ActionScript的互操作”兩章中,利用ActiveX和Flash技術再次分別實現了Comet模式。
在RIA和JavaScript開發領域,不存在深奧的理論,有的只是動手實踐的快樂。筆者和同事楊先亭是懷著輕鬆愉悅的心情完成本書的,也祝大家閱讀愉快!
最後,在兩句略具調侃韻味的口號聲中結束本文。
全世界計算機,聯合起來!
以JavaScript為核心,奪取RIA開發的更大勝利!
塗傳濱
2008年12月27日於廈門
目 錄 JavaScript基礎篇
第1章 JavaScript基礎
1.1 JavaScript概述 2
1.1.1 JavaScript的特點 2
1.1.2 JavaScript的局限性 3
1.2 從網頁中引用JavaScript 5
1.2.1 定義腳本語言的類型 5
1.2.2 調用外部腳本檔案 6
1.3 創建JavaScript檔案 7
1.4 JavaScript注釋 9
第2章 JavaScript語法
2.1 JavaScript變數 11
2.1.1 在腳本中定義變數 11
2.1.2 變數類型 13
2.1.3 數據類型之間的轉換 13
2.1.4 存取變數 14
2.2 JavaScript函式 15
2.2.1 定義函式 15
2.2.2 輸入參數 16
2.2.3 函式輸出值 18
2.3 JavaScript運算符 18
2.3.1 概述 19
2.3.2 算術運算符 19
2.3.3 賦值運算符 21
2.3.4 比較運算符 22
2.3.5 邏輯運算符 23
2.3.6 位運算符 23
2.3.7 運算順序 24
2.4 條件與循環語句 25
2.4.1 條件語句的定義 25
2.4.2 條件語句 26
2.4.3 循環語句的定義 28
2.4.4 循環語句 29
第3章 事件與對象
3.1 事件句柄 32
3.1.1 事件句柄的定義 32
3.1.2 常用事件句柄 33
3.1.3 其他事件 36
3.1.4 動態添加事件回響 42
3.2 JavaScript對象 43
3.2.1 什麼是對象 43
3.2.2 創建對象 44
3.2.3 JavaScript內置的瀏覽器對象 45
3.2.4 對象方法劫持 46
第4章 常用對象
4.1 JavaScript數組 49
4.1.1 數組的含義 49
4.1.2 定義和運算元組 50
4.1.3 Array對象的屬性 51
4.1.4 Array對象的方法 52
4.1.5 關聯數組 60
4.1.6 數組套用舉例——記憶腳本動作 60
4.2 數學和日期對象 63
4.2.1 數學對象 63
4.2.2 數學對象的屬性 63
4.2.3 數學對象的方法 65
4.2.4 日期對象 68
4.3 字元串 75
4.3.1 字元串對象簡介 75
4.3.2 字元串對象的屬性 75
4.3.3 字元串對象的方法 77
4.3.4 正則表達式 86
第5章 JavaScript與瀏覽器
5.1 document對象 91
5.1.1 document對象簡介 91
5.1.2 document對象的屬性 92
5.1.3 document對象的方法 102
5.1.4 訪問本地檔案系統 103
5.2 window對象 105
5.2.1 window對象簡介 105
5.2.2 window對象的屬性 106
5.2.3 window對象的方法 112
5.3 JavaScript與表單 121
5.3.1 表單存取 121
5.3.2 表單元素的屬性 122
5.3.3 表單元素的方法 125
5.3.4 表單的提交 126
5.4 JavaScript與框架 128
5.4.1 框架簡介 128
5.4.2 框架的選項 131
5.4.3 定位框架 132
5.4.4 操作框架 133
目錄 JavaScript高級篇
第6章 JavaScript面向對象編程
6.1 對象的多態性 136
6.1.1 自定義對象的多態性 137
6.1.2 內置對象的多態性 137
6.2 對象的創建 138
6.2.1 使用內置對象 139
6.2.2 使用JSON符號 139
6.2.3 自定義對象構造 139
6.3 對象的繼承 140
6.3.1 原型鏈繼承 141
6.3.2 使用apply、call方法 141
6.3.3 對象實例間的繼承 143
6.4 對象成員的可見性 143
第7章 JavaScript數據類型
7.1 數據類型 146
7.1.1 Number 147
7.1.2 String 147
7.1.3 Boolean 148
7.1.4 Undefined 148
7.1.5 null 148
7.1.6 複合類型 149
7.2 數據類型轉換 149
7.2.1 轉換為Number 149
7.2.2 轉換為String 150
7.2.3 轉換為Boolean 150
7.3 數據的傳遞 151
7.3.1 值傳遞 151
7.3.2 引用傳遞 152
第8章 JavaScript函式對象
8.1 JavaScript Function對象 153
8.1.1 Function對象的屬性和方法 153
8.1.2 定義Function 156
8.2 閉包 157
8.2.1 閉包的套用 157
8.2.2 避免閉包引發的問題 158
8.3 函式式編程 160
8.3.1 函式式編程的思想 160
8.3.2 函式式編程的原理 160
8.3.3 函式式編程的套用 161
8.4 元編程 163
8.4.1 元編程的思想 163
8.4.2 元編程的套用 163
第9章 JavaScript運行機制
9.1 作用域鏈(Scope Chian) 165
9.1.1 從var說起 165
9.1.2 Scope Chain是什麼 167
9.2 原型鏈(Prototype Chain) 168
9.3 兩個隱式對象 169
9.3.1 this 169
9.3.2 Global 170
第10章 JavaScript正則表達式
10.1 正則表達式基礎 172
10.1.1 元字元 172
10.1.2 元字元操作優先權順序 174
10.1.3 貪婪匹配與非貪婪匹配 175
10.1.4 分組 175
10.1.5 反向引用 176
10.2 RegExp和正則表達式對象 176
10.2.1 RegExp對象 176
10.2.2 正則表達式對象 178
10.3 NFA和DFA正則表達式引擎 179
目錄 Ajax篇
第11章 Ajax概述
11.1 Ajax的由來 182
11.2 傳統的Web運用 183
11.3 Ajax的工作原理 184
11.4 Ajax的優點與缺陷 184
第12章 Ajax用到的技術
12.1 HTML與XHTML 185
12.1.1 HTML、XHTML與Ajax 185
12.1.2 HTML基礎 186
12.1.3 XHTML基礎 189
12.2 XML 191
12.3 JSON 192
12.3.1 JSON與Ajax 192
12.3.2 JSON基礎 193
12.4 CSS 194
12.4.1 CSS與Ajax 194
12.4.2 使用CSS的方法 194
12.4.3 CSS語法 195
12.5 JavaScript 197
12.6 DOM與DHTML 197
12.6.1 DOM、DHTML與Ajax 197
12.6.2 操作HTML、XHTML文檔 198
12.6.3 操作XML文檔 201
12.7 HTTP 203
12.8 XmlHttpRequest對象 205
12.8.1 XmlHttpRequest對象與Ajax 205
12.8.2 XmlHttpRequest對象簡介 205
第13章 Ajax開發簡略
13.1 如何使用Ajax 207
13.1.1 初始化對象 207
13.1.2 指定回響函式 208
13.1.3 發出HTTP請求 209
13.1.4 處理伺服器返回的信息 210
13.2 字元亂碼處理 211
13.2.1 字元集 212
13.2.2 字元編碼 214
13.2.3 實例 215
13.3 prototype.js 217
13.3.1 通用性方法 217
13.3.2 Ajax對象 219
13.4 MooTools 221
第14章 適用於Java的Ajax 框架
14.1 DWR簡介 225
14.2 DWR的回調機制 226
14.3 DWR的異常機制 227
14.4 DWR核心 228
14.5 DWR的配置 229
14.5.1 Web.xml的配置 229
14.5.2 dwr.xml的配置 230
14.5.3 DWR的WebContext 234
14.6 DWR套用實例 235
14.7 利用DWR實現反向Ajax 243
第15章 適用於.NET的Ajax 框架
15.1 在Visual Studio 2005中手工開發Ajax套用 248
15.2 在Visual Studio 2005中設定Atlas框架環境 252
15.3 Atlas例程 252
目錄 Ext篇
第16章 Ext概述
16.1 組件模型 258
16.1.1 組件的創建 259
16.1.2 組件的渲染 260
16.1.3 組件的銷毀 260
16.2 容器模型 261
16.3 布局模型 261
16.4 Ext核心 262
16.4.1 Ext 262
16.4.2 Observable 266
16.4.3 MixedCollection 269
16.4.4 總結 271
第17章 Ext數據操作
17.1 數據傳輸 272
17.2 數據處理 277
17.2.1 數據訪問代理Ext.data.DataProxy 277
17.2.2 數據解析器Ext.data.DataReader 278
17.3 數據模型 279
第18章 Ext組件
18.1 所有組件的始祖Ext.Component 282
18.1.1 Xtype 283
18.1.2 Ext的UI組件庫 283
18.1.3 Ext.Component的主要屬性 284
18.1.4 Ext.Component的主要方法 285
18.2 容器組件的始祖Ext.BoxComponent 288
18.2.1 Ext.Container 288
18.2.2 Ext.Panel 289
18.3 表格相關組件 292
18.3.1 GridPanel 292
18.3.2 TabPanel 295
18.4 選單相關組件 302
18.4.1 TreePanel 302
18.4.2 ToolBar 304
18.4.3 Menu 305
18.5 表單相關組件 307
18.5.1 FormPanel 307
18.5.2 BasicForm 308
18.5.3 Field 310
18.5.4 FieldSet 311
18.6 視窗相關組件 311
18.6.1 Window 311
18.6.2 MessageBox 314
18.7 Ext組件小結 317
第19章 Ext布局
19.1 Ext.Element 320
19.2 Ext.EventManager 322
19.3 Ext.DomQuery 324
19.4 布局管理器 325
19.4.1 ContainerLayout 326
19.4.2 FitLayout 326
19.4.3 TableLayout 327
19.4.4 AnchorLayout 329
19.4.5 BorderLayout 330
19.4.6 ColumnLayout 332
19.4.7 Accordion 333
19.4.8 CardLayout 335
19.4.9 AbsoluteLayout 337
19.4.10 FormLayout 338
目錄 增值篇
第20章 基於JavaScript的 ASP開發 342
第21章 用JavaScript操作Silverlight 365
第22章 Windows平台上的HTML組件與腳本宿主 373
第23章 用JavaScript製作 COM組件 387
第24章 用JavaScript操作ActiveX外掛程式 392
第25章 Java與JavaScript 的互操作 409
第26章 JavaScript與ActionScript的互操作 429
第27章 Comet(Server Push)模式 448
第28章 基於Google Gears 開發離線套用 456
第29章 用XSLT轉換XML 數據島 470
第30章 JavaScript開發工具箱 481
附錄A Gadgets開發概覽 497