Bulletproof Ajax
by Jeremy Keith
I, Michael Parker, own this book and took these notes to further my own learning. If you enjoy these notes, please purchase the book!
Chapter 1: What is Ajax?
- pg 8: A tiny, practically invisible inline frame, or hidden
iframe, can get data from the server; Javascript can use that data to update the main page.
- pg 9: Ajax isn’t tied to XML – you can use any structured format that carries data.
Chapter 2: JavaScript and the Document Object Model
- pg 19: Variables assigned
null and 0 are treated as false in boolean expressions.
- pg 24: Use
=== to check if two values are not just equal but identical; use !== to check if they are not identical.
- pg 29: Functions can be assigned to variables; to store a reference to a function with arguments defined, use an anonymous function.
- pg 31: Functions and methods belonging to a class are called methods and properties.
- pg 32: Native objects are part of the core Javascript language; host objects are provided by the environment in which JavaScript is running.
- pg 39: Calling
getElementsByTagName("*") returns only element nodes, while the childNodes property contains text nodes and attributes.
Chapter 3: XMLHttpRequest
- pg 52: For
XMLHttpRequest, the onreadystatechange event handler is triggered everytime the readyState property changes.
- pg 55: The
open method will not initiate a request; the send method must be invoked.
- pg 56: If POSTing data, use the
setRequestHeader method to set the Content-type header to application/x-www-form-urlencoded.
- pg 57: Every browser finishes with a
readyState value of 4 when the request is completed.
- pg 59: If the server responds with MIME type
text/xml or application/xml the response is in the responseXML property instead of responseText.
- pg 73: Returned XML data can be traversed using the DOM methods you would use to traverse an HTML document.
- pg 77: JSON, pronounced like the name Jason, does not need to be interpreted by JavaScript because it is JavaScript.
- pg 80: The JSON stored in
responseText is interpreted as an object literal and converted using the eval function.
- pg 82: The
send method of XMLHttpRequest can only access the domain serving up the Javascript file being executed.
- pg 83: Using DOM scripting, you can dynamically create a
script element with a Javascript URL from another domain; that script can modify your DOM.
- pg 89: HTML fragments returned via Ajax can be inserted wholesale into your document by assigning the
innerHTML property of an element.
Chapter 5: Hijax
- pg 98: Use the
onload event handler to invoke the DOM methods in your JavaScript only once the page has finished loading.
- pg 103: After building a web page without Ajax, apply Ajax to scenarios where a page is reloaded but only partially modified.
- pg 112: Given a
form element, its elements property contains all its inputs.
- pg 115: Do not rely on Javascript for form validation, but use it to get and display a validation response from the server.
Chapter 6: Ajax Challenges
- pg 124: If you’re not going to try for graceful degradation, consider technologies beyond Ajax like Flash.
- pg 126: Applications using Ajax should provide feedback to the user that some action is under way.
- pg 130: It’s also good to show that something just happened, using something like the yellow fade technique.
- pg 136: If the user would want to bookmark the changed state of a page, don’t replace full page refreshes with Ajax.
- pg 137: With Ajax, wireframes representing web page must be ditched for prototypes that add dynamic elements through simple DOM scripting.
Chapter 7: Ajax and Accessibility
- pg 141: Most screen readers don’t interact with the DOM, but take a snapshot of the document and put it in a “virtual buffer” for manipulation.
- pg 143: Screen readers show a bias toward the creating or updating of tables, and focusable elements like form fields and links.
- pg 143: Assign an element a tabindex of
-1 to make it focusable and attract the screen reader without upsetting the default tab order.
- pg 144: Put an opt-in checkbox off-screen that only screen-readers can find and toggle, which generates alert messages for Ajax updates.
- pg 149: Web browsers can’t detect screen-readers, but Flash can, and can notify JavaScript of this.
Chapter 8: Putting It All Together
- pg 171: Functions within an object can access variables declared within the same object using closures.
- pg 182: In the
onreadystatechange method, display an error message with DOM scripting if the status code is not 200 or 304.
- pg 184: Use
setTimeout to call abort on the XMLHttpRequest object if the request is taking too long, and clearTimeout if the request completes.
Chapter 9: The Future of Ajax
- pg 193: If you use a JavaScript library, consider its file size, as the client will need to download whatever you choose.