Ajax Patterns and Best Practices

398 Pages·2006·10.797 MB·English

by  Christian Gross (auth.)

Ajax Patterns and
Best Practices
■ ■ ■
Christian Gross
Ajax Patterns and Best Practices
Copyright © 2006 by Christian Gross
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN-13 (pbk): 978-1-59059-616-6
ISBN-10 (pbk): 1-59059-616-1
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence
of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark
owner, with no intention of infringement of the trademark.
Lead Editor: Jonathan Hassell
Technical Reviewer: Paul Tyma
Editorial Board: Steve Anglin, Dan Appleman, Ewan Buckingham, Gary Cornell, Jason Gilmore, Jonathan
Hassell, James Huddleston, Chris Mills, Matthew Moodie, Dominic Shakeshaft, Jim Sumser, Matt Wade
Project Manager: Beth Christmas
Copy Edit Manager: Nicole LeClerc
Copy Editor: Sharon Wilkey
Assistant Production Director: Kari Brooks-Copony
Production Editor: Ellie Fountain
Compositor: Susan Glinert
Proofreader: Elizabeth Berry
Indexer: Broccoli Information Management
Artist: Kinetic Publishing Services, LLC
Cover Designer: Kurt Krames
Manufacturing Director: Tom Debolski
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail [email protected], or
visit http://www.springeronline.com.
For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA
94710. Phone [phone], fax [phone], e-mail [email protected], or visit http://www.apress.com.
The information in this book is distributed on an “as is” basis, without warranty. Although every precaution
has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to
any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly
by the information contained in this work.
The source code for this book is available to readers at http://www.apress.com in the Source Code section.
38721242
12547324
53087351
21687294
Contents at a Glance
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xiii
About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xix
■CHAPTER 1 Introduction to Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
■CHAPTER 2 The Nuts and Bolts of Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
■CHAPTER 3 Content Chunking Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
■CHAPTER 4 Cache Controller Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
■CHAPTER 5 Permutations Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
■CHAPTER 6 Decoupled Navigation Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
■CHAPTER 7 Representation Morphing Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
■CHAPTER 8 Persistent Communications Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . 225
■CHAPTER 9 State Navigation Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
■CHAPTER 10 Infinite Data Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
■CHAPTER 11 REST-Based Model View Controller Pattern . . . . . . . . . . . . . . . . . . 333
■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
v
CCoonntteennttss
About the Author . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xiii
About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv
Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xix
■CHAPTER 1 Introduction to Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Pictures Are Worth a Thousand Words . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Another Ajax Example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Ajax Architecture Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
It’s About the Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
It’s About the Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Comparing Ajax to Other Application Types . . . . . . . . . . . . . . . . . . . . . . . . 14
Rich-Client Local Installation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Rich-Client Web Services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Plain-Vanilla Web Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Some Final Thoughts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
■CHAPTER 2 The Nuts and Bolts of Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Ajax for the Impatient . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Understanding REST Theory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Implementing the REST Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Implementing the Ajax Application. . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Putting Together Ajax and REST. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Understanding the Ramifications of Ajax and REST . . . . . . . . . . . . . 24
XMLHttpRequest Details . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Using the Factory Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Defining an XMLHttpRequest Factory. . . . . . . . . . . . . . . . . . . . . . . . . 28
Rewriting the Ajax Application to Use a Factory . . . . . . . . . . . . . . . . 29
Making Asynchronous Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
vii
viii ■CONTENTS
Making Practical Use of XMLHttpRequest . . . . . . . . . . . . . . . . . . . . . . . . . 34
Implementing an Asynchronous Calling Mechanism . . . . . . . . . . . . 34
Calling Domains Other Than the Serving Domain. . . . . . . . . . . . . . . 45
Some Final Thoughts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
■CHAPTER 3 Content Chunking Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Intent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Applicability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Associated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Implementing Order in a Web Application. . . . . . . . . . . . . . . . . . . . . 55
Defining the Content Within a Content Chunk. . . . . . . . . . . . . . . . . . 59
Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Implementing the HTML Framework Page . . . . . . . . . . . . . . . . . . . . 60
Injecting Content by Using Dynamic HTML . . . . . . . . . . . . . . . . . . . . 62
Binary, URL, and Image Chunking . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
JavaScript Chunking. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
Pattern Highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
■CHAPTER 4 Cache Controller Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Intent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79
Applicability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Associated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
HTML and HTTP Cache Directives . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
HTTP Expiration Caching Is a Bad Idea (Generally). . . . . . . . . . . . . . 84
A Better Approach: Using HTTP Validation . . . . . . . . . . . . . . . . . . . . 84
Some Findings Regarding Server-Side Caching. . . . . . . . . . . . . . . . 86
Defining Static HTTP Validation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Defining Dynamic HTTP Validation. . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Implementing the Passive Cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Implementing the Server Side of the HTTP Validator . . . . . . . . . . . 100
Pattern Highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
■CONTENTS ix
■CHAPTER 5 Permutations Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Intent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Applicability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Associated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
Understanding Why the Resource Is Separated
from the Representation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Using Cookies and HTTP Authentication
to Authorize Access Only. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Using Cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
An Example Book Application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Rewriting URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
An Example Shopping Cart Application . . . . . . . . . . . . . . . . . . . . . . 135
Pattern Highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
■CHAPTER 6 Decoupled Navigation Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Intent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Applicability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
Associated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162
Implementing the Action Functionality. . . . . . . . . . . . . . . . . . . . . . . 162
Defining and Implementing the Common Data Functionality . . . . 172
Implementing the Presentation Functionality . . . . . . . . . . . . . . . . . 187
Using HTML Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
Pattern Highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
■CHAPTER 7 Representation Morphing Pattern . . . . . . . . . . . . . . . . . . . . . . . 197
Intent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Applicability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Associated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
x ■CONTENTS
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Basic Theory . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
Why the Pattern Is Not an HTML Component . . . . . . . . . . . . . . . . . 205
Defining Blocks of State. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Implementing the Framework . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
Implementing the Representation Reference Points. . . . . . . . . . . . 213
Some Implementation Details. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Pattern Highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224
■CHAPTER 8 Persistent Communications Pattern . . . . . . . . . . . . . . . . . . . . 225
Intent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
Applicability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Associated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Why the Internet Is “Broken”. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 228
Implementing a Polling Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Example: A Global Status Resource . . . . . . . . . . . . . . . . . . . . . . . . . 233
Example: Presence Detection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Example: Server Push . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252
Version Numbers and Updates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Performance Considerations. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Pattern Highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
■CHAPTER 9 State Navigation Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Intent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Applicability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 267
Associated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Moving Toward an Ideal Solution from the User’s Perspective. . . 268
Extending the Solution for a Web Application . . . . . . . . . . . . . . . . . 272
Managing State at the Protocol Level. . . . . . . . . . . . . . . . . . . . . . . . 277
Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Processing the Requests on the Client. . . . . . . . . . . . . . . . . . . . . . . 281
Processing the Requests on the Server. . . . . . . . . . . . . . . . . . . . . . 291
Pattern Highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
■CONTENTS xi
■CHAPTER 10 Infinite Data Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Intent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 303
Applicability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Associated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 305
Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
Implementing the HTML Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309
Implementing the Task Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
Pattern Highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
■CHAPTER 11 REST-Based Model View Controller Pattern . . . . . . . . . . . . 333
Intent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
Applicability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Associated Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
The Big Picture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Defining an Appropriate Resource . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Defining the Calling Interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Defining the Data Format Foundation and the Extras. . . . . . . . . . . 343
Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Implementing a Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Creating a Search Engine Client Infrastructure. . . . . . . . . . . . . . . . 350
Putting All of the Pieces Together. . . . . . . . . . . . . . . . . . . . . . . . . . . 356
Pattern Highlights . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367
■INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369