Ajax: The Complete Reference Thomas A. Powell New York Chicago San Francisco Lisbon London Madrid Mexico City Milan New Delhi San Juan Seoul Singapore Sydney Toronto Copyright © 2008 by The McGraw-Hill Companies. All rights reserved. Manufactured in the United States of America. Except as permitted under the United States Copyright Act of 1976, no part of this publication may be reproduced or distributed in any form or by any means, or stored in a database or retrieval system, without the prior written permission of the publisher. 0-07-159662-3 The material in this eBook also appears in the print version of this title: 0-07-149216-X. All trademarks are trademarks of their respective owners. Rather than put a trademark symbol after every occurrence of a trademarked name, we use names in an editorial fashion only, and to the benefit of the trademark owner, with no intention of infringement of the trademark. Where such designations appear in this book, they have been printed with initial caps. McGraw-Hill eBooks are available at special quantity discounts to use as premiums and sales promotions, or for use in corporate training programs. For more information, please contact George Hoare, Special Sales, at george_hoare@mcgraw-hill.com or (212) 904-4069. TERMS OF USE This is a copyrighted work and The McGraw-Hill Companies, Inc. (“McGraw-Hill”) and its licensors reserve all rights in and to the work. Use of this work is subject to these terms. Except as permitted under the Copyright Act of 1976 and the right to store and retrieve one copy of the work, you may not decompile, disassemble, reverse engineer, reproduce, modify, create derivative works based upon, transmit, distribute, disseminate, sell, publish or sublicense the work or any part of it without McGraw-Hill’s prior consent. You may use the work for your own noncommercial and personal use; any other use of the work is strictly prohibited. Your right to use the work may be terminated if you fail to comply with these terms. THE WORK IS PROVIDED “AS IS.” McGRAW-HILL AND ITS LICENSORS MAKE NO GUARANTEES OR WARRANTIES AS TO THE ACCURACY, ADEQUACY OR COMPLETENESS OF OR RESULTS TO BE OBTAINED FROM USING THE WORK, INCLUDING ANY INFORMATION THAT CAN BE ACCESSED THROUGH THE WORK VIA HYPERLINK OR OTHERWISE, AND EXPRESSLY DISCLAIM ANY WARRANTY, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO IMPLIED WARRANTIES OF MER- CHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. McGraw-Hill and its licensors do not warrant or guarantee that the functions contained in the work will meet your requirements or that its operation will be uninterrupted or error free. Neither McGraw-Hill nor its licensors shall be liable to you or anyone else for any inaccuracy, error or omission, regardless of cause, in the work or for any damages resulting therefrom. McGraw-Hill has no responsibility for the content of any information accessed through the work. Under no circumstances shall McGraw-Hill and/or its licensors be liable for any indirect, incidental, special, punitive, consequential or similar damages that result from the use of or inability to use the work, even if any of them has been advised of the possibility of such damages. This limitation of liability shall apply to any claim or cause whatsoever whether such claim or cause arises in contract, tort or otherwise. DOI: 10.1036/007149216X Contents at a Glance Part I Core Ideas 1 Introduction to Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 2 Pre-Ajax JavaScript Communications Techniques . . . . . . . . . . . . . . . . . . . . 15 3 XMLHttpRequest Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 4 Data Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Part II Applied Ajax 5 Developing an Ajax Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 6 Networking Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 7 Security Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 8 User Interface Design for Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 9 Site and Application Architecture with Ajax . . . . . . . . . . . . . . . . . . . . . . . . 407 Part III Advanced Topics 10 Web Services and Beyond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 Part IV Appendixes A JavaScript Quick Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551 B HTTP 1.1 Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587 C AjaxTCR Library Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 635 v For more information about this title, click here Contents Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii Part I Core Ideas 1 Introduction to Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Ajax Defi ned . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Hello Ajax World . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 The Challenges of Running Ajax Examples Locally . . . . . . . . . . . . . . 11 The Rise of Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Implications of Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14 2 Pre-Ajax JavaScript Communications Techniques . . . . . . . . . . . . . . . . . . . . 15 One-way Communication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 One-way Image Object Technique . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 One-way Iframes with Query Strings . . . . . . . . . . . . . . . . . . . . . . . . . . 22 One-way Script Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Other Approaches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 One-way Iframes with Form Posts . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 Cookie-based Transport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Two-way Communications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Images for Two-way Communications . . . . . . . . . . . . . . . . . . . . . . . . 32 Two-way Script Tag Communication . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Less Common Two-way Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 Two-way Iframes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Communications Pattern Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Example Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 A Client-Side JS Error Reporter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Offsite Link Press Monitoring . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 Fancy Ratings—Pre-Ajax Version . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 RSS Reader . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 3 XMLHttpRequest Object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Overview of XHRs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Instantiation and Cross-Browser Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 ActiveX XHR Anxiety . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 A Cross-Browser XHR Wrapper . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 vii XHR Request Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Synchronous Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Asynchronous Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 Sending Data via GET . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Sending Data via Post . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Request Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Other HTTP Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Head Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Response Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 readyState Revisited . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 status and statusText . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 responseText . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 responseXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Response Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Controlling Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Authentication with XHRs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Propriety and Emerging XHR Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Managing MIME Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Multipart Responses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 onProgress and Partial Responses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Other Firefox Event Handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 XHR Arcana and Future Changes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 XHR Implications and Challenges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Ajax and Memory Leaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 4 Data Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Ajax and Character Sets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Data Format Decisions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118 Encoding/Decoding Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Encoding/Decoding Responses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119 Security Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Transmission Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120 Standard Encoding: x-www-form-urlencoded . . . . . . . . . . . . . . . . . . . . . . . . 121 Extending Standard Encoding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122 Form Serialization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126 Object Serialization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Using Other Input Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129 JSON . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132 Other Request Forms: YAML, Text, and Beyond . . . . . . . . . . . . . . . . . 136 File Attachments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Response Formats . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Text Responses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Script Responses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 viii Ajax: The Complete Reference XML Responses and Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Well-Formed XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Valid XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 XML and the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Processing Responses with XPath . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Transforming Responses with XSLT . . . . . . . . . . . . . . . . . . . . . . . . . . . 163 Data Islands: Proprietary and Powerful . . . . . . . . . . . . . . . . . . . . . . . . 167 Binary Responses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Encoded Content: Base64 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 Experimenting with Data URLs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171 File Responses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Part II Applied Ajax 5 Developing an Ajax Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Not Another Ajax Library! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 AjaxTCR Library Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 179 Adding Modern Conveniences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Data Format Handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Request Status . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190 Request Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 AjaxTCR Library Utility Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194 AjaxTCR Library Basic Features Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 196 Beyond the AjaxTCR Library . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Introduction to YUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201 YUI’s Connection Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202 Other YUI Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Introduction to Prototype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211 Ajax Prototype Style . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Prototype Ajax Assistance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 Exploring Prototype Further . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 Introduction to jQuery . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 jQuery’s Approach to Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 jQuery Ajax Conveniences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227 The Strengths and Weaknesses of jQuery . . . . . . . . . . . . . . . . . . . . . . . 228 Other Libraries: Dojo and Beyond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 6 Networking Considerations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 What Could Go Wrong? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231 Timeouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232 Retries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 Handling Server Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235 Handling Content Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Contents ix x Ajax: The Complete Reference Dealing with Multiple Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241 Beyond the Two-Connection Limit? . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 Request Queues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Order Is Not Guaranteed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Are Race Conditions Possible? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Ensuring Communication Robustness . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Server Availability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256 Client Availability . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Connection Rates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257 Tracking Network Conditions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Improving Ajax Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 HTTP Compression . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 261 Content Optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264 Caching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Busting Browser Caches . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270 Working with the Browser Cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272 An Ajax Response Cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Precaching . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275 Get the Balance Right . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 There’s Always More . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 7 Security Concerns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 The Web Attack Surfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283 Web Application Reconnaissance Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285 Web Application Attack Review . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Ajax Security Differences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 JavaScript Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 JavaScript Protection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 JavaScript’s Security Policy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Same-Origin Policy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Exceptions to the Same-Origin Policy . . . . . . . . . . . . . . . . . . . . . . . . . . 300 Trusted External Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 Ajax and Authentication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301 HTTP Authentication under Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 302 Ajax and SSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 Custom Form-Cookie Authentication . . . . . . . . . . . . . . . . . . . . . . . . . . 310 Cross-Site Scripting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312 Addressing XSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314 XHR Hijacking with XSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316 History Exposure: The Start of a Hack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 320 Cross Site Request Forgery (CSRF) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 322 CSRF Attacks on JSON, JSONP and Script Responses . . . . . . . . . . . . 324 Defeating CSRF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 327 Ajax Payload Protection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Web Services and Ajax: Security’s Pandora’s Box . . . . . . . . . . . . . . . . . . . . . . 331 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334 8 User Interface Design for Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 The User Interface Implications of Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335 Communicating Network Activity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337 Traditional Web Pattern Activity Indicators . . . . . . . . . . . . . . . . . . . . . 337 Ajax Application’s Activity Indicators . . . . . . . . . . . . . . . . . . . . . . . . . 340 Detailed Status Indications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342 Communicating Problems and Errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 Communicating Change . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 352 To-Do List Introduction: Delete, Confi rm, and Transition . . . . . . . . . . . . . . . 355 Patterns of Immediacy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Click-to-Edit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 360 Click-to-Edit List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365 Drag-and-Drop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 367 Draggable List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 373 The Real Power: Data on Demand . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377 Auto Completion and Suggestion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 378 Auto Search . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384 Auto Validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386 Previewing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394 Progressive Loading . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 The Danger of Incremental Loading . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 What About…? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Putting Things Together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 401 Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 403 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 405 9 Site and Application Architecture with Ajax . . . . . . . . . . . . . . . . . . . . . . . . 407 Adding Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407 In-Page Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 411 Rating Refactored . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 Building a Rating Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 Enabling Alternate Transports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 418 Automatic Communication Fallback . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 Degrading Not Enhancing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Leveraging Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 430 Client-Side Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 434 Applied Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 442 Wrapping the Widget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 445 Full-Site Ajax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 451 Fighting the Back Button Blues . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 452 Embracing History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458 Applied History . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 Ajax and Bookmarking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473 Contents xi xii Ajax: The Complete Reference A Full Example: To-Do List . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 474 Coupled or Decoupled Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 Loose Coupling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 Tight Coupling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 Exploring Tightly Coupled Architecture Approaches . . . . . . . . . . . . 477 Architectural Final Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479 Part III Advanced Topics 10 Web Services and Beyond . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 Ajax and Web Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 483 Server Proxy Solution . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 485 URL Forwarding Scheme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 490 Using the <script> Tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 492 Flash Cross Domain Bridge . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 496 The Future: Native XHR Cross Domain Access . . . . . . . . . . . . . . . . . . 500 SOAP: All Washed Up? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 502 Screen Scraping . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 505 Sampling Public Services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 508 Mash-ups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 511 Comet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 514 Polling: Fast or Long . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 518 The Long Slow Load . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 520 Binary Socket Bridget . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 523 Server Event Listeners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 526 The Comet Challenge: Web Chat . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 527 The Comet Impact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 528 Going Offl ine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 Client Persistence and Storage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529 Danger: Offl ine Ahead! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 535 Enabling Offl ine with Google Gears . . . . . . . . . . . . . . . . . . . . . . . . . . . 537 Emerging Offl ine Possibilities with Firefox 3 . . . . . . . . . . . . . . . . . . . . . . . . . . 545 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 548 Part IV Appendixes A JavaScript Quick Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551 Language Fundamentals . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 551 Language Versions and Conformance . . . . . . . . . . . . . . . . . . . . . . . . . . 552 JavaScript Inclusion Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554 Data Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556 Primitive Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 556 Type Conversion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 557 Composite Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 559 ECMAScript Built-In Objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 562 Identifi ers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 565 Reserved Words . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 566 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567 Variable Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 567 Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 568 Arithmetic Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Bitwise Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Assignment Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 Logical Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571 Conditional Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571 Type Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 571 Comma Operator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 572 Relational Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573 Operator Precedence and Associativity . . . . . . . . . . . . . . . . . . . . . . . . 574 Statements and Blocks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 575 Conditional Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 576 Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 577 Object Iteration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578 JavaScript 1.7’s Generators and Iterators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578 Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 The with Statement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581 Exceptions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 581 Regular Expressions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 582 Comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 583 B HTTP 1.1 Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587 HTTP Requests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587 HTTP Methods . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 588 HTTP Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 589 General Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590 Entity Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 590 Request Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 591 HTTP Responses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 597 Response Headers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 602 MIME . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605 C AjaxTCR Library Reference . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609 Coding Conventions Used . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609 AjaxTCR.comm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610 Request Options Object Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . 610 Request Object Instance Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . 619 AjaxTCR.comm.cache . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620 AjaxTCR.comm.cookie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 620 Contents xiii [...]... greeting for the user that also includes the user’s IP address and local system time to prove that the request indeed went out over the network However, it is much better to monitor the actual progress of the request directly, as shown in Figure 1-6 Once the browser receives data from the network, it will signal such a change by modifying the value of the readyState property of the XHR object Now, the event... trigger behind the scenes communication to the server fetching just the data needed to update the page in response to the submitted actions This process generally happens asynchronously, thus allowing the user to perform other actions within the browser while data is returned Only the relevant portion of the page is repainted, as illustrated in Figure 1-2 Beyond this basic overview, the specifics of... XHTML: The Complete Reference and JavaScript: The Complete Reference are considered background for the material presented in this work Where possible, the content and examples have been made as accessible as possible to the widest range of readers A few appendixes provide some background material for those looking to jump straight into Ajax However, by my experience teaching this material for the past... invoke the function handleResponse In that function, the state of the response is inspected to make sure it is completely available as indicated by a value of 4 in the readyState property It is also useful to look at the HTTP status code returned by the request Ensuring that the status code is 200 gives at least a basic indication that the response can be processed Chapters 3, 5, and 6 will show that there... can be set to reference a URL can be employed for JavaScript-based communications duties The most common techniques used in the pre-Ajax world were image requests, inline frames, and the script tag With the rise of the XMLHttpRequest (XHR) object use in Ajax, some readers might deduce that the old methods should be retired or that the communication patterns are different, yet such is not the case Interestingly,... approach will be quite similar The user will indicate their preference and the script will form a set of query parameters indicating the user’s rating, what they are rating, and maybe other data items The collected data will then be sent to some server-side program (for example, rating.php), which will record the rating and potentially respond or not A complete query string might look something like http://ajaxref.com/ch2/setrating.php?rating=3&transport=human-typed... prompted to allow the extended permissions by the browser A complete version of the code that can be run locally in either Firefox or Internet Explorer can be found at http:/ /ajaxref.com/ch1/helloworldlocal.html NOTE Other Ajax-aware browsers may have no way to run JavaScript code that utilizes the XHR object from the desktop You should run the examples from the book site or, more appropriately, set up... decide instead to host the file on a server, but then you will run into another JavaScript security issue called the same origin policy In this sense you run into a problem where the domain that issues the script—your domain—is different from the place you call, in this case ajaxref.com The JavaScript same origin policy keeps this communication from happening to keep you more secure The main way to solve... is to simply copy the same type of server-side code (as used in the example) to your server and adjust the URL to call your local system, likely using a relative URL There are a few other ways you will be able to get around the same origin policy, but you really shouldn’t be trying to get around it in the first place unless you very carefully consider the security implications With the rise of mash-ups... clicking a link The user activity is then submitted to a server-side program for processing while the user waits, until finally a result is sent, which reloads the entire page While simple to describe and implement, the down side with this model is that it can be slow, as it needs to retransmit data that makes up the complete presentation of the Web page over and over in order to repaint the application . JavaScript. The related texts HTML & XHTML: The Complete Reference and JavaScript: The Complete Reference are considered background for the material presented in this work. Where possible, the. year, and I am glad you guys kept the faith. The three dozen other unmentioned people who work at the two firms will have to be satisfied with the free drinks at the book release party, since we. of the concepts behind Ajax illustrated by an example. Details of the example will then be presented hinting at future complexity. The chapter then concludes with a brief discussion of the