www.it-ebooks.info www.it-ebooks.info Ajax The Definitive Guide www.it-ebooks.info Other resources from O’Reilly Related titles Ajax Design Patterns Ajax Hacks Ajax on Java Ajax on Rails Head Rush Ajax Learning ASP.NET 2.0 with AJAX Programming ASP.NET AJAX oreilly.com oreilly.com is more than a complete catalog of O’Reilly books. You’ll also find links to news, events, articles, weblogs, sample chapters, and code examples. oreillynet.com is the essential portal for developers interested in open and emerging technologies, including new platforms, pro- gramming languages, and operating systems. Conferences O’Reilly brings diverse innovators together to nurture the ideas that spark revolutionary industries. We specialize in document- ing the latest tools and systems, translating the innovator’s knowledge into useful skills for those in the trenches. Visit conferences.oreilly.com for our upcoming events. Safari Bookshelf (safari.oreilly.com) is the premier online refer- ence library for programmers and IT professionals. Conduct searches across more than 1,000 books. Subscribers can zero in on answers to time-critical questions in a matter of seconds. Read the books on your Bookshelf from cover to cover or sim- ply flip to the page you need. Try it today for free. www.it-ebooks.info Ajax The Definitive Guide Anthony T. Holdener III Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo www.it-ebooks.info Ajax: The Definitive Guide by Anthony T. Holdener III Copyright © 2008 Anthony T. Holdener III. 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: Rachel Monaghan Copyeditor: Audrey Doyle Proofreader: Rachel Monaghan Indexer: Ellen Troutman Zaig Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrator: Jessamyn Read Printing History: January 2008: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Ajax: The Definitive Guide, the image of a woolly monkey, 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. ISBN: 978-0-596-52838-6 [M] [9/09] www.it-ebooks.info To Sarah, the love of my life and my unending inspiration. And to Kate and Tony, whom I hope to always inspire. www.it-ebooks.info www.it-ebooks.info vii Table of Contents Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xiii Part I. Ajax Fundamentals 1. Reinventing the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Web Page Components 3 Modern Web Standards 9 Browsers 17 Standards Compliance 19 Welcome to Web 2.0 20 2. From Web Sites to Web Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 The Transition 22 Basic Web and Ajax Design Patterns 28 Application Environments 31 The Developer 33 What Ajax Is Not 34 3. Servers, Databases, and the Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 The Web Server 36 Server-Side Scripting 39 Databases 44 Getting Data Into and Out of Relational Databases 48 Interfacing the Interface 54 Frameworks and Languages 57 What Good Are Frameworks? 63 www.it-ebooks.info viii | Table of Contents 4. Foundations: Scripting XML and JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 XML 68 JSON 86 Choosing a Data Exchange Format 92 A Quick Introduction to Client Frameworks 94 Simplifying Development 97 5. Manipulating the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Understanding the DOM 103 We’ve Already Met 105 Manipulating DOM Elements, Attributes, and Objects 106 Change That Style 117 Events in the DOM 129 DOM Stuff for Tables 135 Is innerHTML Evil? 138 6. Designing Ajax Interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Usability 141 Functionality 153 Visualization 158 Accessibility 167 The Ajax Interface 171 Part II. Ajax Foundations 7. Laying Out Site Navigation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Menus 175 Tabs 212 Navigation Aids 221 Problems with Ajax Navigation 243 General Layout 246 8. Fun with Tables and Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247 Layout Without Tables 247 Accessible Tables 252 Sorting Tables 264 Tables with Style 280 Table Pagination 283 www.it-ebooks.info [...]... Ain’t Your Father’s Animation Examines the traditional method for animating images on the Internet, the disadvantages of using the GIF format, and the advantages of the PNG format Then this chapter shows how you can use PNGs for animation on the Web and how to use Ajax to asynchronously download images in the background Chapter 14, A Funny Thing Happened on the Way to the Form Explains the significance... look at these web tools (the components or materials, if you will), and see how these components have changed over the history of the Web—especially since the introduction of Ajax Classic Web Components The tools of the classic web page are really more like the wood-framed solid or wattle walls of the Neolithic period They were crude and simple, serving their purpose but leaving much to be desired They... Applications Explains the nature of web site construction in the past versus the applications they have become, and the fact that they require the same process and design approach utilized by developers for regular desktop applications Chapter 3, Servers, Databases, and the Web Shows the technologies available on the server side of web applications, briefly discussing each and how you can use them as a backend... browsing a map, the only thing on the page that refreshes when new data is requested is the map itself It is dynamic This is also the case when you get driving directions and wish to add another stop to your route The whole page does not refresh, only the map does, and the new directions are added to the list The result is a more interactive user experience Ajax web applications remove the click-wait-click-wait... www.it-ebooks.info 9 In the earlier years of the Web, the browser makers were to blame for difficulties in adopting web standards Anyone that remembers the days of the 4.0 browsers, more commonly referred to as the “Browser Wars,” will attest to the fact that nothing you did in one environment would work the same in another No one can really blame Netscape and Microsoft for what they did at the time Competition... and their role on the Internet, exploring the different protocols that are used—from SOAP to REST and everything in between—and shows how you can take advantage of these services with Ajax behind the scenes xvi | Preface www.it-ebooks.info Chapter 18, Web Services: The APIs Gives a brief introduction to some of the web services that are available on the Internet, and how to use the APIs that make up the. .. scenario that has plagued the Web for so long Now, when you request information, you may still perform other tasks on the page while your request (not the whole page) loads All of this is done by using the Ajax tools discussed earlier, in the “Ajax” section of this chapter, and 8 | Chapter 1: Reinventing the Web www.it-ebooks.info the standards that apply to them After reading the section “Standards Compliance,”... away The user will perceive everything about the web application as being self-contained With this technology a savvy developer can make an application function in virtually the same way, whether on the Web or on the desktop Modern Web Standards Web standards: these two words evoke different feelings in different people Some will scoff and roll their eyes, some will get angry and declare the need for them,... be displayed on the client browser, and everything else works off of it The DOM is used to navigate all of the XHTML on the page JavaScript has the most important role in an Ajax application It is used to manipulate the DOM for the page, but more important, JavaScript creates all of the communication between client and server that makes Ajax what it is CSS is used to affect the look of the page, and... lived the lifestyle of a nomad following a herd, and instead built permanent settlements to support hunting and farming In much the same way, the birth of the Web and these classic web pages was a renaissance, giving people communication tools they never had before The tools of the classic Web were few and simple: • HyperText Markup Language (HTML) • HyperText Transfer Protocol (HTTP) Eventually, other . Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Ajax: The Definitive Guide, the image of. before. New innovations, together with the functionality of Ajax, have given the Web a new look and appeal. Ajax: The Definitive Guide explores what you can