Adding Ajax

Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ix
1. Getting Ready to Make a Move to Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
The Technologies That Are Ajax 3
Start Clean 7
Converting Tables to CSS Layouts 11
Continuing the Conversion: Element by Element 16
Dealing with Browser-Specific Quirks 17
Understanding Your Client Base 20
Designing a Framework for Your Site 24
Progressive Enhancement Versus Massive Overhaul 26
2. The Ajax Bits . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
The Web Application 29
Preparing the Object for Use 37
Preparing and Sending a Request 39
Processing the Ajax Response 45
Endpoints, the JavaScript Sandbox, and Widgets 62
That Security Stuff 67
A First Look at Performance 68
One Last Word on Asynchronous Versus Synchronous 68
3. Ajax Tools and Terminology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Prototype 72
script.aculo.us 80
Rico 83
Dojo 85
Other Libraries 924. Interactive Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Ajax-Friendly Event Handling 98
Just-In-Time Information 106
In-Page Previews 118
Color Fades for Success or Failure 123
5. Space: The Final Frontier . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Horizontal Spacing: The Accordion 134
Tabbed Pages 160
Overlays 173
6. Dynamic Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
In-Place Editing 181
In-Place Editing: Performance, Security, and Accessibility 192
Highlighting Changes 196
Revisiting In-Page Update Accessibility One More Time 208
Live Validation 211
Performance and Two-Phase Commits 214
External Library Data Effects 217
7. History, Navigation, and Place with Single-Page Applications . . . . . . . . . . 222
Introducing the Challenger: Paged Content 223
Remembering Place 244
Old and New Persistence: Side by Side 252
The New Page View 261
Post-Mortem 264
8. Adding Advanced Visual Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Advanced CSS Tricks 266
Scalable Vector Graphics 277
SVG Quick View 282
Mixer: SVG and Ajax 287
The Future of Graphics 293
9. Mashup Your Site . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Mapping with Google 297
A Second Service: Flickr 303
Adding Technorati to Our Mashup 317