Ajax Patterns And Best Practices (2006)
.pdf
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 201-348-4505, e-mail orders-ny@springer-sbm.com, or visit http://www.springeronline.com.
For information on translations, please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley, CA 94710. Phone 510-549-5930, fax 510-549-5939, e-mail info@apress.com, 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.
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
Contents
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 |
■C O N T E N T S |
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
■C O N T E N T S |
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 |
■C O N T E N T S |
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