Ajax Patterns and Best Practices (eBook)

Christian Gross is a consultant with vast experience in the client/server world. He has consulted for Microsoft on DNA solutions, and he has held consulting positions with Daimler Benz, Microsoft, NatWest, and other major corporations. Gross was a contributor to Professional Active Server Pages, Professional SQL Server 6.5 Administration, Professional NT Internet Information Server Administration, and Programming Microsoft Windows 2000 Unleashed. He is the author of A Programmer's Introduction to Windows DNA.

Contents at a Glance 6
Contents 8
About the Author 14
About the Technical Reviewer 16
Acknowledgments 18
Introduction 20
CHAPTER 1 Introduction to Ajax 24
Pictures Are Worth a Thousand Words 25
Another Ajax Example 31
Ajax Architecture Basics 33
It’s About the Data 34
It’s About the Navigation 35
Comparing Ajax to Other Application Types 37
Rich-Client Local Installation 37
Rich-Client Web Services 38
Plain-Vanilla Web Application 39
Some Final Thoughts 40
CHAPTER 2 The Nuts and Bolts of Ajax 42
Ajax for the Impatient 42
Understanding REST Theory 42
Implementing the REST Data 44
Implementing the Ajax Application 45
Putting Together Ajax and REST 46
Understanding the Ramifications of Ajax and REST 47
XMLHttpRequest Details 48
Using the Factory Pattern 50
Defining an XMLHttpRequest Factory 51
Rewriting the Ajax Application to Use a Factory 52
Making Asynchronous Requests 53
Making Practical Use of XMLHttpRequest 57
Implementing an Asynchronous Calling Mechanism 57
Calling Domains Other Than the Serving Domain 68
Some Final Thoughts 74
CHAPTER 3 Content Chunking Pattern 76
Intent 76
Motivation 76
Applicability 77
Associated Patterns 78
Architecture 78
Implementing Order in a Web Application 78
Defining the Content Within a Content Chunk 82
Implementation 83
Implementing the HTML Framework Page 83
Injecting Content by Using Dynamic HTML 85
Binary, URL, and Image Chunking 92
JavaScript Chunking 95
Pattern Highlights 100
CHAPTER 4 Cache Controller Pattern 102
Intent 102
Motivation 102
Applicability 104
Associated Patterns 105
Architecture 105
HTML and HTTP Cache Directives 105
HTTP Expiration Caching Is a Bad Idea (Generally) 107
Better Approach: Using HTTP Validation 107
Some Findings Regarding Server-Side Caching 109
Defining Static HTTP Validation 111
Defining Dynamic HTTP Validation 112
Implementation 114
Implementing the Passive Cache 114
Implementing the Server Side of the HTTP Validator 123
Pattern Highlights 131
CHAPTER 5 Permutations Pattern 134
Intent 134
Motivation 134
Applicability 139
Associated Patterns 139
Architecture 139
Understanding Why the Resource Is Separated from the Representation 140
Using Cookies and HTTP Authentication to Authorize Access Only 142
Using Cookies 145
An Example Book Application 146
Implementation 151
Rewriting URLs 151
An Example Shopping Cart Application 158
Pattern Highlights 173
CHAPTER 6 Decoupled Navigation Pattern 176
Intent 176
Motivation 176
Applicability 180
Associated Patterns 182
Architecture 183
Implementation 185
Implementing the Action Functionality 185
Defining and Implementing the Common Data Functionality 195
Implementing the Presentation Functionality 210
Using HTML Components 215
Pattern Highlights 217
CHAPTER 7 Representation Morphing Pattern 220
Intent 220
Motivation 220
Applicability 225
Associated Patterns 226
Architecture 226
Basic Theory 227
Why the Pattern Is Not an HTML Component 228
Defining Blocks of State 229
Implementation 234
Implementing the Framework 234
Implementing the Representation Reference Points 236
Some Implementation Details 244
Pattern Highlights 247
CHAPTER 8 Persistent Communications Pattern 248
Intent 248
Motivation 248
Applicability 250
Associated Patterns 251
Architecture 251
Why the Internet Is “Broken” 251
Implementing a Polling Solution 254
Implementation 256
Example: A Global Status Resource 256
Example: Presence Detection 271
Example: Server Push 275
Version Numbers and Updates 285
Performance Considerations 285
Pattern Highlights 285
CHAPTER 9 State Navigation Pattern 288
Intent 288
Motivation 288
Applicability 290
Associated Patterns 291
Architecture 291
Moving Toward an Ideal Solution from the User’s Perspective 291
Extending the Solution for a Web Application 295
Managing State at the Protocol Level 300
Implementation 303
Processing the Requests on the Client 304
Processing the Requests on the Server 314
Pattern Highlights 324
CHAPTER 10 Infinite Data Pattern 326
Intent 326
Motivation 326
Applicability 327
Associated Patterns 327
Architecture 328
Implementation 330
Implementing the HTML Client 332
Implementing the Task Manager 339
Pattern Highlights 355
CHAPTER 11 REST-Based Model View Controller Pattern 356
Intent 356
Motivation 356
Applicability 358
Associated Patterns 358
Architecture 359
The Big Picture 359
Defining an Appropriate Resource 361
Defining the Calling Interface 363
Defining the Data Format Foundation and the Extras 366
Implementation 369
Implementing a Search 369
Creating a Search Engine Client Infrastructure 373
Putting All of the Pieces Together 379
Pattern Highlights 390
Index 392

Chapter 1 Introduction to Ajax (p. 1-2)

Asynchronous JavaScript and XML (Ajax)1 is both something old and something new—old because already existing technologies are used, but new because it combines these existing technologies into techniques that very few considered previously. Simply put, because of Ajax a new generation of applications and ideas are bubbling on the developer scene. A very brief definition of Ajax is as follows: Ajax is a technology that complements Web 2.0 and the integration of many web services at once.

This brief definition poses more questions than it answers, as now you are likely wondering what Web 2.0 is and what the integration of many web services are. Web 2.0 can be thought of as the Internet economy.2 Think about something as typical as an encyclopedia, and you will start to think about salespeople who carry extremely heavy books and knock on doors. In a Web 2.0 context, an encyclopedia means Wikipedia (http:// www.wikipedia.org). The Wikipedia project is an open effort by humanity to record itself. Whereas for a traditional encyclopedia a set of writers and editors write about certain topics, Wikipedia is created by people who write about what they know. Get enough people together and you get an encyclopedia that is on the Internet. What is thought-provoking about the Wikipedia project is that anybody can edit it, and therefore it usually contains more current and unusual information than a traditional encyclopedia. In some instances Wikipedia’s selfcorrecting capabilities have proven to be problematic, but considering the scale and depth of the project, those instances have been exceptions.

The second part of Ajax is the integration of many web services at once. Ajax allows a higher level of interactivity in a HyperText Markup Language (HTML) page than was possible without Ajax technologies. The result is that an Ajax application changes from a web application to a web service manipulation technology. In a traditional web application, navigating content meant changing HTML pages. With Ajax, navigating content means navigating web services that could be generating HTML content, or Extensible Markup Language (XML) content, or other content.

Pictures Are Worth a Thousand Words

The definition explains Ajax, but you are probably still wondering what Ajax does. There is a saying that a picture is worth a thousand words, and the following images and their associated explanations illustrate best what Ajax does. Map.search.ch was one of the first major Ajax applications, and it illustrates the elegance of what an Ajax application can be. In a nutshell, Map.search.ch is used to find restaurants, houses, parking spots, and more throughout Switzerland. When you surf to the website http://map.search.ch, you will see something similar to Figure 1-1.