MANNING Dave Crane Eric Pascarello with Darren James Ajax in Action Licensed to jonathan zheng <yiyisjun@gmail.com> Licensed to jonathan zheng <yiyisjun@gmail.com> Ajax in Action DAVE CRANE ERIC PASCARELLO WITH DARREN JAMES MANNING Greenwich (74° w. long.) Licensed to jonathan zheng <yiyisjun@gmail.com> For online information and ordering of this and other Manning books, please go to www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact: Special Sales Department Manning Publications Co. 209 Bruce Park Avenue Fax: (203) 661-9018 Greenwich, CT 06830 email: orders@manning.com ©2006 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books they publish printed on acid-free paper, and we exert our best efforts to that end. Manning Publications Co. Copyeditor: Liz Welch 209 Bruce Park Avenue Typesetter: Denis Dalinnik Greenwich, CT 06830 Cover designer: Leslie Haimes ISBN 1-932394-61-3 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – VHG – 09 08 07 06 05 Licensed to jonathan zheng <yiyisjun@gmail.com> To Hermes, Apollo, Athena, and my cats, for their wisdom —D.C. To my wife; I’m surprised you said yes —E.P. To my red-headed wife —D.J. Licensed to jonathan zheng <yiyisjun@gmail.com> Licensed to jonathan zheng <yiyisjun@gmail.com> vii PART 1 RETHINKING THE WEB APPLICATION 1 1 ■ A new design for the Web 3 2 ■ First steps with Ajax 31 3 ■ Introducing order to Ajax 69 PART 2 CORE TECHNIQUES 117 4 ■ The page as an application 119 5 ■ The role of the server 159 PART 3 PROFESSIONAL AJAX 209 6 ■ The user experience 211 7 ■ Security and Ajax 246 8 ■ Performance 279 brief contents Licensed to jonathan zheng <yiyisjun@gmail.com> viii BRIEF CONTENTS PART 4 AJAX BY EXAMPLE 325 9 ■ Dynamic double combo 327 10 ■ Type-ahead suggest 361 11 ■ The enhanced Ajax web portal 423 12 ■ Live search using XSLT 466 13 ■ Building stand-alone applications with Ajax 503 Licensed to jonathan zheng <yiyisjun@gmail.com> ix preface xix acknowledgments xxi about this book xxiv PART 1 RETHINKING THE WEB APPLICATION 1 1 A new design for the Web 3 1.1 Why Ajax rich clients? 5 Comparing the user experiences 5 ■ Network latency 9 Asynchronous interactions 12 ■ Sovereign and transient usage patterns 15 ■ Unlearning the Web 16 1.2 The four defining principles of Ajax 17 The browser hosts an application, not content 17 ■ The server delivers data, not content 19 ■ User interaction with the application can be fluid and continuous 21 ■ This is real coding and requires discipline 23 1.3 Ajax rich clients in the real world 24 Surveying the field 24 ■ Google Maps 25 1.4 Alternatives to Ajax 28 Macromedia Flash-based solutions 28 ■ Java Web Start and related technologies 28 contents Licensed to jonathan zheng <yiyisjun@gmail.com> [...]... exchanging data 17 4 Client-only interactions 17 5 Introducing the planet browser example 17 5 Thinking like a web page: content-centric interactions 17 8 Thinking like a plug -in: script-centric interactions 18 2 Thinking like an application: data-centric interactions 18 8 5.5 Writing to the server 19 3 Using HTML forms 19 3 ■ Using the XMLHttpRequest object 19 5 ■ Managing user updates effectively 19 7 5.6... Refactoring debriefing 5 01 12.7 13 Summary 496 5 01 Building stand-alone applications with Ajax 13 .1 503 Reading information from the outside world 504 Discovering XML feeds 505 Examining the RSS structure 506 13 .2 Creating the rich user interface 509 The process 510 The table-less HTML framework Compliant CSS formatting 513 ■ 13 .3 Loading the RSS feeds 518 Global scope 13 .4 511 518 ■ Ajax preloading functionality... Models in an Ajax application 14 3 Using JavaScript to model the business domain Interacting with the server 14 5 4.5 13 8 14 4 Generating the View from the Model 14 7 Reflecting on a JavaScript object 14 7 ■ Dealing with arrays and objects 15 1 ■ Adding a Controller 15 4 4.6 4.7 5 Summary 15 7 Resources 15 8 The role of the server 5 .1 5.2 15 9 Working with the server side 16 0 Coding the server side 16 1 Popular... pop-up UI 413 Refactor debriefing 4 21 10.6 11 Summary 422 The enhanced Ajax web portal 11 .1 The evolving portal 424 The classic portal 11 .2 11 .3 423 424 ■ The rich user interface portal The Ajax portal architecture using Java The Ajax login 429 427 The user table 429 ■ The server-side login code: Java The client-side login framework 433 11 .4 426 430 Implementing DHTML windows 439 The portal windows database... 439 The portal window’s server-side code 4 41 Adding the JS external library 445 11 .5 Adding Ajax autosave functionality 448 Adapting the library 448 Autosaving the information to the database 11 .6 450 Refactoring 453 Defining the constructor 455 ■ Adapting the AjaxWindows.js library 456 ■ Specifying the portal commands 458 Performing the Ajax processing 462 Refactoring debrief 464 11 .7 12 Summary 464... PROFESSIONAL AJAX 209 6 The user experience 6 .1 211 Getting it right: building a quality application 212 Responsiveness 213 ■ Robustness 213 Simplicity 215 ■ Making it work 215 6.2 ■ Consistency Keeping the user informed 216 Handling responses to our own requests 216 Handling updates from other users 218 6.3 Designing a notification system for Ajax 222 Modeling notifications 223 Defining user interface... 4 .1 119 A different kind of MVC 12 0 Repeating the pattern at different scales Applying MVC in the browser 12 2 4.2 The View in an Ajax application 12 4 Keeping the logic out of the View Keeping the View out of the logic 4.3 12 0 12 4 13 0 The Controller in an Ajax application 13 4 Classic JavaScript event handlers 13 4 The W3C event model 13 7 Implementing a flexible event model in JavaScript 4.4 Models in. .. server-side code: PHP 476 Building the XML document 476 Building the XSLT document 479 12 .4 Combining the XSLT and XML documents Working with Microsoft Internet Explorer Working with Mozilla 484 12 .5 4 81 483 Completing the search 485 Applying a Cascading Style Sheet 485 ■ Improving the search 487 ■ Deciding to use XSLT 489 Overcoming the Ajax bookmark pitfall 490 12 .6 Refactoring 4 91 An XSLTHelper 492 ■ A... CONTENTS 1. 5 1. 6 2 Summary 29 Resources 30 First steps with Ajax 2 .1 2.2 2.3 31 The key elements of Ajax 32 Orchestrating the user experience with JavaScript 34 Defining look and feel using CSS 36 CSS selectors 37 ■ CSS style properties A simple CSS example 40 2.4 39 Organizing the view using the DOM 45 Working with the DOM using JavaScript 47 ■ Finding a DOM node 49 ■ Creating a DOM node 50 ■ Adding styles... Model-View-Controller 91 Web server MVC 93 The Ajax web server tier without patterns 93 ■ Refactoring the domain model 96 ■ Separating content from presentation 10 0 Licensed to jonathan zheng CONTENTS 3.5 Third-party libraries and frameworks 10 3 Cross-browser libraries 10 4 ■ Widgets and widget suites Application frameworks 11 1 3.6 3.7 xi 10 8 Summary 11 4 Resources 11 5 PART 2 CORE TECHNIQUES 11 7 . data 17 4 Client-only interactions 17 5 Introducing the planet browser example 17 5 Thinking like a web page: content-centric interactions 17 8 Thinking like a plug -in: script-centric interactions 18 2 Thinking. libraries 10 4 ■ Widgets and widget suites 10 8 Application frameworks 11 1 3.6 Summary 11 4 3.7 Resources 11 5 PART 2 CORE TECHNIQUES 11 7 4 The page as an application 11 9 4 .1 A different kind of MVC 12 0 Repeating. the business domain 14 4 Interacting with the server 14 5 4.5 Generating the View from the Model 14 7 Reflecting on a JavaScript object 14 7 ■ Dealing with arrays and objects 15 1 ■ Adding a Controller