O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Unobtrusive Ajax

Unobtrusive Ajax

by Jesse Skinner
Publisher: O'Reilly Media, Inc.
Release Date: July 2007
ISBN: 9780596510244
View table of contents
Start reading

Book Description

Unobtrusive Ajax is about making web applications that work for everyone all the time, even if you have JavaScript turned off, or you're using a mobile phone or a screen reader, or however you happen to be using the Web. It's about the separation of behavior (JavaScript), content (HTML), and presentation (CSS).

This short cut will focus on the practical benefits of using Ajax and JavaScript unobtrusively and show you that unobtrusive web development and progressive enhancement benefit both web developers and users of the Web. You'll get to see many simple examples of building web interfaces that are unobtrusive. You'll quickly see that it is actually very easy to make web applications that everyone can use.

When you're finished reading this short cut, you will be able to convince anyone why developing unobtrusively is the best way to build a site with JavaScript and Ajax.

Table of Contents

  1. Unobtrusive Ajax
    1. What Is Unobtrusive Ajax?
      1. Separating Behavior, Presentation, and Content
      2. Physical Separation
        1. Changing the design of a web site
        2. Reorganizing or rewriting the JavaScript for a web site or application
        3. Making your code more understandable
        4. You want to reduce bandwidth and improve loading times
      3. Conceptual Separation
        1. Why bother using Conceptual Separation?
      4. Similarities to Model-View-Controller
      5. Summary
    2. Using Web Technologies Unobtrusively
      1. Unobtrusive HTML
        1. Always use valid HTML or XHTML
        2. Use Semantic HTML
      2. Unobtrusive CSS
      3. Unobtrusive Flash
      4. Unobtrusive JavaScript
      5. Summary
    3. Why Use Unobtrusive Ajax?
      1. You Don't Have to Use Unobtrusive Ajax
      2. Making Web Development Easier
      3. Search Engine Optimization
      4. Accessibility
      5. Summary
    4. How to Use Unobtrusive Ajax
      1. Convincing Your Bosses and Clients
      2. Develop without JavaScript First
      3. Use JavaScript Libraries
        1. Ajax Function
        2. Event Handling Functions
        3. Preventing Default Event Behavior
        4. DOM Ready Event Function
        5. Adding, Removing, and Checking for Class Names
        6. Selecting Elements by Class Name (nd More)
      4. Browser Tools
      5. Importance of Links and Forms
      6. Add HTML Elements Using JavaScript
      7. Write Special CSS for Users with JavaScript
        1. Using document.write()
        2. Using DOM Scripting to Change a <link>
      8. Make Content Available with and without Ajax
      9. Separate Presentation from Content with CSS
      10. Create a Separate Web Site for Those without JavaScript
      11. Summary
    5. Examples
      1. Dynamic Ajax Tabs
      2. Hiding and Showing Page Sections Dynamically
      3. Dynamic Select Boxes
      4. Other Real-Life Examples
        1. Search Suggestions
        2. Click to Vote/Rate
        3. Maps
        4. Drag-and-Drop Sorting
        5. Form Validation
        6. Pop-up Windows and Layers
        7. Sortable Table Columns
        8. Tree Navigation
        9. Ajax Form Submitting
      5. Summary
    6. Conclusion
    7. About the Author