- Head First Ajax
- A Note Regarding Supplemental Files
- Advance Praise for Head First Ajax
- Author of Head First Ajax
- 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 2: Initialize the JavaScript
- 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
- Code in your JavaScript outside of functions runs when the script is read
- 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...
- ... and change the CSS class with our JavaScript
- Changes? We don’t need no stinkin’ changes!
- Only allow registration when it’s appropriate
- 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
- Use setInterval() to let JavaScript run your process, instead of your own code
- 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
- Property values are just strings in JavaScript
- 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
- Our JavaScript doesn’t care how the server figures out its response to our request
- Usability check: WHEN can submitWord() get called?
- 9. XML Requests and Responses: More Than Words Can Say
- 10. JSON: SON of JavaScript
- JSON can be text AND an object
- JSON data can be treated as a JavaScript object
- So how do we get JSON data from the server’s response?
- JavaScript can evaluate textual data
- Use eval() to manually evaluate text
- Evaluating JSON data returns an object representation of that data
- JavaScript objects are ALREADY dynamic... because they’re not COMPILED objects
- 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
- RETURN of SON of JavaScript
- The value of a property can be another JavaScript object
- 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?
- 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
- Index
- About the Author
- Copyright
Sometimes you just want everything in one place.
You’ve spent a lot of time using utils.js, our little utility class of Ajax, DOM, and event utility functions. Inside these pages, you’ll get all those functions in one place, ready to put into your own utility scripts and applications. Take one last chance to familiarize yourself with these functions, and then get to work on your own utilities!
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.