First described by Jesse James Garrett, Asynchronous JavaScript and XML (Ajax) is a new way to boost the interactivity of websites.
Ajax is a cross-platform set of technologies that allows developers to create web pages that behave more interactively, like applications. It uses a combination of Cascading Style Sheets (CSS), XHTML, JavaScript, and some textual data – usually XML or JavaScript Object Notation (JSON) – to exchange data asynchronously. This allows sectional page updates in response to user input, reducing server transfers (and resultant wait times) to a minimum. Properly coded, Ajax pages replace the old full-page paint, decide, click, and wait approach with streamlined partial page redraws, thereby boosting response times, interactivity, and usability.
Ultimately, the goal of Ajax is to increase conversion rates through a faster, more user-friendly web experience. Unfortunately, unoptimized Ajax can cause performance lags, the appearance of application fragility, and user confusion. It can even harm your search engine rankings. The purpose of this chapter is to help you avoid these possible pitfalls and reap the rewards of Ajax.
We recommend the following best practices for optimizing the performance, stability, and usability of Ajax applications.
- Appropriately applying Ajax to a problem
- Using a well-constructed and supported Ajax library
- Minimizing your JavaScript code footprint
- Reducing HTTP request requirements
- Choosing the correct data format for transmission
- Ensuring that network availability and performance concerns are addressed
- Employing a JavaScript cache
- Carefully polling for user input
- Providing a fallback mechanism for search engines and accessibility when JavaScript is turned off
- Saving state with the fragment identifier
What follows is an outline of this chapter:
- Ajax Optimization
- Common Problems with Ajax
- Ajax – New and Improved JavaScript Communications
- Proper Application of Ajax
- Rolling Your Own Ajax Solution
- Code: Ajax wrapper function for XHR
- Synchronous Versus Asynchronous Communication
- An Illustrative Example
- Code: Ajax Hello World
- Figure 8-4. “Hello World,” Ajax version
- Prelude to Ajax optimizations
- Relying on Ajax Libraries
- Code: Prototype Ajax library example
- Code: jQuery Ajax library example
- Code: YUI Ajax library example
- Evaluating an Ajax Library
- JavaScript Optimization
- Remove JavaScript Comments
- Code: Remove JavaScript comments
- Conditional comments
- Reduce Whitespace Carefully
- Use JavaScript Shorthand
- Use String Constant Macros
- Avoid Optional Constructs and Kill Dead Code Fast
- Shorten User-Defined Variables and Function Names
- Remap Built-in Objects
- Inline Localized Functions
- Assume Default Values
- Every Byte Counts
- Bundle Your Scripts
- Lazy-Load Your Code
- Pace Yourself
- Monitor User Rendering Time
- Practice Error Awareness
- Clean Up After Yourself
- Memory leaks and garbage collection in Internet Explorer
- Go Native
- Clock Your Runtime
- Remove JavaScript Comments
- Minimizing HTTP Requests
- Choosing Data Formats Wisely
- Addressing the Caching Quandary of Ajax
- Method 1: Output No Caching Headers on the Server Side
- Method 2: Make Requests with Unique URIs
- Method 3: Make Requests with an Old If-Modified-Since Header
- Method 4: Create Your Own Cache
- Addressing Network Robustness
- Timeouts, Retries, and Ordering
- Code: Timeout
- Retrying After a Timeout
- Out of Order Responses
is h1
- Addressing Server and Content Error
- Polling Carefully
- The Problem with Polling
- Understanding the Ajax Architecture Effect
- The Location Hash Technique
- Summary
Footnotes
- Garrett, J. February 18, 2005. “Ajax: A New Approach to Web Applications.”
- Adaptive Path, http://www.adaptivepath.com/publications/essays/archives/000385.php (accessed April 15, 2008).
- Ajax was a mythological Greek hero
- who played an important role in Homer’s Iliad. He is described as the strongest of all the Achaeans. Although not the origin of this technology’s name, it is certainly a suitable lineage for the power the technology provides.
- Yahoo!’s YUI Ajax library
- was 143.4 KB unoptimized versus 38.46 KB after minimization, or about 73.2% smaller overall. For the individual files, yahoo.js was 28.5 KB originally versus 5.86 KB minified, event.js was 79 KB unoptimized versus 17 KB minified, and connection.js was 35.9 KB unoptimized versus 13.6 KB optimized. These numbers were for version 2.3.0 of YUI.
- We have done extensive testing on this default (the two connection per hostname recommendation).
- There are ways to modify it in the browser, but by default, two is the limit of simultaneous connections, at least for JavaScript files. See http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html for more details.
- Neuberg, B. August 15, 2006. “Tutorial: How to Profile and Optimize Ajax Applications.”
- Coding in Paradise, http://codinginparadise.org/weblog/2006/08/tutorial-how-to-profile-and-optimize.html (accessed February 11, 2008).
- Fielding, R. et al. June 1999. “Hypertext Transfer Protocol–HTTP/1.1.”
- RFC 2616, http://www.w3.org/Protocols/rfc2616/rfc2616-sec8.html (accessed February 11, 2008).
- Note that innerHTML has been added to the HTML 5 draft.
- See http://www.w3.org/html/wg/html5/diff/.
- Zimmerman, H. 1980. “OSI Reference Model–The IS0 Model of Architecture for Open Systems Interconnection.”
- IEEE Transactions on Communications COM-28 (4): 425-432.
- For more in-depth error correction and prevention, see the “Networking Considerations” chapter
- written by T. Powell) in my book, Ajax: The Complete Reference (McGraw-Hill Osborne Media).
- The term Comet is not an acronym.
- The general introduction of the term is attributed to Alex Russell from Dojotoolkit.org sometime in early 2006 (see http://alex.dojotoolkit.org/?p=545).