Cover image for Ajax Hacks

Book description

Ajax, the popular term for Asynchronous JavaScript and XML, is one of the most important combinations of technologies for web developers to know these days. With its rich grouping of technologies, Ajax developers can create interactive web applications with XML-based web services, using JavaScript in the browser to process the web server response.

Taking complete advantage of Ajax, however, requires something more than your typical "how-to" book. What it calls for is Ajax Hacks from O'Reilly. This valuable guide provides direct, hands-on solutions that take the mystery out of Ajax's many capabilities. Each hack represents a clever way to accomplish a specific task, saving you countless hours of searching for the right answer.

A smart collection of 80 insider tips and tricks, Ajax Hacks covers all of the technology's finer points. Want to build next-generation web applications today? This book can show you how. Among the multitude of topics addressed, it shows you techniques for:

  • Using Ajax with Google Maps and Yahoo Maps

  • Displaying Weather.com data

  • Scraping stock quotes

  • Fetching postal codes

  • Building web forms with auto-complete functionality

Ajax Hacks also features a number of advanced hacks for accelerated web developers. Discover how to create huge, maintainable bookmarklets, how to use client-side storage for Ajax applications, and how to call a built-in Java object from JavaScript using Ajax. The book even addresses best practices for testing Ajax applications and improving maintenance, performance, and reliability for JavaScript code.

The latest in O"Reilly's celebrated Hacks series, Ajax Hacks smartly complements other O'Reilly titles such as Head Rush Ajax and JavaScript: The Definitive Guide.

