Ajax is no longer an experimental approach to website development, but the key to building browser-based applications that form the cornerstone of Web 2.0. Head First Ajax gives you an up-to-date perspective that lets you see exactly what you can do—and has been done—with Ajax. With it, you get a highly practical, in-depth, and mature view of what is now a mature development approach.
Head First Ajax covers:
- Making Ajax requests with XMLHTTPREQUEST objects
- The asynchronous application model
- The Document Object Model (DOM)
- Controlling the browser with the Browser Object Model
- XHTML Forms
- POST Requests
- XML Syntax and the XML DOM tree
- XML Requests & Responses
- JSON -- an alternative to XML
- Ajax architecture & patterns
- The Prototype Library
The book also discusses the server-side implications of building Ajax applications, and uses a "black box" approach to server-side components.
Table of contents
- Head First Ajax
- A Note Regarding Supplemental Files
- Advance Praise for Head First Ajax
- Author of Head First Ajax
How to Use this Book: Intro
- Who is this book for?
- We know what you’re thinking
- We know what your brain is thinking
- Metacognition: thinking about thinking
- Here’s what WE did
- Here’s what YOU can do to bend your brain into submission
- Read Me
- The technical review team
- Safari® Books Online
1. Using Ajax: Web Apps for a New Generation
- Web pages: the old-fashioned approach
- Web pages reinvented
- So what makes a page “Ajax”?
- Rob’s Rock ‘n’ Roll Memorabilia
- Ajax and rock ‘n’ roll in 5 steps
- Step 1: Modify the XHTML
- Step 3: Create a request object
- Step 4: Get the item’s details
- Let’s write the code for requesting an item’s details
- Always make sure you have a request object before working with it
- The request object is just an object
- Hey, server... will you call me back at displayDetails(), please?
- Use send() to send your request
- The server usually returns data to Ajax requests
- Ajax is server-agnostic
- Use a callback function to work with data the server returns
- Get the server’s response from the request object’s responseText property
- Goodbye traditional web apps...
2. Designing Ajax Applications: Thinking Ajaxian
- Mike’s traditional web site
- Let’s use Ajax to send registration requests ASYNCHRONOUSLY
- Update the registration page
- Set the window.onload event handler... PROGRAMMATICALLY
- What happens when...
- And on the server...
- Some parts of your Ajax designs will be the same... every time
- createRequest() is always the same
- Create a request object... on multiple browsers
- Ajax app design involves both the web page AND the server-side program
- What we’ve done so far...
- What we still need to do...
- The request object connects your code to the web browser
- You talk to the browser, not the server
- The browser calls back your function with the server’s response
- Show the Ajax registration page to Mike...
- The web form has TWO ways to send requests to the server now
- Let’s create CSS classes for each state of the processing...
- Changes? We don’t need no stinkin’ changes!
- Only allow registration when it’s appropriate
- It all started with a downward-facing dog...
- Ajax apps are more than the sum of their parts
- Here’s Marcy’s XHTML...
- Events are the key to interactivity
- Use the window.onload event to initialize the rest of the interactivity on a web page
- Change those left-side images to be clickable
- Use your XHTML’s content and structure
- Add the code for hideHint(), too
- Tabs: an optical (and graphical) illusion
- Use a for... loop to cycle through the images
- CSS classes are the key (again)
- Ummm... but the tabs aren’t < a >’s !
- Use a request object to fetch the class details from the server
- Be careful when you have two functions changing the same part of a web page
- When you need to change images in your script, think “change CSS classes” instead
- Links in XHTML are represented by <a> elements
- We need a function to show an active button and hide a button, too
4. Multiple Event Handlers: Two’s company
- An event can have only one event handler attached to it (or so it seems)
- Event handlers are just properties
- A property can have only ONE value
- Assign multiple event handlers with addEventListener()
- Your objects can have multiple event handlers assigned to a single event in DOM Level 2
- What’s going on with Internet Explorer?
- Internet Explorer uses a totally different event model
- attachEvent() and addEventListener() are functionally equivalent
- addEventHandler() works for ALL apps, not just Marcy’s yoga page
- Let’s update initPage() to use our new utility function
- Use an alert() to troubleshoot
- So what else could be going wrong?
- Event handlers in IE are owned by IE’s event framework, NOT the active page object
- attachEvent() and addEventListener() supply another argument to our handlers
- We need to name the Event argument, so our handlers can work with it
- You say target tomato, I say srcElement tomato...
- So how do we actually GET the object that triggered the event?
5. Asynchronous Applications: It’s like renewing your driver’s license
- What does asynchronous really mean?
- You’ve been building asynchronous apps all along
- But sometimes you barely even notice...
- Speaking of more server-side processing...
- (More) Asynchrony in 3 easy steps
- We need two password fields and a <div> for the cover images
- If you need new behavior, you probably need a new event handler function
- With ONE request object, you can safely send and receive ONE asynchronous request
- Asynchronous requests don’t wait on anything... including themselves!
- If you’re making TWO separate requests, use TWO separate request objects
- Asynchrony means you can’t count on the ORDERING of your requests and responses
- A monitor function MONITORS your application... from OUTSIDE the action
- You call a monitor function when action MIGHT need to be taken
- Status variables let monitors know what’s going on
- And now for our last trick...
- Synchronous requests block ALL YOUR CODE from doing anything
6. The Document Object Model: Web Page Forestry
- You can change the CONTENT of a page...
- ... or you can change the STRUCTURE of a page
- Browsers use the Document Object Model to represent your page
- Here’s the XHTML that you write...
- ... and here’s what your browser sees
- Your page is a set of related objects
- Let’s use the DOM to build a dynamic app
- You start with XHTML...
- appendChild() adds a new child to a node
- You can locate elements by name or by id
- Can I move the clicked tile?
- You can move around a DOM tree using FAMILY relationships
- A DOM tree has nodes for EVERYTHING in your web page
- The nodeName of a text node is “#text”
- Did I win? Did I win?
- But seriously... did I win?
7. Manipulating the DOM: My wish is your command
- Webville Puzzles... the franchise
- Woggle doesn’t use table cells for the tiles
- The tiles in the XHTML are CSS-positioned
- “We don’t want TOTALLY random letters...”
- Our presentation is ALL in our CSS
- We need a new event handler for handling tile clicks
- Start building the event handler for each tile click
- We can assign an event handler in our randomizeTiles() function
- We need to add content AND structure to the “currentWord” <div>
- Use the DOM to change a page’s structure
- Use createElement() to create a DOM element
- You have to TELL the browser where to put any new DOM nodes you create
- We need to disable each tile. That means changing the tile’s CSS class...
- ... AND turning OFF the addLetter() event handler
- Submitting a word is just (another) request
- Usability check: WHEN can submitWord() get called?
- 8. Frameworks and Toolkits: Trust No One
- 9. XML Requests and Responses: More Than Words Can Say
- JSON can be text AND an object
- So how do we get JSON data from the server’s response?
- Use eval() to manually evaluate text
- Evaluating JSON data returns an object representation of that data
- You can access an object’s members... and then get an object’s values with those members
- You need to PARSE the server’s response, not just EVALUATE it
- So which is the better data format?
11. Forms and Validation: Say what you meant to say
- Marcy’s Yoga for Programmers... a booming new enterprise
- Validation should work from the web page BACK to the server
- You can validate the FORMAT of data, and you can validate the CONTENT of data
- We need to validate the FORMAT of the data from Marcy’s enrollment page
- Don’t Repeat Yourself: DRY
- Let’s build some more event handlers
- Let’s warn Marcy’s customers when there’s a problem with their entry
- If you don’t warn(), you have to unwarn()
- IF there’s a warning, get rid of it
- Duplicate data is a SERVER problem
- So we’re done now, right?
12. Post Requests: Paranoia: It’s your friend
- There’s a villain in the movies
- GET requests send request parameters across the network as clear text
- POST requests DON’T send clear text
- The data in a POST request is ENCODED until it reaches the server
- send() your request data in a POST request
- Always check to make sure your request data was RECEIVED.
- Why didn’t the POST request work?
- The server unencodes POST data
- We need to TELL the server what we’re sending
- Set a request header using setRequestHeader() on your request object
A. Leftovers: The Top Five Topics (we didn’t cover)
- #1 Inspecting the DOM
- Inspecting the DOM in Internet Explorer
- Inspecting the DOM in Safari
- #2 Graceful degradation
- #3 script.aculo.us and the Yahoo UI libraries
- #4 Using JSON libraries in your PHP code
- Using JSON in PHP 5.1 and earlier
- #5 Ajax and ASP.NET
- You don’t NEED ASP.NET Ajax to build Internet Explorer-compatible web apps
- B. Utility Functions: Just Gimme the Code
- About the Author
- Title: Head First Ajax
- Release date: August 2008
- Publisher(s): O'Reilly Media, Inc.
- ISBN: 9780596515782
You might also like
Head First jQuery
Want to add more interactivity and polish to your websites? Discover how jQuery can help you …
The Complete AJAX Fundamentals Course
AJAX refers to how browsers make HTTP requests to servers asynchronously, listen for results, and then …
Head First PHP & MySQL
If you're ready to create web pages more complex than those you can build with HTML …
Ajax: The Definitive Guide
Is Ajax a new technology, or the same old stuff web developers have been using for …