Head Rush Ajax

Table of contents

1. Head Rush Ajax
2. Meet your author
3. Table of Contents (summary)
4. Table of Contents (the real thing)
5. Intro
6. Who is this book for?
   1. Who should probably back away from this book?
7. We know what you’re thinking.
8. And we know what your brain is thinking.
   1. This must be important! Don’t forget it!
9. Metacognition: thinking about thinking
   1. So just how DO you get your brain to treat Ajax like it’s a hungry tiger?
10. Here’s what WE did:
11. Here’s what YOU can do to bend your brain into submission
12. Read Me
13. Tech Reviewers
14. And there’s a lot more...*
15. 1 Using Ajax: Web Applications for a New Generation
    1. The Web, Reloaded
       1. The old way (think 1999)
    2. Welcome to the new millenium!
       1. No more waiting around...
       2. ...when you’re using Ajax apps
          1. Ajax apps are asynchronous, too
    3. "Reloads? We don’t need no stinking reloads."
    4. Ajax to the rescue
       1. Use Ajax to fix the web report...
    5. Reworking the Boards ‘R’ Us report
    6. The highlight reel: Chapter 1
    7. HTML Refresher
    8. Reviewing the Boards ‘R’ Us HTML
    9. Step 1: Creating a request object
    10. Step 2: Requesting updated sales
    11. Adding the getBoardsSold() function
        1. Sending the request to the right URL
    12. PHP...at a glance
    13. What the server used to do...
    14. What the server should do now
    15. The new script’s URL
    16. Initializing the connection
        1. Let’s break that down a bit...
        2. Remember our checklist for getBoardsSold()?
        3. Connecting to the web server
           1. The server doesn’t need any data.
        4. Reviewing what we’ve done
           1. There are still some missing pieces
    17. Back to the HTML
    18. Running getBoardsSold() from the web form
    19. Adding an event handler
    20. Step 3: Coding updatePage()
        1. Ajax is asynchronous JavaScript
        2. Where does the response go?
    21. How we see web apps...
    22. Introducing the web browser
        1. The browser just helps out
    23. The browser gives the server’s response to your JavaScript
    24. What should the browser do with the server’s response?
    25. Sending instructions to the browser
    26. Getting the server’s response
        1. The browser helps out again
    27. Planning the updatePage() function
    28. Make sure the server is finished
        1. Ready states are connected to your request object’s onreadystatechange property
    29. Checking for the right ready state
    30. Showing Katie some Ajax magic
    31. Wait! Stop the presses!
    32. What’s going on?
    33. 60 Second Review
16. 2 Speaking the Language: Making Ajax Request
    1. Break Neck Pizza Delivery
       1. What’s the deal?
    2. Solving the pizza delivery problem
       1. No kidding!
    3. Break Neck Pizza, Ajax-style
    4. Diagramming the Break Neck app
    5. Be the Architect
    6. Step 1: Get the customer’s phone number
    7. HTML 101: accepting user input
    8. Event handlers connect HTML to JavaScript
       1. Plan first, code later
    9. Event handler roundup
    10. On to the JavaScript
    11. Use the DOM to get the phone number
    12. Connecting the DOM dots
    13. Step 2: Request the customer’s address
    14. getCustomerInfo() at a glance
    15. Creating a request object
    16. Plans change
    17. Supporting multiple browsers
        1. Don’t annoy the customer!
        2. JavaScript doesn’t have to be in a function
    18. Back to getCustomerInfo()
    19. Talking to the server-side guys
    20. Break Neck’s PHP script
    21. PHP...at a glance
    22. Request URLs deliver data to the server
    23. Giving instructions to the browser
    24. Send the request to the server
    25. Podcasting Studio
    26. Step 3: Retrieve the customer’s address
    27. HTTP Ready States
        1. Right—because updatePage() runs every time the ready state changes.
    28. Checking the ready state
    29. What is the browser doing?
    30. Get the server’s response from the request object
    31. Step 4: Update the order form
    32. Finishing off the callback function
    33. Test driving the Break Neck app
    34. Wait just a second...
        1. Order matters in asynchronous apps
        2. What’s going on in Windows?
    35. When browsers cache request URLs...
        1. Sometimes it takes a hack...
        2. Good thinking!
    36. Step 5: Place the customer’s pizza order
    37. Back to Break Neck’s order form
    38. The final test drive
    39. 60 Second Review (1/2)
    40. 60 Second Review (2/2)
    41. Problems at Break Neck...
    42. Checking the request’s status
        1. The request URL is a relative URL
        2. The browser always runs your callback... ...and it did report an error.
    43. Servers return a ready state and a status code
    44. Back to Break Neck...
