Ajax The Definitive Guide

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii
Part I. Ajax Fundamentals
1. Reinventing the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Web Page Components 3
Modern Web Standards 9
Browsers 17
Standards Compliance 19
Welcome to Web 2.0 20
2. From Web Sites to Web Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
The Transition 22
Basic Web and Ajax Design Patterns 28
Application Environments 31
The Developer 33
What Ajax Is Not 34
3. Servers, Databases, and the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
The Web Server 36
Server-Side Scripting 39
Databases 44
Getting Data Into and Out of Relational Databases 48
Interfacing the Interface 54
Frameworks and Languages 57
What Good Are Frameworks? 634. Foundations: Scripting XML and JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
XML 68
JSON 86
Choosing a Data Exchange Format 92
A Quick Introduction to Client Frameworks 94
Simplifying Development 97
5. Manipulating the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Understanding the DOM 103
We’ve Already Met 105
Manipulating DOM Elements, Attributes, and Objects 106
Change That Style 117
Events in the DOM 129
DOM Stuff for Tables 135
Is innerHTML Evil? 138
6. Designing Ajax Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
Usability 141
Functionality 153
Visualization 158
Accessibility 167
The Ajax Interface 171
Part II. Ajax Foundations
7. Laying Out Site Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
Menus 175
Tabs 212
Navigation Aids 221
Problems with Ajax Navigation 243
General Layout 246
8. Fun with Tables and Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Layout Without Tables 247
Accessible Tables 252
Sorting Tables 264
Tables with Style 280
Table Pagination 283Lists 2.0 291
Lists for All Seasons 292
9. Page Layout with Frames That Aren’t . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Using Frames 316
XHTML and Frames 321
The Magic of Ajax and a DIV 323
Page Layout 329
10. Navigation Boxes and Windows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
The Alert Box 335
Integrating the Window 335
Navigation Windows 347
Tool Tips 355
The Necessary Pop Up 360
11. Customizing the Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 363
Browser Customizations 363
Stylesheet Switching 368
Switching Different Customizations 381
Easy Font-Size Switching 386
Creating Color Themes 392
Throwing Ajax into the Mix 397
Changing Site Language with Ajax 400
Repositioning Objects and Keeping Those Positions 403
Storing It All in the Database 407
12. Errors: To Be (in Style) or Not to Be . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Error Handling on the Web 408
Should I React to That Error? 413
Handling an Error with Care 417
Integrating the User Error 420
13. This Ain’t Your Father’s Animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434
Animation on the Web 434
What Is Wrong with GIF? 437
Building Animation with the PNG Format 439
Ajax Animations 45314. A Funny Thing Happened on the Way to the Form . . . . . . . . . . . . . . . . . . . . . 482
XHTML Forms 482
Using JavaScript 490
Fancier Forms 498
The Basics of Ajax and Forms 519
Accepting Ajax-Delivered Data 524
Server Responses 531
15. Data Validation: Client, Server, or Both . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 534
Data Validation Is Important 534
Validation with JavaScript 536
CSS Notification of Errors 552
Validation on the Server 555
Ajax Client/Server Validation 558
Part III. Ajax in Applications
16. Search: The New Frontier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565
Types of Site Searches 565
Dynamic Searching with Ajax 577
Googling a Site 581
17. Introducing Web Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
What Is a Web Service? 594
Web Service Architectures 594
Ajax and Web Services 606
Web Feeds 613
Web Service APIs 618
18. Web Services: The APIs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619
Publicly Available Web Services 619
Ajax and the API 657
The Next Step with Services 658
19. Mashups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659
Mashups in Web 2.0 Applications 659
What Are Mashups? 659Mashups As Applications 661
Data Sources 665
Application Portlets 668
Building a Mashup 668
Mashups and Business 671
20. For Your Business Communication Needs . . . . . . . . . . . . . . . . . . . . . . . . . . . . 672
Businesses and Ajax 672
Real-Time Communication 674
File Sharing 691
Whiteboards 703
Combining Applications 720
21. Internet Games Without Plug-ins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 721
Gaming on the Web 721
Internet Requirements 732
Animating a Character 735
Basic Collisions 753
User Input 764
The Basics of Event Handling 767
Putting It All Together 776
Part IV. Wrapping Up
22. Modular Coding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789
What Is Modular Coding? 789
The Client Side 791
The Server Side 804
23. Optimizing Ajax Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 807
Site Optimization Factors 807
HTTP 809
Packets 815
Client-Side Optimizations 818
Server-Side Optimizations 830
Ajax Optimization 838Part V. References
A. The XML and XSLT You Need to Know . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 843
B. JavaScript Framework, Toolkit, and Library References . . . . . . . . . . . . . . . . 863
C. Web Service API Catalog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 892
D. Ajax Risk References . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 916
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 925