Ajax Design Patterns By Michael Mahemoff Publisher: O'Reilly Pub Date: June 2006 Print ISBN-10: 0-596-10180-5 Print ISBN-13: 978-0-59-610180-0 Pages: 655 Table of Contents | Index Ajax, or Asynchronous JavaScript and XML, exploded onto the scene in the spring of 2005 and remains the hottest story among web developers With its rich combination of technologies, Ajax provides a strong foundation for creating interactive web applications with XML or JSON-based web services by using JavaScript in the browser to process the web server response Ajax Design Patterns shows you best practices that can dramatically improve your web development projects It investigates how others have successfully dealt with conflicting design principles in the past and then relays that information directly to you The patterns outlined in the book fall into four categories: Foundational technology: Examines the raw technologies required for Ajax development Programming: Exposes techniques that developers have discovered to ensure their Ajax applications are maintainable Functionality and usability: Describes the types of user interfaces you'll come across in Ajax applications, as well as the new types of functionality that Ajax makes possible Development: Explains the process being used to monitor, debug, and test Ajax applications Ajax Design Patterns will also get you up to speed with core Ajax technologies, such as XMLHttpRequest, the DOM, and JSON Technical discussions are followed by code examples so you can see for yourself just what is-and isn't-possible with Ajax This handy reference will help you to produce high-quality Ajax architectures, streamline web application performance, and improve the user experience Michael Mahemoff holds a PhD in Computer Science and Software Engineering from the University of Melbourne, where his thesis was "Design Reuse in Software Engineering and Human-Computer Interaction." He lives in London and consults on software development issues in banking, health care, and logistics "Michael Mahemoff's Ajax Design Patterns is a truly comprehensive compendium of web application design expertise, centred around but not limited to Ajax techniques Polished nuggets of design wisdom are supported by tutorials and real-world code examples resulting in a book that serves not only as an intermediate to expert handbook but also as an extensive reference for building rich interactive web applications." Brent Ashley, remote scripting pioneer Ajax Design Patterns By Michael Mahemoff Publisher: O'Reilly Pub Date: June 2006 Print ISBN-10: 0-596-10180-5 Print ISBN-13: 978-0-59-610180-0 Pages: 655 Table of Contents | Index Copyright Preface Part I: Introduction Chapter 1 Introducing Ajax Section 1.1 Ajax and the Usable Web Section 1.2 The Rise of Ajax Section 1.3 Ajaxifying the Web: The Story of Portals Section 1.4 Webifying the Desktop: The Story of Office Applications Section 1.5 Characteristics of Ajax Applications Section 1.6 The Ajax Technologies Section 1.7 Anatomy of a Server Call Section 1.8 Ajax Trends Section 1.9 Conclusions Chapter 2 A Pattern-Led Tutorial Section 2.1 Ajax Technologies in a Blink Section 2.2 Ajaxifying a Web App: One Pattern at a Time Section 2.3 Projects and Katas Section 2.4 Conclusions Chapter 3 Ajax Design: Principles and Patterns Section 3.1 Desirable Attributes of Ajax Applications Section 3.2 Designing for Ajax Section 3.3 Ajax Patterns Overview Section 3.4 Anatomy of a Pattern Section 3.5 Ajax Patterns Demos Section 3.6 Conclusions Part II: Foundational Technology Patterns Chapter 4 Ajax App Section 4.1 Ajax App Chapter 5 Display Manipulation Section 5.1 Display Morphing Section 5.2 Page Rearrangement Chapter 6 Web Remoting Section 6.1 Web Service Section 6.2 XMLHttpRequest Call Section 6.3 IFrame Call Section 6.4 HTTP Streaming Section 6.5 On-Demand JavaScript Chapter 7 Dynamic Behavior Section 7.1 User Action Section 7.2 Scheduling Chapter 8 Extended Technologies Section 8.1 Richer Plugin Part III: Programming Patterns Chapter 9 Web Services Section 9.1 RESTful Service Section 9.2 RPC Service Section 9.3 Ajax Stub Section 9.4 HTML Message Section 9.5 Plain-Text Message Section 9.6 XML Message Section 9.7 JSON Message Chapter 10 Browser-Server Dialogue Section 10.1 Call Tracking Section 10.2 Periodic Refresh Section 10.3 Submission Throttling Section 10.4 Explicit Submission Section 10.5 Distributed Events Section 10.6 Cross-Domain Proxy Chapter 11 DOM Population Section 11.1 XML Data Island Section 11.2 Browser-Side XSLT Section 11.3 Browser-Side Templating Chapter 12 Code Generation and Reuse Section 12.1 Server-Side Code Generation Section 12.2 Cross-Browser Component Chapter 13 Performance Optimization Section 13.1 Browser-Side Cache Section 13.2 Predictive Fetch Section 13.3 Guesstimate Section 13.4 Multi-Stage Download Section 13.5 Fat Client Part IV: Functionality and Usability Patterns Chapter 14 Widgets Section 14.1 Slider Section 14.2 Progress Indicator Section 14.3 Drilldown Section 14.4 Data Grid Section 14.5 Rich Text Editor Section 14.6 Suggestion Section 14.7 Live Search Section 14.8 Live Command-Line Section 14.9 Live Form Chapter 15 Page Architecture Section 15.1 Drag-And-Drop Section 15.2 Sprite Section 15.3 Popup Section 15.4 Malleable Content Section 15.5 Microlink Section 15.6 Portlet Section 15.7 Status Area Section 15.8 Update Control Section 15.9 Virtual Workspace Chapter 16 Visual Effects Section 16.1 One-Second Spotlight Section 16.2 One-Second Mutation Section 16.3 One-Second Motion Section 16.4 Highlight Chapter 17 Functionality Section 17.1 Lazy Registration Section 17.2 Direct Login Section 17.3 Host-Proof Hosting Section 17.4 Timeout Section 17.5 Heartbeat Section 17.6 Unique URLs Part V: Development Patterns Chapter 18 Diagnosis Section 18.1 Logging Section 18.2 Debugging Section 18.3 DOM Inspection Section 18.4 Traffic Sniffing Chapter 19 Testing Section 19.1 Simulation Service Section 19.2 Browser-Side Test Section 19.3 Service Test Section 19.4 System Test Part VI: Appendixes Ajax Frameworks and Libraries Section A.1 JavaScript Multipurpose Frameworks Section A.2 JavaScript Remoting Frameworks Section A.3 JavaScript Effects Frameworks Section A.4 JavaScript Flash Frameworks Section A.5 JavaScript XML Frameworks Section A.6 JavaScript Specialized Frameworks Section A.7 Multilanguage Ajax Frameworks Section A.8 C++ Ajax Frameworks Section A.9 ColdFusion Ajax Frameworks Section A.10 .NET Ajax Frameworks Section A.11 Java Ajax Frameworks Section A.12 Lisp Ajax Frameworks Section A.13 Perl Ajax Frameworks Section A.14 PHP Ajax Frameworks Section A.15 Python Ajax Frameworks Section A.16 Ruby Ajax Frameworks Setting Up the Code Examples Patterns and Pattern Languages References About the Author Colophon Index Ajax Design Patterns by Michael Mahemoff Copyright © 2006 Michael Mahemoff All rights reserved Printed in the United States of America Published by O'Reilly Media, Inc 1005 Gravenstein Highway North, Sebastopol, CA 95472 O'Reilly books may be purchased for educational, business, or sales promotional use Online editions are also available for most titles (safari.oreilly.com) For more information, contact our corporate/institutional sales department: (800) 998-9938 or corporate@oreilly.com Editor: Simon St.Laurent Production Editor: Mary Brady Copyeditors: Mary Brady and Lydia Onofrei Indexer: Julie Hawks Cover Designer: Mike Kohnke Interior Designer: Marcia Friedman Illustrators: Robert Romano and Jessamyn Read Printing History: June 2006: First Edition The O'Reilly logo is a registered trademark of O'Reilly Media, Inc Ajax Design Patterns and related trade dress are trademarks of O'Reilly Media, Inc Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and O'Reilly Media, Inc was aware of a trademark claim, the designations have been printed in caps or initial caps While every precaution has been taken in the preparation of this book, the publisher and author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein This work is licensed under the Creative Commons License Attribution 2.0 To view a copy of this License, visit http://creativecommons.org/licenses/by/2.0/ or send a letter to Creative Commons, 543 Howard Street, 5th Floor, San Francisco, California 94105-3013, USA ISBN: 0-596-10180-5 [M] Preface AJAX DESIGN PATTERNS IS A REFERENCE FOR DEVELOPERS, DESIGNERS, AND MANAGERS WHO WANT TO know how Ajax is being used in the real world Ajax is a new label to describe rich, desktop-like Internet applications that run in standard web browsers and do not require any special plugins Its popularity stems from high-profile Ajax applications like Gmail, Google Maps, and 37signals' Basecamp, and it is becoming popular in the enterprise as well The patterns in this book fall into four categories Foundational Technology patterns overview the raw technologies required for Ajax development, such as the XMLHttpRequest object Programming patterns expose techniques developers have been discovering to ensure their Ajax applications are maintainable and performant Functionality and Usability patterns are about the kinds of user-interfaces you'll come across in Ajax applications and the new types of functionality that Ajax makes possible Finally, Development patterns explain the processes being used to monitor, debug, and test their Ajax applications Who Should Read This Book? You should read this book if you want to: Learn what's possibleand what's notwith Ajax, and see how Ajax is being used in the real world Get up to speed with core Ajax technologies such as XMLHttpRequest, the DOM, and JSON Discover the patterns developers are using to produce highquality Ajax architectures, streamline performance, and improve usability Because of the reference-like nature of the patterns, the book is accessible to people from different backgrounds Developers who want to ramp up on Ajax will be able to begin with the tutorial chapter and the foundational technologies Those who already have some experience with Ajax will probably gain the most from the Programming and Development patterns People in less technical roles will be able to take a high-level perspective, looking especially at the Functionality and Usability patterns and the Real-World Examples therein to see what's possible with Ajax To follow the technical discussion and code examples, programmers should have some experience with the basics of web developmentHTML, form submission, server-side scripting, and so on Ideally, you should know some JavaScript too, as this book isn't intended to teach you the language, but the writing does take into account that many readers will only have basic familiarity with JavaScript Ajax is mostly about what happens in the browser, so the book doesn't assume you know any particular server-side environment On those occasions where server-side code is involved, the examples are PHP-based and always explained in language-neutral terms Who Should Not Read This Book? If you haven't performed any web development work, you're probably better off looking for an introduction to the basic concepts before jumping into Ajax and these patterns Ajax development involves working with a broad range of technologies, including HTML, XML, CSS, JavaScript, and server-side development This book will help you understand how Ajax relates to each of these and how they are often examples fragment identifiers "Here' link IE history IFrame-URL technique more information Occasional Refresh PairStairs polling interval Really Simple History RESTful Service search engine indexing support solution state changes Virtual Workspace Update Control 2nd code example Digg Spy 2nd examples HTTP Streaming Periodic Refresh related patterns Slide solution WBIR updateAnagramsDisplay( ) upload.js URLs or URIs usability 2nd 3rd patterns User Action alternatives altKey Backpack Basic AjaxPatterns Demos button clientX, clientY code example ctrlKey decisions Display Morphing event handlers event handling event object attributes event type examples Google Maps Google Reader key modifiers key pressing keyboard focus keyCode (IE) mouse buttons mouse movement mouse position onblur, onfocus onchange onkeypress, onkeydown, onkeyup onmouseover, onmouseout onmouseup onselect Page Rearrangement related patterns shiftKey shortcut keys solution srcElement (IE) target (Firefox) type which (Firefox) XMLHttpRequest Call Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] Van Everdigen, Michiel Vandenberg, Adam Vector Markup Language (VML) Venkman View Rendered Source Virtual Fish-Eye Lens Virtual Magnifying Glass Virtual Workspace 2nd 3rd 4th 5th 6th 7th alternatives Browser-Side Cache 2nd code refactoring decisions Drag-and-Drop Dunstan Orchard's blog examples Giant-Ass Image Viewer (GSV) Library Guesstimate initial view map.search.ch more information Multi-Stage Download navigable workspaces OpenRico Search Demo panning Predictive Fetch 2nd related patterns repoulating regions Slider solution Unique URLs view changes Virtual Fish-Eye Lens Virtual Magnifying Glass visual effects Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] Watchlist Wiki Demo Watir WBIR wealth clock web apps Ajax advantages over ajaxifying Web Developer extension Web Remoting 2nd 3rd 4th $( ) convenience function handling events in JavaScript XMLHttpRequest usage Web Service AjaxPatterns TestAjaxCaller code example Cross-Domain Proxy decisions examples Fat Client HTTP Streaming Netvibes On-Demand JavaScript related patterns Service Test Simulation Service solution Technorati third-party usage, preventing Wish-O-Matic XMLHttpRequest Call web services WebFX Slider Demo WebORB WebORB for NET Were, Chris Whack-A-Mole game which (Firefox) Whitespace Highlight widgets 2nd WidgetServer Wikipedia Willison, Simon Wish-O-Matic WPLicense 2nd 3rd handling user answers retrieving license questions retrieving license types Wordpress plugin Writely Wt Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] XAJAX XForms XHConn XHTML XML advantages over JSON JSON advantages over XML Data Island AjaxPatterns Data Island Sum alternatives Browser-Side Cache 2nd Browser-Side Templating Browser-Side XSLT 2nd code refactoring Distributed Events examples including XML document on initial page load Mozilla demo PerfectXML Demo RESTful Service retaining XML for later use solution TechRepublic demo XML Message XML Message 2nd 3rd AJAX and AjaxPatterns XML Sum alternatives Browser-Side Templating 2nd Browser-Side XSLT code refactoring decisions DTD or Schema examples Google Maps HTML Message JSON Message 2nd Netflix Top 100 parsing XML Plain-Text Message 2nd 3rd Protopage responseXML RESTful Service RPC Service server generating XML solution transforming XML XML Data Island XSLT XML-RPC 2nd XMLHttpRequest 2nd browser compatibility issues Direct Login global responseText component responseText property Tracing script tracking Unique URLs usage XMLHttpRequest Call 2nd 3rd 4th 204 response abort( ) Ajax Stub AjaxPatterns TestAjaxCaller alternatives Anyterm API summary asynchronous calls Backbase Browser-Side Cache 2nd caching callback code example constraints on external domain content creating objects CSS stylesheet call Data Grid widget decisions Demo RSS Reader Drilldown widget error detection error handling examples GET and POST getAllResponseHeaders( ) getResponseHeader( ) HTTP Streaming 2nd IFrame Call 2nd 3rd images import XML documents Lace Chat Lazy Registration 2nd Live Form widget Live Search widget methods Mint On-Demand JavaScript 2nd onreadystatechange open( ) page refreshes Plain-Text Message Predictive Fetch Progress Indicator widget properties readyState responseText responseXML Richer Plugin RSLite library send( ) setRequestHeader( ) Slider widget solution status statusText Timeout Traffic Sniffing User Action Web Service XML responses XMLHttpRequest Calls XMLHttpRequest Tutorial XOAD XSLT quick overview xUnit Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] Yahoo Maps public APIs Yahoo! Mindset Yahoo! Mindset Slider code example YAML Yellow Fade Technique 2nd 3rd YubNub Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z] Zijde, Tino Zijdel, Tino Zimbra AjaxTK ZK ZKAJAX/XUL web framework Zorn, Walter zumiPage ... The first few chapters are a prelude to the patterns Chapter 1 overviews the Ajax phenomenon and discusses current trends Chapter 2 is a tutorial on Ajax and the Ajax Patterns The design concepts behind the Ajax Patterns are discussed in Chapter 3, along with an... Francisco, California 94105-3013, USA ISBN: 0-596-10180-5 [M] Preface AJAX DESIGN PATTERNS IS A REFERENCE FOR DEVELOPERS, DESIGNERS, AND MANAGERS WHO WANT TO know how Ajax is being used in the real world Ajax is a new... Pattern-Led Tutorial, is a quick-start tutorial on Ajax and the Ajax Patterns The design concepts behind the Ajax Patterns are discussed in Chapter 3, Ajax Design: Principles and Patterns, along with an introduction to the patterns themselves Part II, Foundational Technology Patterns