- 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
-
No Comment
..................Content has been hidden....................
You can't read the all page of ebook, please click here login for view all page.