Crazy Ajax handout (version 3rd)
Basic Information
Author: Li Gang [Translator's introduction]
Press: Tsinghua University Press
ISBN: 9787121193941
Mounting time:-4
Published on: February 1, February 2013
Start: 16
Page number: 636
Version: 1-1
Category: Computer> Software and programming> network programming> Javascript
For more information, crazy Ajax handouts (version 3rd)
Introduction
Computer books
Crazy Ajax handouts (version 3rd) -- jquery/ext js/prototype/DWR enterprise application front-end development practices: Version 3rd of crazy Ajax handouts, where jquery is upgraded to version 1.8; upgrade prototype to version 1.7.1 and DWR to version 3.0. The biggest update of version 3rd provides a detailed and comprehensive introduction to ext JS 4.1. Because ext JS 4.1 has a lot of content, this book takes hundreds of pages to introduce the functions and usage of ext JS. This part of content can be used as an independent learning manual for ext JS 4.1.
Crazy Ajax handout (version 3rd) -- jquery/ext js/prototype/DWR enterprise application front-end development practices "describes the usage of jquery 1.8, ext JS 4.1, prototype 1.7.1, and DWR, the four most commonly used Ajax frameworks, A practical case is provided for each framework, which allows readers to relate theory to practice. This part is the standard handout of "crazy software education center". It not only contains the key points and difficulties of actual Ajax development, but also integrates the learning experience and insights of a large number of learners. Based on the rich teaching experience, I will introduce them in a simple way and hope that the readers can grasp the essence of Ajax development. This book provides two comprehensive cases: the blog system and the electronic auction system, allowing readers to apply what they have learned to practical projects. The electronic auction system is a system with five tables and complex association ing between tables. This case uses the most popular and standardized lightweight Java EE architecture, divide the entire application into the domain object Layer, Dao layer, and business logic layer, and then use DWR as the Ajax engine to call the business logic method to respond to asynchronous requests. The system permission check is postponed to the business logic layer, the HTTP session is used to track the user's operation status, so as to avoid loss of browsing status caused by refreshing the browser. This case has excellent Guiding Value and reference significance for the actual project. This case not only provides the IDE-independent, ant-managed project source code, but also provides the Eclipse IDE-based project source code to meet the reader's needs to the maximum extent. If you encounter any technical problems when reading this book, you can log on to the http://www.crazyit.org to communicate with the book's huge readership.
Crazy Ajax handout (version 3rd) -- jquery/ext js/prototype/DWR enterprise application front-end development practices "is not intended for readers with no basic knowledge, the book no longer contains knowledge about HTML, CSS, and JavaScript, which is the basis for reading this book. This book is suitable for readers with preliminary HTML, CSS, and JavaScript basics, or developers who are not familiar with enterprise application front-end development. If you have mastered the first part of this book: Crazy HTML 5/CSS 3/JavaScript handout, it will be very suitable for reading this book.
Directory
Crazy Ajax handout (version 3rd) -- jquery/ext js/prototype/DWR enterprise application front-end development practices
Chapter 2 Ajax overview and Ajax Initial Experience 1
1.1 rethink Web Application 2
1.1.1 Development History of Application Systems 2
1.1.2 advantages and disadvantages of traditional Web applications 5
1.2 redesign of Web applications 5
1.2.1 rich Internet application 6
1.2.2 use Ajax 7
1.3 Ajax technology introduction 7
1.3.1 how Ajax works 8
1.3.2 Ajax core technology: XMLHttpRequest 8
1.3.3 Ajax programming Script: javascript language 8
1.3.4 Dom model 9 on the HTML page
1.3.5 dynamically load and display data 9
1.3.6 Ajax features 10
1.3.7 typical advantages of Ajax 11
1.4 develop traditional B/S chat rooms 13
1.4.1 business logic component 14
1.4.2 implement controller 16
1.4.3 view 18
. 1.4.4 questions about traditional B/S chat rooms 19
1.5 Ajax chat room 20
1.5.1 send requests asynchronously 20
1.5.2 solve the problem of redundant refresh 22
1.5.3 Resolution Server Response 24
1.5.4 when to send a request 25
1.5.5 Ajax chat room features 29
1.6 technical difficulties in Ajax programming 29
1.7 comparison between traditional web applications and Ajax applications 31
1.8 Chapter 32
Chapter 3 XMLHTTPRequest object description 33
2.1 XMLHTTPRequest object overview 34
2.2 XMLHttpRequest methods and attributes 34
2.2.1 XMLHttpRequest Method 35
2.2.2 XMLHttpRequest attribute 38
2.3 send request 41
2.3.1 send simple request 41
2.3.2 send GET request 43
2.3.3 send POST request 46
2.3.4 encoding when sending a request 47
2.3.5 send XML request 51
2.4 process server response 54
2.4.1 processing time 54
2.4.2 use text response 54
2.4.3 use JSON response 54
2.5 XMLHTTPRequest object runtime 57
2.6 Problems That Ajax must solve 58
2.6.1 cross-browser 58
2.6.2 security question 59
2.6.3 performance issue 61
2.7 chapter 65
Chapter 2 jquery library details 66
3.1 jquery entry 67
3.1.1 understanding jquery design 67
3.1.2 download and install jquery 68
3.1.3 coexistence of jquery and other JavaScript libraries 69
3.2 get jquery object 69
3.2.1 jquery core function 70
3.2.2 jquery and jquery. holdready 71
3.2.3 access Dom element 72 with CSS Selector
3.2.4 separator 74
3.2.5 form-related selector 77
3.3 jquery Operation Array tool Method 80
3.3.1 filtering method 81
3.3.2 methods related to Dom-like navigation searching 83
3.3.3 connection method 85
3.4 method 86 supported by jquery
3.4.1 jquery namespace method 86
3.4.2 methods for data storage 90
3.4.3 methods for operating attributes 91
3.4.4 methods for operating CSS attributes 93
3.4.5 related methods for operating element content 96
3.4.6 methods for operating DOM nodes 98
3.5 jquery event-related method 103
3.5.1 bind event processing function 103
3.5.2 methods related to specific events 105
3.5.3 event object 106
3.6 animation effect-related Methods 108
3.6.1 simple and complex animations 108
3.6.2 operation animation queue 111
3.7 jquery callback supports 112
3.7.1 basic functions supported by callback 112
3.7.2 options supported by creating callbacks 114
3.8 Ajax related Methods 116
3.8.1 three tool Methods 116
3.8.2 Use the load method 117
3.8.3 jquery. Ajax (options) and jquery. ajaxsetup (options) 119
3.8.4 use the get/POST method 120
3.9 jquery's deferred object 123
3.9.1 jquery asynchronous call 123
3.9.2 specify the callback function 127 for multiple time-consuming operations
3.9.3 add defered interface 127 for common objects
3.9.4 promise method of jquery object 128
3.10 extension of jquery and jquery plug-ins 129
3.11 summary of this chapter 130
Chapter 2 jquery-based applications: Electronic album System 4th
4.1 implement persistent layer 132
4.1.1 persistence 132
4.1.2 configure sessionfactory 134
4.2 implement Dao component 135
4.2.1 development of general Dao components 136
4.2.2 definition of Dao interface 139
4.2.3 implement class 139 of Dao Components
4.3 implement business logic layer 141
4.3.1 implement business logic component 141
4.3.2 configure the business logic component 143
4.4 client call 144
4.4.1 access business logic component 144
4.4.2 process user logon 145
4.4.3 obtain user photo list 148
4.4.4 page flip 149
4.4.5 object Upload by hiding IFRAME 150
4.4.6 handling of page loading 154
4.5 summary of this chapter 155
Chapter 2 ext JS core technology details 5th
5.1 ext JS entry 158
5.1.1 download and install ext JS 158
5.1.2 ext entry sample 159
5.1.3 use ext JS documentation 160
5.2 Core tool method 162
5.2.1 ext attributes and getting browser features 162
5.2.2 onready method 163
5.2.3 Ext. Defer method 163
5.2.4 Ext. Apply and Ext. applyif method 164
5.2.5 Ext. Define, ext. Create, and Ext. Extend Methods 166
5.2.6 Ext. isxxx method 169
5.2.7 Ext. Each And Ext. iterate method 169
5.2.8 Ext. namespace method 170
5.3 ext JS extension tool method 171
5.3.1 tool and method 171 for Array Extension
5.3.2 tool and method 173 for date Extension
5.3.3 Function Extension tool method 173
5.3.4 method of number extension tool 174
5.3.5 tool and method 175 for object extension
5.3.6 for string extension tool method 175
5.3.7 JSON 176
5.4 simplified Dom operations 177
5.4.1 Ext. Get, ext. getxxx, and Ext. Fly Methods 177
5.4.2 Ext. query, ext. Select and Ext. Dom. query tools 178
5.4.3 common Dom element operations 182
5.4.4 use Ext. domhelper and Ext. template to dynamically generate HTML 188
5.5 animation processing 192
5.5.1 use Ext. FX. anim for simple animation 192
5.5.2 use Ext. FX. animator to implement multi-Key Frame Animation 194
5.5.3 add an animation 195 to the element
5.6 ext JS event handling 197
5.6.1 use Ext. eventmanager to manage the event handler function and Ext. eventobject event object 197
5.6.2 execution range and additional options of the event processing function 200
5.6.3 use Ext. util. observable to implement internal event 201
5.7 utility set 203
5.7.1 Ext. util. hashmap & Ext. util. mixedcollection 203
5.7.2 use Ext. util. cookies to operate cookie 204
5.7.3 use Ext. util. delayedtask to process delayed tasks 205
5.7.4 packaging Click Event: Ext. util. clickrepeater 205
5.7.5 use Ext. util. taskrunner and Ext. taskmanager 206
5.7.6 use Ext. util. keymap and Ext. util. keynav as elements to process key event 207
5.8 drag and drop 209
5.8.1 use Ext. dd. DD and Ext. dd. ddproxy to create a drag-and-drop element 209
5.8.2 use Ext. dd. dragsource to create the Drag Source and Ext. dd. droptarget to create and release the target 210
5.8.3 use Ext. dd. dragzone to create the Drag Source and Ext. dd. dropzone to create the target 212
5.9 Ajax support 214
5.10 summary of this chapter 217
Chapter 2 ext JS interface component details section 6th
6.1 container, panel, and window 219
6.1.1 use Ext. Component 220
6.1.2 use Ext. Container. container to create container 222
6.1.3 use Ext. Panel. Panel to create panel 223
6.1.4 use Ext. toolbar. toolbar to add a toolbar 226
6.1.5 use Ext. Tab. Panel to create tab 229
6.1.6 use Ext. Container. viewport overall layout 231
6.1.7 use Ext. Window. Window to create window 234
6.1.8 create a dialog box using Ext. Window. MessageBox 235
6.2 layout 238
6.2.1 relationship between containers and layout 238
6.2.2 vertical layout and horizontal layout 238
6.2.3 use Ext. resizer. resizer to increase the size adjustment function for the component by 239
6.2.4 use Ext. resizer. splitter to increase the size of the box layout by 241
6.2.5 use Ext. layout. Container. Accordion to fold the layout 242
6.2.6 use Ext. layout. Container. Border to implement border layout 244
6.2.7 use Ext. layout. Container. Table to implement table layout 245
6.2.8 use Ext. layout. Container. Column to implement column layout 246
6.2.9 use Ext. layout. Container. Auto to achieve automatic layout 248
6.2.10 use Ext. layout. Container. Fit to achieve Adaptive Layout 249
6.2.11 use Ext. layout. Container. Card to implement card layout 250
6.2.12 use Ext. layout. Container. Anchor to implement the anchor layout 252
6.2.13 use Ext. layout. Container. Absolute to implement absolute layout 253
6.3 menus and menu items 254
6.3.1 menu 254
6.3.2 use Ext. Menu. checkitem to check menu item 256
6.3.3 use Ext. Menu. colorpicker to create the color selector menu 257
6.3.4 use Ext. Menu. datepicker to create a date and select menu 258
6.4 button 259
6.4.1 use button 259
6.4.2 button with menu 261
6.4.3 button with split line: Ext. Button. Split 263
6.4.4 multi-state buttons: Ext. Button. cycle 264
6.4.5 use Ext. Container. buttongroup to create a button group 266
6.4.6 use Ext. Action 267
6.5 other components and practical functions 270
6.5.1 use Ext. progressbar to create a progress bar 270
6.5.2 use Ext. Slider. Single to create a slider 274
6.5.3 use Ext. Slider. multi to create multi-slider slide 276
6.5.4 use Ext. IMG to Create Image 277
6.5.5 use Ext. Editor to create the editor 278
6.5.6 use Ext. Tip. tooltip to create the prompt 279
6.5.7 when Ext. Tip. quicktipmanager and Ext. Tip. quicktip are used, the system prompts 283.
6.5.8 implement Google map 284 using Ext. UX. gmappanel
6.6 form 286
6.6.1 create form 288 using Ext. Form. Panel and Ext. Form. Basic
6.6.2 configure Input Validation option 292
6.6.3 use the vtype option to configure Input Validation 294
6.6.4 use Ext. Form. Action. Submit to submit form 297
6.6.5 use Ext. Form. Action. Load to load data 300 for the form
6.6.6 use Ext. Form. Action. standardsubmit to submit form 303.
6.6.7 single-line text box and Password box 303
6.6.8 use Ext. Form. Field. Number to create a value box 305
6.6.9 use Ext. Form. Field. date to create a date selection box 306
6.6.10 use Ext. Form. Field. spinner to create the selection box 308
6.6.11 use Ext. Form. Field. textarea to create a text domain 309
6.6.12 use ext.form.field.html editor to create a Rich Text Editor 310
6.6.13 use Ext. Form. Field. File to upload file 311
6.6.14 use Ext. Form. Field. checkbox to create a check box 314
6.6.15 use Ext. Form. Field. Radio to create the radio button 317
6.6.16 use Ext. Form. Field. ComboBox to create a composite box 319
6.6.17 use the remote data and querymode as the local compound Box 321
6.6.18 query mode: remote compound 323
6.6.19 added the paging function 325 for Ext. Form. Field. ComboBox.
6.6.20 implement Ext. Form. Field. ComboBox Level 2 linkage 327
6.6.21 use Ext. Form. fieldset combination form control 330
6.7 ext JS data center 332
6.7.1 Ext. Data. Model and Ext. Data. Field 332
6.7.2 use Ext. Data. Proxy. Proxy and Ext. Data. Reader. reader to read data 335
6.7.3 Ext. Data. Store and its subclass 336
6.8 use Ext. Grid. Panel to generate table 337
6.8.1 generate table 337 using Ext. Grid. Panel
6.8.2 use Ext. Grid. Column. Column to define column 339
6.8.3 use Ext. Grid. Panel to display Remote Data 342
6.8.4 paging Ext. Grid. Panel table 343
6.8.5 paging local data 344
6.8.6 sorting and filtering of table data 346
6.8.7 grouping table data by table feature 347
6.8.8 develop a dynamically edited table 349
6.8.9 table 352 where data can be dragged
6.8.10 use Ext. Grid. Column. Action to operate table data 356
6.9 use Ext. Tree. Panel to generate tree
6.9.1 tree-related classes and simple trees
6.9.2 add, delete, and modify a tree node 362
6.9.3 Tree node 365 with check boxes
6.9.4 table tree 366
6.9.5 load tree node 368 Asynchronously
6.9.6 drag-and-drop of Tree nodes and update of underlying data through drag-and-drop: 372
6.10 summary of this Chapter 376
Chapter 2 prototype library details 7th
7.1 download and install prototype 378
7.1.1 what is prototype library 378
7.1.2 download and install prototype library 379
7.1.3 use prototype object 379
7.2 prototype tool functions 380
7.2.1 use the $ () function 380
7.2.2 use the $ () function 382
7.2.3 use the $ A () function 384
7.2.4 use $ F () function 385
7.2.5 use the $ W () function 386
7.2.6 use the $ H () function 386
7.2.7 use $ R () function 387
7.2.8 use the try. These () function 388
7.3 prototype JSON supports 389
7.4 prototype custom objects and classes 390
7.4.1 use Element Object 390
7.4.2 use element. Methods 394
7.4.3 use enumerable 394.
7.4.4 use objectrange 398
7.4.5 operate Form Control 399 using form. Element
7.4.6 using form 400
7.4.7 use Hash object 402
7.4.8 use the event 404
7.4.9 use the template 405
7.4.10 use class 406
7.4.11 two commonly used listeners 407
7.5 common prototype extensions: 409
7.5.1 extended array 409
7.5.2 Extended Document 410
7.5.3 extend string 411
7.5.4 extend function 414
7.5.5 extend number 415
7.6 prototype Ajax supports 416
7.6.1 use Ajax. Request class 416
7.6.2 use form. Request Method 420
7.6.3 use Ajax. Responders object 421
7.6.4 use Ajax object 422
7.6.5 use Ajax. Updater class 423
7.6.6 use Ajax. periodicalupdater class 426
7.7 Summary of this chapter 428
Chapter 2 prototype-based applications: Automatic completion 8th
8.1 Basic Analysis and persistence layer design of applications 430
8.1.1 data requirements 430
8.1.2 persistence 430
8.1.3 implement Dao component 432
8.1.4 deploy Dao component 434
8.2 service component 435
8.3 use servlet to provide server response 437
8.3.1 query brand 438 by prefix
8.3.2 query model 439 by brand
8.3.3 query details by model 439
8.4 client HTML page implementation 440
8.5 increase HTML page event response capability by 442
8.5.1 event processor 442 for brand input boxes
8.5.2 enable processor 444 for Keyboard Events
8.5.3 model 446
8.5.4 display description 447 Based on Model
8.5.5 register the Ajax event listener 448
8.6 summary of this Chapter 449
Chapter 2 DWR framework details 9th
9.1 download and install DWR 452
9.1.1 what is DWR 452
9.1.2 download and install DWR 453
9.2 using DWR 457
9.2.1 compiling and processing class 458
9.2.2 configure DWR 460
9.3 use a DWR converter 461
9.3.1 basic converter 461
9.3.2 object converter 462
9.3.3 array converter 464
9.3.4 set type converter 464
9.4 method Declaration definition 465
9.5 use the DWR creator 466
9.5.1 configurations of the Creator 466
9.5.2 use the new creator 468
9.5.3 use none creator 469
9.5.4 use the script builder 469
9.6 Method for calling the server 470
9.6.1 General configurations for calling server Methods 471
9.6.2 use simple callback 472
9.6.3 callback 476 in JSON format
9.6.4 pass client parameters to callback function 479
9.7 use engine. js 480
9.7.1 set the Call Sequence 480
9.7.2 set a global timeout period of 481
9.7.3 set global hook function 481
9.7.4 set global handler 481
9.7.5 set common global options 482
9.7.6 batch processing 482
9.8 use util. js 483
9.8.1 use $ () 483
9.8.2 processing list 483
9.8.3 Process Table 488
9.8.4 access HTML element value 492
9.8.5 tools and functions 494
9.9 integrate third-party Java EE Framework 496
9.9.1 access servlet API 496
9.9.2 integrate with spring 500
9.10 use DWR comments 502
9.10.1 initial configuration 502
9.10.2 annotator and converter 503
9.11 Exception Handling 504
9.12 reverse Ajax 506
9.12.1 configure the reverse Ajax 506
9.12.2 operate on web page 507 in Java method
9.12.3 call reverse Ajax method 509 on the client
9.13 DWR 3 simplified File Upload 510
9.13.1 File Upload processing class 510
9.13.2 complete file upload by calling Javascript 512
9.14 summary of this Chapter 514
Chapter 2 applications based on DWR: instant messaging system 10th
10.1 implement Hibernate Persistence Layer 516
10.1.1 persistence 516
10.1.2 map pojo to Persistent Object 518
10.2 implement Dao component 519
10.2.1 implementing Dao component 519
10.2.2 deploy Dao component 520
10.3 implement business logic components 521
10.3.1 API of the business logic component 521
10.3.2 implementation class 522 of business logic components
10.3.3 deploy business logic component 525
10.4 develop DWR frontend processing class 526
10.4.1 implement DWR frontend processing component 526
10.4.2 add permission control 528 for the front-end Processor
10.5 process asynchronous requests 529
10.5.1 create bean in spring container as JavaScript Object 529
10.5.2 process user logon 531
10.5.3 process user registration 532
10.5.4 process message publishing 534
10.5.5 retrieve message list 535
10.5.6 processing page 536
10.5.7 view message 537
10.5.8 handling of page loading 538
10.6 summary of this Chapter 539
Chapter 2 Application Based on ext JS 11th: simple blog system 4.1
11.1 implement Hibernate Persistence Layer 541
11.1.1 design persistence 541 for hibernate
11.1.2 complete ing file 543
11.2 implement Dao component 545
11.2.1 definition of Dao interface 546
11.2.2 implement Dao component 546
11.2.3 configure Dao component 547
11.3 implement business logic components 548
11.3.1 business logic component interface 548
11.3.2 implementation class 549 of business logic components
11.3.3 configure the business logic component 552
11.4 use ext js to develop frontend 553
11.4.1 initialize page 553
11.4.2 display the specified blog article 557
11.4.3 show reply list 559
11.4.4 add reply 561
11.4.5 post a new blog 565
11.5 summary of this Chapter 569
Chapter 4 Ajax example: electronic auction system 12th
12.1 general description and summary design 571
12.1.1 overall system architecture design 571
12.1.2 Database Design 572
12.2 implement Hibernate Persistence class 573
12.2.1 domain object 574 Design
12.2.2 implement domain object 575
12.3 Dao layer implementation 579
12.3.1 basic Dao configuration 579
12.3.2 implement Dao component 580
12.3.3 deploy Dao component 583
12.4 business logic layer implementation 584
12.4.1 design business logic component 584
12.4.2 dependency injection Dao component 586
12.4.3 handling of exceptions of business logic components 587
12.4.4 deal with user bid 588
12.4.5 judge the auction item status 590
12.4.6 Transaction Management 592
12.4.7 configure service layer component 592
12.5 exposed front-end processing method 595
12.5.1 define DWR frontend processing class 595
12.5.2 initialize spring container 597
12.5.3 configure core servlet 597 of DWR
12.5.4 frontend exposed solution 598
12.5.5 Add a permission check on the front-end handling method 600
12.6 call the frontend processing method to respond to user requests 601
12.6.1 function 601 during page loading
12.6.2 process 602 of the requests returned to the home page
12.6.3 View All streaming items 602
12.6.4 process user logon 605
12.6.5 manage items 609
12.6.6 manage item categories 612
12.6.7 view competing items 616
12.6.8 view your spot price record 617
12.6.9 view auction items 619
12.6.10 participate in bidding 621
12.7 summary of this chapter 624
Source of this book: China Interactive publishing network