Table of Contents

  1. Ajax Hacks
  2. A Note Regarding Supplemental Files
  3. Foreword
  4. Credits
    1. About the Author
    2. Contributors
    3. Acknowledgments
  5. Preface
    1. Building Single-Page Applications
    2. Explaining Ajax
    3. How to Use This Book
    4. How This Book Is Organized
    5. Conventions Used in This Book
    6. Using Code Examples
    7. Safari Enabled
    8. How to Contact Us
    9. Got a Hack?
  6. 1. Ajax Basics
    1. It’s Not a Floor Wax
    2. Handle with Care
    3. XMLHttpRequest
    4. Hack #1. Detect Browser Compatibility with the Request Object
      1. Using a Function for Checking Compatibility
    5. Hack #2. Use the Request Object to POST Data to the Server
      1. Setting Headers
      2. Ogling the Result
    6. Hack #3. Use Your Own Library for XMLHttpRequest
    7. Hack #4. Receive Data as XML
    8. Hack #5. Get Plain Old Strings
    9. Hack #6. Receive Data as a Number
      1. Number Crunching
      2. DOM-inating
    10. Hack #7. Receive Data in JSON Format
      1. Magic JSON
      2. On the Server Side
    11. Hack #8. Handle Request Object Errors
      1. Problems, Problems...
      2. Floored Server
      3. Backend Application Out to Lunch
      4. Whoops, Wrong URL
    12. Hack #9. Dig into the HTTP Response
    13. Hack #10. Generate a Styled Message with a CSS File
      1. Easy as Pie
    14. Hack #11. Generate a Styled User Message on the Fly
      1. Nudging Aside the Stylesheet
  7. 2. Web Forms
    1. Hack #12. Submit Text Field or textarea Values to the Server Without a Browser Refresh
      1. Get the First Serve In
      2. What’s Next?
    2. Hack #13. Display Text Field or textarea Values Using Server Data
      1. Instant Server Messaging
    3. Hack #14. Submit Selection-List Values to the Server Without a Round Trip
      1. Now What Happens?
      2. Hello Again, JSON
      3. A Dabble of Server-Side
      4. The DOM API
    4. Hack #15. Dynamically Generate a New Selection List Using Server Data
      1. Presto, New Lists
      2. Querying the Server
      3. The Final Step
    5. Hack #16. Extend an Existing Selection List
      1. New Select List or Mirage?
      2. Hacking the Hack
    6. Hack #17. Submit Checkbox Values to the Server Without a Round Trip
      1. Vote Early and Often
      2. Poll Vault
    7. Hack #18. Dynamically Generate a New Checkbox Group with Server Data
      1. Choose Your Activity
      2. Okay, Where’s the Code?
      3. Array Return Value
      4. Hacking the Hack
    8. Hack #19. Populate an Existing Checkbox Group from the Server
      1. How Does It Work?
      2. Ajax Requests
      3. Here Comes an Array
    9. Hack #20. Change Unordered Lists Using an HTTP Response
      1. Parting Shots
    10. Hack #21. Submit Hidden Tag Values to a Server Component
      1. Dynamo
      2. Notifying Home
      3. Logging
  8. 3. Validation
    1. Hack #22. Validate a Text Field or textarea for Blank Fields
      1. Separating the Logic from the View
    2. Hack #23. Validate Email Syntax
      1. The Longest Wait
      2. Checking Out the Email Syntax
      3. Looking at the Code
      4. Checking Email at the Door
      5. On to Validation
      6. The User Message
      7. On Deck
    3. Hack #24. Validate Unique Usernames
      1. How It Works
      2. The Server Handshake
      3. For Those Server Hackers...
    4. Hack #25. Validate Credit Card Numbers
      1. Verifying the Card Number
      2. Shooting the Luhn
    5. Hack #26. Validate Credit Card Security Codes
    6. Hack #27. Validate a Postal Code
      1. Hacking the Hack
  9. 4. Power Hacks for Web Developers
    1. Hack #28. Get Access to the Google Maps API
      1. Google Objects
    2. Hack #29. Use the Google Maps API Request Object
      1. Personal Googling
      2. Map Objects
      3. Creating Your Own Map
    3. Hack #30. Use Ajax with a Google Maps and Yahoo! Maps Mash-up
      1. How It Works
      2. Fall Harvest
      3. HTML
      4. Google and Yahoo!, Toe to Toe
      5. Driving Directions
      6. How Do I Get to Latitude...?
      7. What’s Next?
    4. Hack #31. Display a Weather.com XML Data Feed
      1. Prepping
    5. Hack #32. Use Ajax with a Yahoo! Maps and GeoURL Mash-up
      1. How It Works
      2. Mashed-up Requests
    6. Hack #33. Debug Ajax-Generated Tags in Firefox
      1. Inspecting Dynamic Creations
    7. Hack #34. Fetch a Postal Code
      1. Server, Take Over
      2. The Servlet
    8. Hack #35. Create Large, Maintainable Bookmarklets
      1. Bookmarklet Code
    9. Hack #36. Use Permanent Client-Side Storage for Ajax Applications
      1. Using AMASS
      2. How AMASS Works Internally
    10. Hack #37. Control Browser History with iframes
      1. Browser Lowdown
      2. Browser Demos
    11. Hack #38. Send Cookie Values to a Server Program
      1. Bake Your Own Cookie
      2. JavaScript
      3. The Cookie Object
    12. Hack #39. Use XMLHttpRequest to Scrape an Energy Price from a Web Page
      1. Getting in a Scrape
      2. For Java Jocks
    13. Hack #40. Send an Email with XMLHttpRequest
      1. How It Works
      2. Server Snippet
    14. Hack #41. Find the Browser’s Locale Information
      1. The Interpreter
      2. Hacking the Hack
    15. Hack #42. Create an RSS Feed Reader
      1. A Simple RSS Reader
      2. How It Works
      3. Hacking the Hack
  10. 5. Direct Web Remoting (DWR)for Java Jocks
    1. Hack #43. Integrate DWR into Your Java Web Application
      1. Configuring the Application
    2. Hack #44. Use DWR to Populate a Selection List from a Java Array
      1. Getting an Array from the Server
      2. Eccentric Utility
    3. Hack #45. Use DWR to Create a Selection List from a Java Map
      1. Code Ahead
    4. Hack #46. Display the Keys/Values from a Java HashMap on a Web Page
    5. Hack #47. Use DWR to Populate an Ordered List from a Java Array
    6. Hack #48. Access a Custom Java Object with JavaScript
      1. The Big Set-up
    7. Hack #49. Call a Built-in Java Object from JavaScript Using DWR
  11. 6. Hack Ajax with the Prototype and Rico Libraries
    1. Hack #50. Use Prototype’s Ajax Tools with Your Application
      1. Request Object to Go
    2. Hack #51. Update an HTML Element’s Content from the Server
      1. On the Server Side
      2. Checking for Errors
    3. Hack #52. Create Observers for Web Page Fields
      1. How It Works
      2. What’s a Prototype Object?
      3. Passive Observer
    4. Hack #53. Use Rico to Update Several Elements with One Ajax Response
      1. Ajax Convention
      2. On the Server End
      3. Hacking the Hack
    5. Hack #54. Create a Drag-and-Drop Bookstore
      1. Draggables and Drop Zones
      2. Grabbing the Book Titles
      3. Hacking Draggables
  12. 7. Work with Ajax and Ruby on Rails
    1. Sensible MVC
    2. Hack #55. Install Ruby on Rails
      1. Step 1: Installing Ruby
      2. Step 2: Installing Rails
      3. Creating an Empty Rails Web Application
      4. Testing the Empty Web Application
      5. A Rails Application Directory Structure
    3. Hack #56. Monitor Remote Calls with Rails
      1. If All Else Fails
    4. Hack #57. Make Your JavaScript Available to Rails Applications
    5. Hack #58. Dynamically Generate a Selection List in a Rails Template
      1. A Little Partial Pizzazz
      2. Cleanup Code
    6. Hack #59. Find Out Whether Ajax Is Calling in the Request
      1. Are You XMLHttpRequest?
    7. Hack #60. Dynamically Generate a Selection List Using Database Data
      1. Tracking Energy Use
      2. Good Form
    8. Hack #61. Periodically Make a Remote Call
      1. No Fooling Around
      2. Where’s All the Action?
      3. Shrink-Wrapped
    9. Hack #62. Dynamically View Request Information for XMLHttpRequest
      1. How Does It Work?
      2. Hacking the Hack
  13. 8. Savor the script.aculo.us JavaScript Library
    1. Hack #63. Integrate script.aculo.us Visual Effects with an Ajax Application
      1. Setting Up
      2. Toggling and Switching
      3. Hacking the Hack
    2. Hack #64. Create a Login Box That Shrugs Off Invalid Logins
      1. Whole Lotta Shakin’
      2. Serve It Up
    3. Hack #65. Create an Auto-Complete Field with script.aculo.us
      1. On the Server Side
    4. Hack #66. Create an In-Place Editor Field
    5. Hack #67. Create a Web Form That Disappears When Submitted
  14. 9. Options and Efficiencies
    1. Hack #68. Fix the Browser Back Button in Ajax Applications
      1. A Very Simple Ajax Program
      2. Inside the Hack
      3. Hacking the Hack
    2. Hack #69. Handle Bookmarks and Back Buttons with RSH
      1. The Problem
      2. The Solution
      3. History Abstraction
      4. Example 1: Basic History
      5. Example 2: O’Reilly Mail
      6. Resources
    3. Hack #70. Set a Time Limit for the HTTP Request
    4. Hack #71. Improve Maintainability, Performance, and Reliability for Large JavaScript Applications
      1. Merging All JavaScript Files into a Single File
      2. Running Your JavaScript Through a Compression Tool
      3. Solving JavaScript Caching Issues
      4. All Together
    5. Hack #72. Obfuscate JavaScript and Ajax Code
    6. Hack #73. Use a Dynamic script Tag to Make Web Services Requests
      1. Using the Geocoding Web Service
      2. Pros and Cons
      3. Resources
    7. Hack #74. Configure Apache to Deal with Cross-Domain Issues
      1. Cross-Domain Blockade
      2. Cross-Domain XMLHttpRequest Works... Kinda
      3. Is There a Solution?
    8. Hack #75. Run a Search Engine Inside Your Browser
      1. Indexing 101
      2. Putting It Together
      3. Hacking the Hack
      4. Resources
    9. Hack #76. Use Declarative Markup Instead of Script via XForms
      1. Consuming and Producing XML
      2. Hacking the Hack
    10. Hack #77. Build a Client-Side Cache
      1. Building a Better Cache
      2. The Cache in Action
      3. Hacking the Hack
    11. Hack #78. Create an Auto-Complete Field
      1. Hacking the Hack
    12. Hack #79. Dynamically Display More Information About a Topic
      1. Hacking the Hack
    13. Hack #80. Use Strings and Arrays to Dynamically Generate HTML
      1. Writing a Table
      2. Performance Matters
  15. Index
  16. About the Author
  17. Copyright