Prentice.Hall.Enterprise.AJAX.Jul.2007
ENTERPRISEAJAX This page intentionally left blank ENTERPRISEAJAXStrategies for Building HighPerformance Web ApplicationsDave Johnson, Alexei White, and Andre CharlandUpper Saddle River, NJ • Boston • Indianapolis • San FranciscoNew York • Toronto • Montreal • London • Munich • Paris • MadridCape Town • Sydney • Tokyo • Singapore • Mexico City Many of the designations used by manufacturers and sellers to distinguish their products are claimed astrademarks. Where those designations appear in this book, and the publisher was aware of a trademarkclaim, the designations have been printed with initial capital letters or in all capitals.The authors and publisher have taken care in the preparation of this book, but make no expressed orimplied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumedfor incidental or consequential damages in connection with or arising out of the use of the informationor programs contained herein.The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases orspecial sales, which may include electronic versions and/or custom covers and content particular to yourbusiness, training goals, marketing focus, and branding interests. For more information, please contact:U.S. Corporate and Government Sales(800) 382-3419corpsales@pearsontechgroup.comFor sales outside the United States, please contact:International Salesinternational@pearsoned.comLibrary of Congress Cataloging-in-Publication Data:Johnson, DaveEnterprise AJAX: Strategies for Building High Performance Web Applications / Dave Johnson,Alexei White, Andre Charland.p. cm.ISBN-13: 978-0-13-224206-6 (pbk. : alk. paper) 1. AJAX (Computer programming language) 2.Web sites—Authoring programs. 3. Web site development. I. White, Alexei. II. Charland, Andre. III. Title. TK5105.8885.A52J64 2007006.7'86--dc22 2007015974Copyright © 2008 Dave Johnson, Alexei White, Andre Charland.All rights reserved. Printed in the United States of America. This publication is protected by copyright,and permission must be obtained from the publisher prior to any prohibited reproduction, storage in aretrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying,recording, or likewise. For information regarding permissions, write to:Pearson Education, Inc.Rights and Contracts Department501 Boylston Street, Suite 900Boston, MA 02116Fax: (617) 671-3447This material may be distributed only subject to the terms and conditions set forth in the OpenPublication License, v1.0 or later (the latest version is presently available athttp://www.opencontent.org/openpub/).ISBN-13: 978-0-13-224206-6ISBN-10: 0-13-224206-0 Text printed in the United States on recycled paper at Courier Stoughton, Inc., Stoughton,Massachusetts.First printing, July 2007Editor-in-Chief:Mark L. TaubManaging Editor: Gina KanouseProduction: DeadlineDriven PublishingIndexer: Angie BessPublishingCoordinator:Noreen ReginaCover Designer: Alan ClementsComposition:Tolman Creek CONTENTSPreface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xiiiAcknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xviiAbout the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .xviiiChapter 1 AJAX and Rich Internet Applications . . . . . . . . . . . . . . . . . . .1The Changing Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3Sore Points of Traditional Web Applications . . . . . . . . . . . . . . . . . . .4AJAX Painkillers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6AJAX in the Enterprise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9Drivers for AJAX Adoption . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .10Network Utilization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14Data Centricity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15Incremental Skills, Tools, and Technologies Upgrade . . . . . . . . . . . . .16Server Agnosticism . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16What About the Application? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17AJAX Technologies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .18Programming Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19AJAX Alternatives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20XUL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20XAML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .20Java Applets and Web Start . . . . . . . . . . . . . . . . . . . . . . . . . . . . .21Adobe Flash, Flex, and Apollo . . . . . . . . . . . . . . . . . . . . . . . . . . .21OpenLaszlo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .22Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .24Chapter 2 AJAX Building Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .25JavaScript Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .26Closures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .28v Object-Oriented JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .29Prototype Property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .33OOP and Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .34Mutability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .38Threading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .39Error Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .40Namespacing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .41Document Object Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .42Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .43Manipulating the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .46Cascading StyleSheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48Inheritance and the Cascade . . . . . . . . . . . . . . . . . . . . . . . . . . . . .49Inline Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .50StyleSheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51Dynamic Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .59Event Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .60Event Binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .62Cross-Browser Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .65The Event Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .68Client-Server Messaging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69XMLHttpRequest Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70Dealing with Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .78Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .81Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .82Chapter 3 AJAX in the Web Browser . . . . . . . . . . . . . . . . . . . . . . . . . .83Incremental AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85Impact on the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85HTML Standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .86Document Type Definitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87Box Models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .89Bootstrapping AJAX Components . . . . . . . . . . . . . . . . . . . . . . . . . . . .91The Onload Event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .91Browser Tricks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .96Model—View—Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .101Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .104Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .105AJAX MVC . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107AJAX Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107AJAX View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116viContents AJAX Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121Aspect Oriented JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . .131Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133Chapter 4 AJAX Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135Imperative Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135Declarative Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139Server-Side Declarative Programming . . . . . . . . . . . . . . . . . . . . . .140Declarative Google Map . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142Alternative Approaches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147Custom Declarative Component . . . . . . . . . . . . . . . . . . . . . . . . . . . .148Behavior Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .152Declarative Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156The Declaration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163Building the Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .168Basic Functionality . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .168Connecting to the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173Closing the Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .177Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .180Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .181Chapter 5 Design to Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . .183Modeling AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184Applying the Model-View-Controller Pattern . . . . . . . . . . . . . . . . . .185Preempt Performance Problems . . . . . . . . . . . . . . . . . . . . . . . . . .186Prototyping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .188Wireframing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .189Verifying Design Decisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . .196Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208Test-Driven Development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .209Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .226Deployment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .232JavaScript Compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .232Image Merging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238Protecting Intellectual Property . . . . . . . . . . . . . . . . . . . . . . . . . . .240Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .240Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .243Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .244Contentsvii Chapter 6 AJAX Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .247Asynchronous Messaging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .249Polling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .250Server Push . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251Comet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .252Tracking Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .253Caching: Approaching Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .255Basic Caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .256Caching in the Component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .257Caching in the Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261Caching on the Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .265Caching in the Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269MySQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269MS SQL Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270Oracle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .270Updating the Server Model: Concurrency . . . . . . . . . . . . . . . . . . . . .270Pessimistic Locking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .271Read-Only Locking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .271Optimistic Locking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .272Conflict Identification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .272Conflict Resolution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .275Automated Conflict Resolution . . . . . . . . . . . . . . . . . . . . . . . . . . .275Throttling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .276Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .276Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .278Scaling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .278Load Balancing and Clustering . . . . . . . . . . . . . . . . . . . . . . . . . .280AJAX Scaling Issues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .281Offline AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .282Firefox Offline Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .284Internet Explorer userData Offline Storage . . . . . . . . . . . . . . . . . . . .287Using Flash Client Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .288Offline AJAX and Concurrency . . . . . . . . . . . . . . . . . . . . . . . . . . . .292Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .293Chapter 7 Web Services and Security . . . . . . . . . . . . . . . . . . . . . . . .295Web Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .295Web Service Protocols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .296Representational State Transfer . . . . . . . . . . . . . . . . . . . . . . . . . .296XML Remote Procedure Call . . . . . . . . . . . . . . . . . . . . . . . . . . . . .297viiiContents Web Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .298Choosing the Right Tool . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .300SOAP on the Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .302IBM Web Services JavaScript Library . . . . . . . . . . . . . . . . . . . . . .303Firefox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .307Cross Domain Web Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .309Server Proxy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310URL Fragment Identifiers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .312Flash Cross Domain XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .315Script Injection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .315Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .317Security Concerns with AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . .318Cross-Domain Vulnerabilities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319Cross-Site Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .319Cross-Site Request Forgery . . . . . . . . . . . . . . . . . . . . . . . . . . . . .325JavaScript Hijacking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .327SQL Injection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .330Prepared Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .331Stored Procedures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .332XPath Injection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .333Data Encryption and Privacy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .334Firewalls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .336Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .337Chapter 8 AJAX Usability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .339Common Problems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .340The Back Button and Bookmarking . . . . . . . . . . . . . . . . . . . . . . . .340Page Weight . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .352Auto-Commit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .357Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .358Identifying Users with Accessibility Needs . . . . . . . . . . . . . . . . . . .359JavaScript and Web Accessibility . . . . . . . . . . . . . . . . . . . . . . . . .360Screen Readers and Accessibility . . . . . . . . . . . . . . . . . . . . . . . . .360What Not to Do for Screen Readers . . . . . . . . . . . . . . . . . . . . . . .360A JAWS-Compliant AJAX Interaction . . . . . . . . . . . . . . . . . . . . . . .361Keyboard Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .364Usability Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .367Quick-and-Dirty Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .367Recruiting Participants . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .368Designing and Running Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . .368Software-Assisted Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .369Contentsix . ENTERPRISEAJAX This page intentionally left blank ENTERPRISEAJAXStrategies for Building HighPerformance Web. . . . . . . . . . . . 4AJAX Painkillers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6AJAX in the Enterprise . . . . .