瘋狂Ajax講義：jQuery/Ext JS/Prototype/DWR企業(yè)應用前端開發(fā)實戰(zhàn)（第3版）

第1章　Ajax概述與Ajax初體驗 1
1.1  重新思考Web應用 2
1.1.1　應用系統(tǒng)的發(fā)展史 2
1.1.2　傳統(tǒng)Web應用的優(yōu)勢和缺點 5
1.2　重新設計Web應用 5
1.2.1　富Internet應用 6
1.2.2　使用Ajax 7
1.3　Ajax技術(shù)介紹 7
1.3.1　Ajax的工作方式 8
1.3.2　Ajax技術(shù)核心：XMLHttpRequest 8
1.3.3　Ajax的編程腳本：JavaScript語言 8
1.3.4　HTML頁面的DOM模型 9
1.3.5　動態(tài)加載和顯示數(shù)據(jù) 9
1.3.6　Ajax的特征 10
1.3.7　Ajax帶來的典型優(yōu)勢 11
1.4　開發(fā)傳統(tǒng)的B/S聊天室 13
1.4.1　實現(xiàn)業(yè)務邏輯組件 14
1.4.2　實現(xiàn)控制器 16
1.4.3　實現(xiàn)視圖 18
1.4.4　傳統(tǒng)B/S聊天室的問題 19
1.5　Ajax聊天室 20
1.5.1　異步發(fā)送請求 20
1.5.2　解決多余刷新的問題 22
1.5.3　解析服務器響應 24
1.5.4　何時發(fā)送請求 25
1.5.5　Ajax聊天室的特點 29
1.6　Ajax編程的技術(shù)難點 29
1.7　傳統(tǒng)Web應用與Ajax應用的對比 31
1.8　本章小結(jié) 32
第2章　XMLHttpRequest對象詳解 33
2.1　XMLHttpRequest對象概述 34
2.2　XMLHttpRequest的方法和屬性 34
2.2.1　XMLHttpRequest的方法 35
2.2.2　XMLHttpRequest的屬性 38
2.3　發(fā)送請求 41
2.3.1　發(fā)送簡單請求 41
2.3.2　發(fā)送GET請求 43
2.3.3　發(fā)送POST請求 46
2.3.4　發(fā)送請求時的編碼問題 47
2.3.5　發(fā)送XML請求 51
2.4　處理服務器響應 54
2.4.1　處理的時機 54
2.4.2　使用文本響應 54
2.4.3　使用JSON響應 54
2.5　XMLHttpRequest對象的運行周期 57
2.6　Ajax必須解決的問題 58
2.6.1　跨瀏覽器問題 58
2.6.2　安全性問題 59
2.6.3　性能問題 61
2.7　本章小結(jié) 65
第3章　jQuery庫詳解 66
3.1　jQuery入門 67
3.1.1　理解jQuery的設計 67
3.1.2　下載和安裝jQuery 68
3.1.3　讓jQuery與其他JavaScript庫共存 69
3.2　獲取jQuery對象 69
3.2.1　jQuery核心函數(shù) 70
3.2.2　jQuery與jQuery.holdReady 71
3.2.3　以CSS選擇器訪問DOM元素 72
3.2.4　選擇器的附加限定詞 74
3.2.5　表單相關(guān)的選擇器 77
3.3　jQuery操作類數(shù)組的工具方法 80
3.3.1　過濾相關(guān)方法 81
3.3.2　仿DOM導航查找的相關(guān)方法 83
3.3.3　鏈接方法 85
3.4　jQuery支持的方法 86
3.4.1　jQuery命名空間的方法 86
3.4.2　數(shù)據(jù)存儲的相關(guān)方法 90
3.4.3　操作屬性的相關(guān)方法 91
3.4.4　操作CSS屬性的相關(guān)方法 93
3.4.5　操作元素內(nèi)容的相關(guān)方法 96
3.4.6　操作DOM節(jié)點的相關(guān)方法 98
3.5　jQuery事件相關(guān)方法 103
3.5.1　綁定事件處理函數(shù) 103
3.5.2　特定事件相關(guān)的方法 105
3.5.3　事件對象 106
3.6　動畫效果相關(guān)的方法 108
3.6.1　簡單動畫和復雜動畫 108
3.6.2　操作動畫隊列 111
3.7　jQuery的回調(diào)支持 112
3.7.1　回調(diào)支持的基本用法 112
3.7.2　創(chuàng)建Callbacks支持的選項 114
3.8　Ajax相關(guān)方法 116
3.8.1　三個工具方法 116
3.8.2　使用load方法 117
3.8.3　jQuery.ajax(options)與jQuery.ajaxSetup(options) 119
3.8.4　使用get/post方法 120
3.9　jQuery的Deferred對象 123
3.9.1　jQuery的異步調(diào)用 123
3.9.2　為多個耗時操作指定回調(diào)函數(shù) 127
3.9.3　為普通對象增加Defered接口 127
3.9.4　jQuery對象的promise方法 128
3.10　擴展jQuery和jQuery插件 129
3.11　本章小結(jié) 130
第4章　基于jQuery的應用：電子相冊系統(tǒng) 131
4.1　實現(xiàn)持久層 132
4.1.1　實現(xiàn)持久化類 132
4.1.2　配置SessionFactory 134
4.2　實現(xiàn)DAO組件 135
4.2.1　開發(fā)通用DAO組件 136
4.2.2　DAO接口定義 139
4.2.3　完成DAO組件的實現(xiàn)類 139
4.3　實現(xiàn)業(yè)務邏輯層 141
4.3.1　實現(xiàn)業(yè)務邏輯組件 141
4.3.2　配置業(yè)務邏輯組件 143
4.4　實現(xiàn)客戶端調(diào)用 144
4.4.1　訪問業(yè)務邏輯組件 144
4.4.2　處理用戶登錄 145
4.4.3　獲得用戶相片列表 148
4.4.4　處理翻頁 149
4.4.5　通過隱藏iframe實現(xiàn)文件上傳 150
4.4.6　頁面加載時的處理 154
4.5　本章小結(jié) 155
第5章　Ext JS核心技術(shù)詳解 157
5.1　Ext JS入門 158
5.1.1　下載和安裝Ext JS 158
5.1.2　Ext 入門示例 159
5.1.3　使用Ext JS文檔 160
5.2　核心工具方法 162
5.2.1　Ext的屬性和獲取瀏覽器特性 162
5.2.2　onReady方法 163
5.2.3　Ext.defer方法 163
5.2.4　Ext.apply和Ext.applyIf方法 164
5.2.5　Ext.define、Ext.create和Ext.extend方法 166
5.2.6　Ext.isXxx方法 169
5.2.7　Ext.each和Ext.iterate方法 169
5.2.8　Ext.namespace方法 170
5.3　Ext JS擴展的工具方法 171
5.3.1　為Array擴展的工具方法 171
5.3.2　為Date擴展的工具方法 173
5.3.3　為Function擴展的工具方法 173
5.3.4　為Number擴展的工具方法 174
5.3.5　為Object擴展的工具方法 175
5.3.6　為String擴展的工具方法 175
5.3.7　JSON支持 176
5.4　簡化的DOM操作 177
5.4.1　Ext.get、Ext.getXxx和Ext.fly方法 177
5.4.2　Ext.query、Ext.select方法與Ext.dom.Query工具類 178
5.4.3　DOM元素的常用操作 182
5.4.4　使用Ext.DomHelper、Ext.Template動態(tài)生成HTML 188
5.5　動畫處理 192
5.5.1　使用Ext.fx.Anim實現(xiàn)簡單動畫 192
5.5.2　使用Ext.fx.Animator實現(xiàn)多關(guān)鍵幀動畫 194
5.5.3　為元素增加動畫 195
5.6　Ext JS的事件處理 197
5.6.1　使用Ext.EventManager管理事件處理函數(shù)與Ext.EventObject事件對象 197
5.6.2　事件處理函數(shù)的執(zhí)行范圍和附加選項 200
5.6.3　使用Ext.util.Observable實現(xiàn)內(nèi)部事件 201
5.7　實用工具集 203
5.7.1　Ext.util.HashMap與Ext.util.MixedCollection 203
5.7.2　使用Ext.util.Cookies操作Cookie 204
5.7.3　使用Ext.util.DelayedTask 處理延時任務 205
5.7.4　包裝單擊事件：Ext.util.ClickRepeater 205
5.7.5　使用Ext.util.TaskRunner與Ext.TaskManager 206
5.7.6　使用Ext.util.KeyMap與Ext.util.KeyNav為元素處理按鍵事件 207
5.8　拖放 209
5.8.1　使用Ext.dd.DD和Ext.dd.DDProxy創(chuàng)建可拖放元素 209
5.8.2　用Ext.dd.DragSource創(chuàng)建拖動源與用Ext.dd.DropTarget創(chuàng)建放目標 210
5.8.3　用Ext.dd.DragZone創(chuàng)建拖動源與用Ext.dd.DropZone創(chuàng)建放目標 212
5.9　Ajax支持 214
5.10　本章小結(jié) 217
第6章　Ext JS界面組件詳解 218
6.1　容器、面板和窗口 219
6.1.1　使用Ext.Component 220
6.1.2　使用Ext.container.Container創(chuàng)建容器 222
6.1.3　使用Ext.panel.Panel創(chuàng)建面板 223
6.1.4　使用Ext.toolbar.ToolBar添加工具條 226
6.1.5　使用Ext.tab.Panel創(chuàng)建Tab面板 229
6.1.6　使用Ext.container.Viewport整體布局 231
6.1.7　使用Ext.window.Window創(chuàng)建窗口 234
6.1.8　使用Ext.window.MessageBox創(chuàng)建對話框 235
6.2　布局 238
6.2.1　容器與布局的關(guān)系 238
6.2.2　垂直布局與水平布局 238
6.2.3　使用Ext.resizer.Resizer為組件增加大小調(diào)整功能 239
6.2.4　使用Ext.resizer.Splitter為盒布局增加大小調(diào)整的功能 241
6.2.5　使用Ext.layout.container.Accordion實現(xiàn)折疊布局 242
6.2.6　使用Ext.layout.container.Border實現(xiàn)邊框布局 244
6.2.7　使用Ext.layout.container.Table實現(xiàn)表格布局 245
6.2.8　使用Ext.layout.container.Column實現(xiàn)列布局 246
6.2.9　使用Ext.layout.container.Auto實現(xiàn)自動布局 248
6.2.10 使用Ext.layout.container.Fit實現(xiàn)自適應布局 249
6.2.11 使用Ext.layout.container.Card實現(xiàn)卡片布局 250
6.2.12 使用Ext.layout.container.Anchor實現(xiàn)錨布局 252
6.2.13 使用Ext.layout.container.Absolute實現(xiàn)絕對布局 253
6.3　菜單及菜單項 254
6.3.1　使用菜單 254
6.3.2　使用Ext.menu.CheckItem實現(xiàn)可勾選菜單項 256
6.3.3　使用Ext.menu.ColorPicker創(chuàng)建顏色選擇器菜單 257
6.3.4　使用Ext.menu.DatePicker創(chuàng)建日期選擇菜單 258
6.4　按鈕 259
6.4.1　使用按鈕 259
6.4.2　帶菜單的按鈕 261
6.4.3　帶分割線的按鈕：Ext.button.Split 263
6.4.4　多狀態(tài)按鈕：Ext.button.Cycle 264
6.4.5　使用Ext.container.ButtonGroup創(chuàng)建按鈕組 266
6.4.6　使用Ext.Action 267
6.5　其他組件及實用功能 270
6.5.1　使用Ext. ProgressBar創(chuàng)建進度條 270
6.5.2　使用Ext.slider.Single創(chuàng)建滑動條 274
6.5.3　使用Ext.slider.Multi創(chuàng)建多滑塊滑動條 276
6.5.4　使用Ext.Img創(chuàng)建圖片 277
6.5.5　使用Ext.Editor創(chuàng)建編輯器 278
6.5.6　使用Ext.tip.ToolTip創(chuàng)建提示 279
6.5.7　使用Ext.tip.QuickTipManager和Ext.tip.QuickTip創(chuàng)建提示 283
6.5.8　使用Ext.ux.GMapPanel實現(xiàn)Google地圖 284
6.6　表單 286
6.6.1　使用Ext.form.Panel與Ext.form.Basic創(chuàng)建表單 288
6.6.2　配置輸入校驗選項 292
6.6.3　使用vtype選項配置輸入校驗 294
6.6.4　使用Ext.form.action.Submit提交表單 297
6.6.5　使用Ext.form.action.Load為表單裝載數(shù)據(jù) 300
6.6.6　使用Ext.form.action.StandardSubmit提交表單 303
6.6.7　單行文本框、密碼框 303
6.6.8　使用Ext.form.field.Number 創(chuàng)建數(shù)值框 305
6.6.9　使用Ext.form.field.Date創(chuàng)建日期選擇框 306
6.6.10 使用Ext.form.field.Spinner創(chuàng)建微調(diào)選擇框 308
6.6.11 使用Ext.form.field.TextArea創(chuàng)建文本域 309
6.6.12 使用Ext.form.field.HtmlEditor創(chuàng)建富文本編輯器 310
6.6.13 使用Ext.form.field.File上傳文件 311
6.6.14 使用Ext.form.field.Checkbox創(chuàng)建復選框 314
6.6.15 使用Ext.form.field.Radio創(chuàng)建單選按鈕 317
6.6.16 使用Ext.form.field.ComboBox創(chuàng)建復合框 319
6.6.17 使用遠程數(shù)據(jù)、queryMode為local的復合框 321
6.6.18  queryMode為remote的復合框 323
6.6.19 為Ext.form.field.ComboBox增加分頁功能 325
6.6.20 實現(xiàn)Ext.form.field.ComboBox二級聯(lián)動 327
6.6.21 使用Ext.form.FieldSet組合表單控件 330
6.7　Ext JS的數(shù)據(jù)中心 332
6.7.1　Ext.data.Model與Ext.data.Field 332
6.7.2　使用Ext.data.proxy.Proxy和Ext.data.reader.Reader讀取數(shù)據(jù) 335
6.7.3　Ext.data.Store及其子類 336
6.8　使用Ext.grid.Panel生成表格 337
6.8.1　使用Ext.grid.Panel生成表格 337
6.8.2　使用Ext.grid.column.Column定義列 339
6.8.3　使用Ext.grid.Panel顯示遠程數(shù)據(jù) 342
6.8.4　對Ext.grid.Panel表格進行分頁 343
6.8.5　對本地數(shù)據(jù)進行分頁 344
6.8.6　表格數(shù)據(jù)排序和過濾 346
6.8.7　通過表格特性對表格數(shù)據(jù)進行分組 347
6.8.8　開發(fā)動態(tài)編輯的表格 349
6.8.9　允許拖動數(shù)據(jù)的表格 352
6.8.10 使用Ext.grid.column.Action 操作表格數(shù)據(jù) 356
6.9　使用Ext.tree.Panel生成樹 360
6.9.1　樹有關(guān)的類及簡單樹 360
6.9.2　添加、刪除、修改樹節(jié)點 362
6.9.3　帶復選框的樹節(jié)點 365
6.9.4　表格樹 366
6.9.5　異步加載樹節(jié)點 368
6.9.6　樹節(jié)點的拖放與通過拖放更新底層數(shù)據(jù) 372
6.10　本章小結(jié) 376
第7章　Prototype庫詳解 377
7.1　Prototype的下載和安裝 378
7.1.1　什么是Prototype庫 378
7.1.2　下載和安裝Prototype庫 379
7.1.3　使用Prototype對象 379
7.2　Prototype的工具函數(shù) 380
7.2.1　使用$()函數(shù) 380
7.2.2　使用$$()函數(shù) 382
7.2.3　使用$A()函數(shù) 384
7.2.4　使用$F()函數(shù) 385
7.2.5　使用$w()函數(shù) 386
7.2.6　使用$H()函數(shù) 386
7.2.7　使用$R()函數(shù) 387
7.2.8　使用Try.these()函數(shù) 388
7.3　Prototype的JSON支持 389
7.4　Prototype的自定義對象和類 390
7.4.1　使用Element對象 390
7.4.2　使用Element.Methods 394
7.4.3　使用Enumerable 394
7.4.4　使用ObjectRange 398
7.4.5　使用Form.Element操作表單控件 399
7.4.6　使用Form操作表單 400
7.4.7　使用Hash對象 402
7.4.8　使用Event 404
7.4.9　使用Template 405
7.4.10 使用Class 406
7.4.11 兩個常用的監(jiān)聽器 407
7.5　Prototype常用的擴展 409
7.5.1　擴展Array 409
7.5.2　擴展document 410
7.5.3　擴展String 411
7.5.4　擴展Function 414
7.5.5　擴展Number 415
7.6　Prototype的Ajax支持 416
7.6.1　使用Ajax.Request類 416
7.6.2　利用Form.request方法 420
7.6.3　使用Ajax.Responders對象 421
7.6.4　使用Ajax對象 422
7.6.5　使用Ajax.Updater類 423
7.6.6　使用Ajax.PeriodicalUpdater類 426
7.7　本章小結(jié) 428
第8章　基于Prototype庫的應用：自動完成 429
8.1　應用的基本分析和持久層設計 430
8.1.1　數(shù)據(jù)要求 430
8.1.2　實現(xiàn)持久化類 430
8.1.3　實現(xiàn)DAO組件 432
8.1.4　部署DAO組件 434
8.2　實現(xiàn)Service組件 435
8.3　使用Servlet提供服務器響應 437
8.3.1　根據(jù)前綴查詢品牌 438
8.3.2　根據(jù)品牌查詢型號 439
8.3.3　根據(jù)型號查詢詳細信息 439
8.4　客戶端HTML頁面實現(xiàn) 440
8.5　增加HTML頁面的事件響應能力 442
8.5.1　實現(xiàn)品牌輸入框的事件處理器 442
8.5.2　實現(xiàn)鍵盤事件的處理器 444
8.5.3　根據(jù)品牌提示型號 446
8.5.4　根據(jù)型號顯示描述 447
8.5.5　注冊Ajax事件監(jiān)聽器 448
8.6　本章小結(jié) 449
第9章　DWR框架詳解 451
9.1　DWR的下載和安裝 452
9.1.1　什么是DWR 452
9.1.2　下載和安裝DWR 453
9.2　使用DWR 457
9.2.1　編寫處理類 458
9.2.2　配置DWR 460
9.3　使用DWR的轉(zhuǎn)換器 461
9.3.1　基本轉(zhuǎn)換器 461
9.3.2　對象轉(zhuǎn)換器 462
9.3.3　數(shù)組轉(zhuǎn)換器 464
9.3.4　集合類型轉(zhuǎn)換器 464
9.4　方法聲明定義 465
9.5　使用DWR的創(chuàng)建器 466
9.5.1　創(chuàng)建器的配置 466
9.5.2　使用new創(chuàng)建器 468
9.5.3　使用none創(chuàng)建器 469
9.5.4　使用script創(chuàng)建器 469
9.6　調(diào)用服務器端的方法 470
9.6.1　調(diào)用服務器端方法的通用配置 471
9.6.2　使用簡單回調(diào) 472
9.6.3　使用JSON格式的回調(diào) 476
9.6.4　將客戶端參數(shù)傳遞到回調(diào)函數(shù) 479
9.7　使用engine.js 480
9.7.1　設置調(diào)用順序 480
9.7.2　設置全局超時時長 481
9.7.3　設置全局Hook函數(shù) 481
9.7.4　設置全局處理函數(shù) 481
9.7.5　設置常用的全局選項 482
9.7.6　批處理 482
9.8　使用util.js 483
9.8.1　使用$() 483
9.8.2　處理列表 483
9.8.3　處理表格 488
9.8.4　訪問HTML元素值 492
9.8.5　幾個工具函數(shù) 494
9.9　整合第三方Java EE框架 496
9.9.1　訪問Servlet API 496
9.9.2　整合Spring 500
9.10 使用DWR注釋 502
9.10.1　初始配置 502
9.10.2　標注創(chuàng)建器和轉(zhuǎn)換器 503
9.11 異常處理 504
9.12 反向Ajax 506
9.12.1　配置反向Ajax 506
9.12.2　在Java方法中操作Web頁 507
9.12.3　在客戶端調(diào)用反向Ajax方法 509
9.13 DWR 3簡化的文件上傳 510
9.13.1　文件上傳的處理類 510
9.13.2　調(diào)用JavaScript完成文件上傳 512
9.14 本章小結(jié) 514
第10章　基于DWR的應用：即時消息系統(tǒng) 515
10.1　實現(xiàn)Hibernate持久層 516
10.1.1　實現(xiàn)持久化類 516
10.1.2　將POJO映射成持久化對象 518
10.2　實現(xiàn)DAO組件 519
10.2.1　實現(xiàn)DAO組件 519
10.2.2　部署DAO組件 520
10.3　實現(xiàn)業(yè)務邏輯組件 521
10.3.1　業(yè)務邏輯組件的接口 521
10.3.2　業(yè)務邏輯組件的實現(xiàn)類 522
10.3.3　部署業(yè)務邏輯組件 525
10.4　開發(fā)DWR前端處理類 526
10.4.1　實現(xiàn)DWR前端處理組件 526
10.4.2　為前端處理器增加權(quán)限控制 528
10.5　處理異步請求 529
10.5.1　將Spring容器中的Bean創(chuàng)建成JavaScript對象 529
10.5.2　處理用戶登錄 531
10.5.3　處理用戶注冊 532
10.5.4　處理消息發(fā)布 534
10.5.5　獲取消息列表 535
10.5.6　處理分頁 536
10.5.7　查看消息內(nèi)容 537
10.5.8　頁面加載時的處理 538
10.6　本章小結(jié) 539
第11章　基于Ext JS 4.1的應用：簡易Blog系統(tǒng) 540
11.1　實現(xiàn)Hibernate持久層 541
11.1.1　設計Hibernate的持久化類 541
11.1.2　完成映射文件 543
11.2　實現(xiàn)DAO組件 545
11.2.1　DAO接口定義 546
11.2.2　實現(xiàn)DAO組件 546
11.2.3　配置DAO組件 547
11.3　實現(xiàn)業(yè)務邏輯組件 548
11.3.1　業(yè)務邏輯組件的接口 548
11.3.2　業(yè)務邏輯組件的實現(xiàn)類 549
11.3.3　配置業(yè)務邏輯組件 552
11.4　使用Ext JS開發(fā)前端 553
11.4.1　初始化界面 553
11.4.2　顯示指定Blog文章 557
11.4.3　顯示回復列表 559
11.4.4　添加回復 561
11.4.5　發(fā)表新Blog文章 565
11.5　本章小結(jié) 569
第12章　Ajax實例：電子拍賣系統(tǒng) 570
12.1　總體說明和概要設計 571
12.1.1　系統(tǒng)的總體架構(gòu)設計 571
12.1.2　數(shù)據(jù)庫設計 572
12.2　實現(xiàn)Hibernate持久化類 573
12.2.1　設計Domain Object 574
12.2.2　實現(xiàn)Domain Object 575
12.3　DAO層實現(xiàn) 579
12.3.1　DAO的基礎(chǔ)配置 579
12.3.2　實現(xiàn)DAO組件 580
12.3.3　部署DAO組件 583
12.4　業(yè)務邏輯層實現(xiàn) 584
12.4.1　設計業(yè)務邏輯組件 584
12.4.2　依賴注入DAO組件 586
12.4.3　業(yè)務邏輯組件的異常處理 587
12.4.4　處理用戶競價 588
12.4.5　判斷拍賣物品狀態(tài) 590
12.4.6　事務管理 592
12.4.7　配置業(yè)務層組件 592
12.5　暴露前端處理方法 595
12.5.1　定義DWR前端處理類 595
12.5.2　初始化Spring容器 597
12.5.3　配置DWR的核心Servlet 597
12.5.4　暴露前端處理方法 598
12.5.5　對前端處理方法增加權(quán)限檢查 600
12.6　調(diào)用前端處理方法響應用戶請求 601
12.6.1　頁面加載時的函數(shù) 601
12.6.2　處理返回首頁的請求 602
12.6.3　瀏覽所有流拍物品 602
12.6.4　處理用戶登錄 605
12.6.5　管理物品 609
12.6.6　管理物品種類 612
12.6.7　查看競得物品 616
12.6.8　查看自己的競價記錄 617
12.6.9　瀏覽拍賣物品 619
12.6.10 參與競價 621
12.7　本章小結(jié) 624