Adding Ajax

Adding Ajax

by Shelley Powers
Released June 2007
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596550462

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

Ajax can bring many advantages to an existing web application without forcing you to redo the whole thing. This book explains how you can add Ajax to enhance, rather than replace, the way your application works. For instance, if you have a traditional web application based on submitting a form to update a table, you can enhance it by adding the capability to update the table with changes to the form fields, without actually having to submit the form. That's just one example.

Adding Ajax is for those of you more interested in extending existing applications than in creating Rich Internet Applications (RIA). You already know the "business-side" of applications-web forms, server-side driven pages, and static content-and now you want to make your web pages livelier, more fun, and much more interactive. This book:

  • Provides an overview of Ajax technologies, and the importance of developing a strategy for changing your site before you sit down to code
  • Explains the heart and soul of Ajax: how to work with the XMLHttpRequest object
  • Introduces and demonstrates several important Ajax libraries, including Prototype, script.aculo.us, rico, Mochikit
  • Explores the interactive element that is Ajax, including how to work with events and event handlers that work across browsers
  • Introduces the concept of web page as space, and covers three popular approaches to managing web space
  • Explains how to make data updates, including adding new data, deleting, and making updates, all from within a single page
  • Describes the effects Ajax has on the Web-breaking the back button, losing browser history, dynamic effects that disappear when the page is refreshed, and more
  • Covers advanced CSS effects, including drag and drop "scroll bars", pagination, and the use of SVG and the Canvas object
  • Explores mashups-Ajax's ability to combine data from different web services in any number of ways, directly in our web pages
You don't need to start over to use Ajax. You can simply add to what you already have. This book explains how.

Publisher resources

View/Submit Errata