17. 3 She Blinded Me with Asynchrony: Asynchronous Apps
    1. What does asynchronous really mean?
       1. A synchronous request for cola
       2. An asynchronous request for cola
    2. Break Neck Pizza is an asynchronous app
    3. But it was probably too fast for you to notice...
       1. What does asynchronous get you?
    4. Building an Ajax-powered coffee maker
       1. Two coffee makers......and a whole office of caffeine addicts
       2. You’re going to build an Ajax application to allow your co-workers to order their coffee online.
    5. Three ingredients for asynchronous coffee
    6. Connecting the parts of the coffee maker
    7. How is the coffee maker going to work?
    8. The back-and-forth of Ajax development
    9. The coffee maker HTML
       1. Yes, let’s put your JavaScript in a separate file.
    10. Here’s what we did...
    11. Sending a request for coffee
    12. Writing JavaScript to send the request
        1. Which coffee maker should we use?
    13. Getting the beverage and size of the order
    14. Getting the value of a radio group
    15. What JavaScript do we still need to write?
    16. Getting and setting the text content in a
        1. What you want: to get the text in the “coffeemaker1-status”
        2. More help from text-utils.js
    17. Checking a coffee maker’s status
    18. Setting the text in a
    19. Test drive
        1. Let’s clear the form when an order is placed
    20. What do we do with the server’s response?
    21. Writing the callback function
    22. Interpreting the server’s response
    23. Introducing the JavaScript substring() function
    24. substring() practice
    25. Finishing up serveDrink()
    26. The final test drive (right?)
    27. So what happened to Jim’s coffee order?
    28. A closer look at the request object
    29. But what about Jim’s order?
    30. We need two request objects!
    31. Now you can keep up with both coffee orders.
    32. Creating two request objects
    33. Using two request objects
        1. Yes, let’s change sendRequest() first
    34. Updating orderCoffee()
    35. Welcome to the world of asynchrony!
    36. Skeptical?
    37. A synchronous test drive
    38. Change that baby back to asynchronous!
    39. Two coffee makers, asynchrony, and one jittery, wired, happy office.
18. 4 Web Page Forestry: the Document Object Model
    1. Need a dynamic application?
    2. Use the Document Object Model.
    3. Meet the DOM
    4. Under the Microscope: The document object
    5. Using the DOM without Ajax
    6. Better visit your local tree farm...
    7. Here’s the HTML that you give to the browser...
    8. ...and here’s how the browser sees the HTML
       1. The browser organizes your markup into a "tree" structure.
    9. How the browser sees your HTML (part 2)
    10. WRITE YOUR OWN Web Dictionary
        1. Order matters to the web browser. (1/2)
        2. Order matters to the web browser. (2/2)
    11. Back to the forest
    12. Browsers see the world upside down
    13. A new type of tree: the DOM tree
        1. Remember that big huge DOM tree we just looked at?
    14. Moving around in a DOM tree
        1. The node knows... pretty much everything.
        2. You can! (well, sort of)
    15. Some browsers don’t recognize Node
        1. You’re ready for the challenge...
    16. The Great Chapter 4 Coding Challenge
19. 4.5 A Second Helping: Developing DOM applications
    1. Everyone’s a critic
    2. Checking out top5.html
    3. What’s the game plan?
    4. The big picture
    5. Setting up the CD covers
    6. Use JavaScript to programmatically add event handlers to all elements.
    7. Adding event handlers
    8. Running addOnClickHandlers()
    9. Adding a CD to the top 5
    10. After addToTop5() runs...
    11. Pay attention to "this"
    12. Finding the "top5"
    13. Adding children to an element
    14. Back to event handlers
        1. Remember how we added the event handler?
    15. Testing addToTop5()
        1. An element can have only one parent
        2. Exactly!
    16. Adding the ranking number
        1. More additions to our DOM tree
    17. What’s left to do?
    18. Completing addToTop5()
    19. Testing the CD rankings (again)
        1. Now you just need to update top5.html, and set the "Start Over" button to call your completed startOver() function:
    20. A final test drive
    21. The Great Chapter 4 Coding Challenge
