Advanced Ajax Architecture and Best Practices Shawn M. Lauriat Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Cape Town • Sydney • Tokyo • Singapore • Mexico City Many of the designations used by manufacturers and sellers to distinguish their products are Editor-in-Chief claimed as trademarks. Where those designations appear in this book, and the publisher was Mark Taub aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals. Acquisitions Editor Debra Williams Cauley The author and publisher have taken care in the preparation of this book, but make no expressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability Development Editor is assumed for incidental or consequential damages in connection with or arising out of the use of Michael Thurston the information or programs contained herein. Managing Editor The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases Gina Kanouse or special sales, which may include electronic versions and/or custom covers and content particu- Project Editor lar to your business, training goals, marketing focus, and branding interests. For more informa- tion, please contact: Anne Goebel U.S. Corporate and Government Sales Copy Editor (800) 382-3419 Jill Batistick [email protected] Indexer For sales outside the United States, please contact: Erika Millen International Sales Proofreader [email protected] Water Crest Publishing Technical Reviewers Jason Ellis Eric Foster-Johnson Chris Shifl ett Publishing Coordinator Heather Fox Cover Designer Gary Adair Composition codeMantra Visit us on the Web: www.informit.com/title/9780131350649 Library of Congress Cataloging-in-Publication Data: Lauriat, Shawn M. Advanced Ajax : architecture and best practices / Shawn M. Lauriat. p. cm. ISBN 0-13-135064-1 (pbk. : alk. paper) 1. Ajax (Web site development technology) I. Title. TK5105.8885.A52L38 2007 006.7--dc22 2007030306 Copyright © 2008 Pearson Education, Inc. 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 a retrieval 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 Department 75 Arlington Street, Suite 300 Boston, MA 02116 Fax: (617) 848-7047 ISBN-13: 978-0-13-135064-9 ISBN-10: 0-13-135064-1 Text printed in the United States on recycled paper at Courier Stoughton in Stoughton, Massachusetts. First printing October 2007 Contents Acknowledgments ......................................................................................................... xiii About the Author ............................................................................................................xv Introduction ............................................................................................... 1 0.1 Ajax, the Acronym .............................................................................. 2 0.1.1 Asynchronous.......................................................................... 3 0.1.2 JavaScript ................................................................................3 0.1.3 XML .......................................................................................4 0.2 This Book’s Intentions ........................................................................ 5 0.3 Prerequisites for This Book ................................................................. 8 Chapter 1 Usability ................................................................................................11 1.1 Interface Versus Showcase .................................................................12 1.1.1 Implementation ....................................................................14 1.2 User Expectations .............................................................................16 1.3 Indicators and Other Forms of User Feedback .................................. 17 1.3.1 The Throbber ........................................................................17 1.3.2 Progress Indicators ................................................................20 1.3.3 Keeping the User in the Loop ................................................22 1.4 Semantic Markup .............................................................................30 1.4.1 More Accessible .....................................................................30 1.4.2 Easier to Use ......................................................................... 32 vii viii Contents 1.4.3 Easier to Maintain .................................................................33 1.4.4 Easier to Parse ....................................................................... 34 1.5 What CSS and JavaScript Have in Common .................................... 37 Chapter 2 Accessibility ..........................................................................................43 2.1 WCAG and Section 508 ...................................................................44 2.1.1 WCAG ................................................................................ 45 2.1.2 Section 508 ...........................................................................51 2.2 Screen Readers Can Handle Ajax ...................................................... 53 2.2.1 Content Replacement ...........................................................54 2.2.2 Form Validation ....................................................................55 2.3 Unobtrusive Ajax ..............................................................................56 2.4 Designing with Accessibility in Mind ................................................58 2.4.1 High-Contrast Design ...........................................................59 2.4.2 Zoomable Interface ...............................................................60 2.4.3 Easily Targeted Controls ........................................................62 2.5 WAI-ARIA ........................................................................................63 Chapter 3 Client-Side Application Architecture ....................................................67 3.1 Objects and Event Triggering ............................................................68 3.1.1 Native Object Event Handling ..............................................70 3.1.2 JavaScript Objects .................................................................71 3.2 Model-View-Controller Design Pattern ............................................ 87 3.2.1 The Model ............................................................................88 3.2.2 The View ..............................................................................92 3.2.3 The Controller ....................................................................101 3.3 Event-Driven Application Development ......................................... 104 3.3.1 Advantages of Architecture ..................................................104 Contents ix Chapter 4 Debugging Client-Side Code ..............................................................107 4.1 Validation, Validation, Validation ....................................................108 4.1.1 Markup Validator ................................................................109 4.1.2 CSS Validator ......................................................................110 4.1.3 Semantic Extractor ..............................................................111 4.2 Browser Tools and Plugins .............................................................. 111 4.2.1 The Console ........................................................................112 4.2.2 Internet Explorer .................................................................113 4.2.3 Firefox .................................................................................116 4.2.4 Opera ..................................................................................122 4.2.5 Safari ...................................................................................124 4.3 JavaScript Profiling .........................................................................126 4.3.1 Recognizing Bottlenecks ......................................................128 4.4 Unit Testing ....................................................................................132 4.4.1 Assertions ............................................................................134 4.4.2 Test Setup ............................................................................135 4.4.3 The Test Itself ......................................................................137 4.4.4 Mock Objects ......................................................................140 4.4.5 Test Suites ...........................................................................143 Chapter 5 Performance Optimization ..................................................................145 5.1 Database Performance .....................................................................146 5.1.1 Schema ...............................................................................146 5.1.2 Queries ...............................................................................150 5.2 Bandwidth and Latency .................................................................