Table of contents

  1. Adding Ajax
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    2. A Note Regarding Supplemental Files
    3. Preface
      1. Audience
      2. Contents of This Book
      3. Conventions Used in This Book
      4. Using Code Examples
      5. We'd Like to Hear from You
      6. Acknowledgments
    4. 1. Getting Ready to Make a Move to Ajax
      1. 1.1. The Technologies That Are Ajax
        1. 1.1.1. A Natural Progression
        2. 1.1.2. The Technologies: Book View
      2. 1.2. Start Clean
        1. 1.2.1. XHTML and HTML Validators
        2. 1.2.2. CSS Validators
        3. 1.2.3. Checking Accessibility
      3. 1.3. Converting Tables to CSS Layouts
      4. 1.4. Continuing the Conversion: Element by Element
      5. 1.5. Dealing with Browser-Specific Quirks
        1. 1.5.1. Controlling the Page and Adding Ajax
        2. 1.5.2. Taking Control
      6. 1.6. Understanding Your Client Base
        1. 1.6.1. Discovering Your Clients
        2. 1.6.2. An Open-Door Policy
        3. 1.6.3. The Plan
      7. 1.7. Designing a Framework for Your Site
        1. 1.7.1. Meet Your Reader
        2. 1.7.2. Safe and Secure
        3. 1.7.3. Tight Coupling and Loose Coupling
      8. 1.8. Progressive Enhancement Versus Massive Overhaul
    5. 2. The Ajax Bits
      1. 2.1. The Web Application
        1. 2.1.1. The XMLHttpRequest Object Structure
      2. 2.2. Preparing the Object for Use
      3. 2.3. Preparing and Sending a Request
        1. 2.3.1. HTTP GET, POST, and RESTful Friends
        2. 2.3.2. The Parameters
        3. 2.3.3. Sending the Request
      4. 2.4. Processing the Ajax Response
        1. 2.4.1. A Quick and Easy Response: HTML Fragment and innerHTML
        2. 2.4.2. Working with a More Traditional XML
        3. 2.4.3. Simplifying Processing with JSON
        4. 2.4.4. (X)HTML Fragment
      5. 2.5. Endpoints, the JavaScript Sandbox, and Widgets
        1. 2.5.1. JSON Endpoints and Dynamic Script Creation
        2. 2.5.2. Dynamic Scripting with XML
      6. 2.6. That Security Stuff
      7. 2.7. A First Look at Performance
      8. 2.8. One Last Word on Asynchronous Versus Synchronous
    6. 3. Ajax Tools and Terminology
      1. 3.1. Prototype
        1. 3.1.1. The JavaScript Prototype Property
        2. 3.1.2. Associative Arrays and the Risks of Prototype
        3. 3.1.3. External Libraries: Risks and Benefits
      2. 3.2. script.aculo.us
        1. 3.2.1. The script.aculo.us Effects
      3. 3.3. Rico
        1. 3.3.1. Ajax Pagination
        2. 3.3.2. The Rico Weather Widget
        3. 3.3.3. The JavaScript Sandbox and Proxies
      4. 3.4. Dojo
        1. 3.4.1. Event Handler Chaining
        2. 3.4.2. Declarative HTML
        3. 3.4.3. Using JavaScript to Bypass Nonstandard Attributes
      5. 3.5. Other Libraries
        1. 3.5.1. jQuery
        2. 3.5.2. MochiKit
        3. 3.5.3. The Yahoo! UI
        4. 3.5.4. mooTools and moo.fx
        5. 3.5.5. The Sarissa Library
        6. 3.5.6. WZ_jsGraphics and qForms
        7. 3.5.7. And More
    7. 4. Interactive Effects
      1. 4.1. Ajax-Friendly Event Handling
        1. 4.1.1. Maintainable Event Handling
        2. 4.1.2. Mashable Event Handling
        3. 4.1.3. The Dojo Event System the Target Object
      2. 4.2. Just-In-Time Information
        1. 4.2.1. Form Help
        2. 4.2.2. Tooltips
      3. 4.3. In-Page Previews
        1. 4.3.1. Live Echo Preview
        2. 4.3.2. Ajax Preview
      4. 4.4. Color Fades for Success or Failure
        1. 4.4.1. Timers and Animations
        2. 4.4.2. Ajaxian Timers
        3. 4.4.3. Creating a Flashing Notice
    8. 5. Space: The Final Frontier
      1. 5.1. Horizontal Spacing: The Accordion
        1. 5.1.1. Creating the Effect
        2. 5.1.2. A Transitioning Accordion
          1. 5.1.2.1. Getting an element's height and width
          2. 5.1.2.2. Finishing the transition
        3. 5.1.3. Using Prepackaged Accordions
        4. 5.1.4. Packaging the Accordion Code
        5. 5.1.5. Expand and Request: Mixing Accordions and Ajax Calls
      2. 5.2. Tabbed Pages
        1. 5.2.1. A Straightforward Look at Tabbed Content
        2. 5.2.2. Packaging Revisited: Creating Generic Tabs
        3. 5.2.3. Using the YUI TabView
        4. 5.2.4. Tabbed Content and Accessibility
      3. 5.3. Overlays
    9. 6. Dynamic Data
      1. 6.1. In-Place Editing
        1. 6.1.1. Adding an Editable Field
        2. 6.1.2. Diving into the Client
        3. 6.1.3. The Server Side of the Application
      2. 6.2. In-Place Editing: Performance, Security, and Accessibility
        1. 6.2.1. Preventing SQL Injection
        2. 6.2.2. Performance and Accessibility
        3. 6.2.3. Improvements
      3. 6.3. Highlighting Changes
        1. 6.3.1. Signaling a Deletion
        2. 6.3.2. Polling and Highlighting Updates
      4. 6.4. Revisiting In-Page Update Accessibility One More Time
        1. 6.4.1. Revisiting the In-Page Deletion
        2. 6.4.2. Revisiting In-Place Additions
      5. 6.5. Live Validation
      6. 6.6. Performance and Two-Phase Commits
        1. 6.6.1. Ajax That Plays Well with Others
        2. 6.6.2. Ajax, Caching, and Database Transactions
      7. 6.7. External Library Data Effects
        1. 6.7.1. Building and Maintaining Forms
        2. 6.7.2. Drag-and-Drop Sorting with script.aculo.us
        3. 6.7.3. Adobe Spry's Validation
        4. 6.7.4. Other Library Data Effects
    10. 7. History, Navigation, and Place with Single-Page Applications
      1. 7.1. Introducing the Challenger: Paged Content
        1. 7.1.1. Creating the Slideshow Infrastructure
        2. 7.1.2. Creating a Photo Slideshow
        3. 7.1.3. Splitting Text
        4. 7.1.4. Paging Through Data
      2. 7.2. Remembering Place
        1. 7.2.1. Remembering Place and Page Fragments
        2. 7.2.2. Remembering Place in a Timely Manner
        3. 7.2.3. The Difference Between Clever and Smart
      3. 7.3. Old and New Persistence: Side by Side
      4. 7.4. The New Page View
      5. 7.5. Post-Mortem
    11. 8. Adding Advanced Visual Effects
      1. 8.1. Advanced CSS Tricks
        1. 8.1.1. Rounded Corners
        2. 8.1.2. Sliders and Scrollbars
        3. 8.1.3. Web-Friendly Menus
        4. 8.1.4. Draggable Container
      2. 8.2. Scalable Vector Graphics
        1. 8.2.1. Embedding SVG
        2. 8.2.2. Adding Script
        3. 8.2.3. SVG Inline
      3. 8.3. SVG Quick View
        1. 8.3.1. Basic Shapes and Attributes
        2. 8.3.2. Defs, Gradients, Filters, and Effects
      4. 8.4. Mixer: SVG and Ajax
        1. 8.4.1. HTML5 Canvas
      5. 8.5. The Future of Graphics
    12. 9. Mashup Your Site
      1. 9.1. Mapping with Google
        1. 9.1.1. Google Maps: Quick and Easy
        2. 9.1.2. Get There from Here
      2. 9.2. A Second Service: Flickr
        1. 9.2.1. Creating the Mashup
        2. 9.2.2. Creating Photo Objects and Revisiting Prototype Versus Localized Functions
        3. 9.2.3. Converting Flickr/Google to Tabbed Pages
      3. 9.3. Adding Technorati to Our Mashup
      4. 9.4. Reengineering the Mashup
        1. 9.4.1. Accessible Tabs
        2. 9.4.2. Google Maps, IE, and Knowing When to Let Go
        3. 9.4.3. Abstracting the Web Services
      5. 9.5. The Reengineered Clients
        1. 9.5.1. The Script-Free Application
        2. 9.5.2. The New Ajax Client
      6. 9.6. Summarizing Mashups
    13. 10. Scaling, Infrastructure, and Starting from Scratch
      1. 10.1. Frameworks: Tight Versus Loose Coupling
      2. 10.2. The Web Service: Resource and Security
      3. 10.3. Ajax Libraries: Homegrown or Borrowed
      4. 10.4. Designing Ajax from the Ground Up
        1. 10.4.1. Packaging Your Functionality into Units
        2. 10.4.2. Maintenance and Testing
        3. 10.4.3. Memory Leaks, Local Storage, and Robustness
        4. 10.4.4. Reducing Every Effect to Its Simplest
        5. 10.4.5. Critical Areas of a Site
        6. 10.4.6. Don't Over-Mash
        7. 10.4.7. A Multitude of Devices
        8. 10.4.8. Limit "Cool"
        9. 10.4.9. But Cool's Good, Too
      5. 10.5. Frameworks du Jour
        1. 10.5.1. ASP.NET and AJAX
        2. 10.5.2. Java and GWT
        3. 10.5.3. PHP Frameworks
        4. 10.5.4. Python, GWT, and Django
        5. 10.5.5. Hey! It's Perl!
        6. 10.5.6. Ruby on Rails, Ajax, and Tight Coupling
      6. 10.6. Go Forth and Ajax
    14. About the Author
    15. Colophon
    16. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Product information

  • Title: Adding Ajax
  • Author(s): Shelley Powers
  • Release date: June 2007
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596550462