20. 5 Saying More with POST: POST Requests
    1. Repeat business rocks
    2. Submitting a form with Ajax
    3. 1. Update the Break Neck HTML
    4. 2. Send the order to the server
    5. 3. Update placeOrder.php
    6. PHP...at a glance
    7. When things go wrong
    8. 4. Write the callback function
    9. The DOM is connected to what a customer sees
    10. Test driving Break Neck
    11. Not so fast, Alex...
        1. Error messages are a good thing
    12. The PHP code creates a new response header:
    13. The server talks back
    14. Break Neck error handling
    15. GET requests versus POST requests
        1. GET requests send data in the request URL
        2. POST requests send data separate from the request URL
    16. Web servers unencode POST data
    17. Send more data with a POST request
        1. Browsers cache GET requests
        2. Browsers hate a mystery
    18. Browsers don’t try and cache POST requests.
    19. Trying out POST requests
    20. Why didn’t the POST request work?
    21. The mysterious POST data
        1. You need to set the content type
    22. Servers get information from the browser using request headers.
    23. Servers send information to the browser using response headers.
    24. Setting the Content Type
    25. Another test drive
        1. It’s browser-dependent
        2. Well, it’s not that small...
        3. Hmmm.... well... umm....
    26. Break Neck Pizza online
    27. Welcome to SQL injection
        1. It’s still your web application
    28. Protecting against SQL injection in your JavaScript
        1. You still need to secure the PHP script
    29. What’s wrong with the PHP script?
    30. SQL injection attacks without the web form
    31. Protecting against SQL injection in your PHP scripts
    32. Your customer database is secure!
21. 6 More Than Words Can Say: XML Requests & Responses
    1. servers don’t get to say much
    2. Speak Up!
    3. XML: just what the doctor ordered
    4. Remember Katie?
    5. The problem with Boards ‘R’ Us
       1. But do you understand why?
    6. Filling that XML prescription
    7. PHP...at a glance
    8. Trees, trees, everywhere I look
    9. Using responseXML in your code
    10. Time to take a shortcut:
    11. Trying things out
    12. XML is a meta language: it defines other XML languages.
        1. XML is a standard... ...but how you use it isn’t.
        2. That’s right.
        3. You’ve really got this stuff down!
        4. Why would you do that? (1/2)
        5. Why would you do that? (2/2)
22. 7 A Fight to the Finish: JSON versus XML
    1. A review of request and response formats
    2. Should you use XML or JSON?
    3. Fighting Words
    4. The heavyweight champion: XML
    5. You work with XML using the DOM.
    6. You use the DOM to work with XML
    7. The young upstart: JSON
    8. You work with JSON using “normal” JavaScript.
    9. You don’t need a special object model to work with JSON data
    10. JSON is JavaScript. (1/2)
    11. JSON is JavaScript. (2/2)
    12. So which is the better data format?
    13. We did say that JSON is JavaScript (1/2)
    14. We did say that JSON is JavaScript (2/2)
    15. JSON comes across as text (1/2)
    16. JSON comes across as text (2/2)
    17. You should use text data for your requests whenever possible. (1/2)
    18. You should use text data for your requests whenever possible. (2/2)
        1. You can use JSON, XML, or text in your requests to the server (1/2)
        2. You can use JSON, XML, or text in your requests to the server (2/2)
        3. JSON is great with objects... ...but do you really need objects? (1/2)
        4. JSON is great with objects... ...but do you really need objects? (2/2)
    19. So which is the better data format?
23. Appendix 1: A Few Special Bonus Gifts: Extras
    1. #1: Ajax toolkits
    2. #2: script.aculo.us and other UI libraries
    3. #3: Inspecting the DOM
    4. Inspecting the DOM in Internet Explorer
    5. Inspecting the DOM in Safari
    6. #4: Using JSON libraries in your PHP scripts
    7. #5: Using eval() with JSON
    8. Use a JSON parser
24. Appendix 2: "All I Want Is the Code.": ajaz and DOM utilities
    1. ajax.js
    2. Using ajax.js
       1. Don’t use what you don’t understand
    3. text-utils.js
    4. Using text-utils.js
    5. Index
       1. Symbols
       2. A
       3. B
       4. C
       5. D
       6. E
       7. F
       8. G
       9. H
       10. I
       11. J
       12. L
       13. M
       14. N
       15. O
       16. P
       17. R
       18. S
       19. T
       20. U
       21. V
       22. W
       23. X