Summary of Contents Preface xi 1. AJAX: the Overview 1 2. Basic XMLHttpRequest 13 3. The “A” in AJAX 41 4. AJAX and POST Requests 85 5. Broader AJAX with Edit-in-place 129 6. Web Services and Slide-and-hide 167 7. More Web Services and a Back Button 199 8. Drag and Drop with AJAX Chess 243 A. AJAX Toolkits 283 Index 287 Licensed to siowchen@darke.biz Licensed to siowchen@darke.biz Build Your Own AJAX Web Applications by Matthew Eernisse Licensed to siowchen@darke.biz Build Your Own AJAX Web Applications by Matthew Eernisse Copyright © 2006 SitePoint Pty. Ltd. Editor: Georgina LaidlawExpert Reviewer: Stuart Langridge Index Editor: Bill JohncocksManaging Editor: Simon Mackie Cover Design: Jess BentleyTechnical Editor: Craig Anderson Cover Layout: Alex WalkerTechnical Director: Kevin Yank Latest Update: October 2006Printing History: First Edition: June 2006 Notice of Rights All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embodied in critical articles or reviews. Notice of Liability The author and publisher have made every effort to ensure the accuracy of the information herein. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors and SitePoint Pty. Ltd., nor its dealers or distributors will be held liable for any damages to be caused either directly or indirectly by the instructions contained in this book, or by the software or hardware products described herein. Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringe- ment of the trademark. Published by SitePoint Pty. Ltd. 424 Smith Street Collingwood VIC Australia 3066. Web: www.sitepoint.com Email: business@sitepoint.com ISBN 0–9758419–4–7 Printed and bound in the United States of America Licensed to siowchen@darke.biz About the Author Matthew lives in Houston, Texas, USA, and works for the Open Source Applications Foundation building the web UIs for Scooby, a next-generation web-based calendar client, and Cosmo, a calendar server. In his abundant free time, he writes about AJAX, JavaScript, Ruby, and PHP at Fleegix.org, and operates EpiphanyRadio, a webcast radio station. Matthew plays drums and speaks fluent Japanese. About the Expert Reviewer Stuart Langridge has been playing with the Web since 1994, and is quite possibly the only person in the world to have a BSc in Computer Science and Philosophy. He invented the term “unobtrusive DHTML” and has been a leader in the quest to popularize this new approach to scripting. When not working on the Web, he’s a keen Linux user and part of the team at open-source radio show LUGRadio, and likes drinking decent beers, studying stone circles and other ancient phenomena, and trying to learn the piano. About the Technical Director As Technical Director for SitePoint, Kevin Yank oversees all of its technical publica- tions—books, articles, newsletters, and blogs. He has written over 50 articles for SitePoint, but is best known for his book, Build Your Own Database Driven Website Using PHP & MySQL. Kevin lives in Melbourne, Australia, and enjoys performing improvised comedy theatre and flying light aircraft. About SitePoint SitePoint specializes in publishing fun, practical, and easy-to-understand content for web professionals. Visit http://www.sitepoint.com/ to access our books, newsletters, articles, and community forums. Licensed to siowchen@darke.biz Licensed to siowchen@darke.biz To my wife, Masako, and my three little boys—Hiromasa, Akira, and Yoshiki—for all their love, patience, and support. Licensed to siowchen@darke.biz Licensed to siowchen@darke.biz Table of Contents Preface xi 1. AJAX: the Overview 1 AJAX Web Applications 2 The Bad Old Days 3 Prehistoric AJAX 3 What Makes AJAX Cool 4 AJAX Technologies 8 Data Exchange and Markup: XML 8 W3C Document Object Model 10 Presentation: CSS 11 Communication: XMLHttpRequest 11 Putting it All Together: JavaScript 12 Summary 12 2. Basic XMLHttpRequest 13 A Simple AJAX Library 14 Starting our Ajax Class 14 Creating an XMLHttpRequest Object 16 Sending a Request 18 Processing the Response 23 Aborting the Request 28 Wrapping it Up 29 Example: a Simple Test Page 29 Example: a Simple AJAX App 33 Laying the Foundations 33 Handling the Result with showPoll 34 Starting the Process Over Again 36 Full Example Code 36 Running the App 38 Further Reading 38 JavaScript’s Object Model 38 XMLHttpRequest 39 Summary 39 3. The “A” in AJAX 41 Planned Application Enhancements 42 Organizing the Code 43 Loss of Scope with setTimeout 44 Creating the Monitor Object 47 Licensed to siowchen@darke.biz Configuring and Initializing our Application 48 Setting Up the UI 49 The toggleButton Method 50 The toggleStatusMessage Method 51 Checking your Work In Progress 52 Polling the Server 53 Handling Timeouts 57 The Response Times Bar Graph 58 The Running List in pollArray 58 Displaying the Results 59 Stopping the Application 66 Status Notifications 67 The Status Animation 68 Setting Up Status 70 Internet Explorer Memory Leaks 71 The displayOpacity Method 72 Running the Animation 75 Styling the Monitor 80 Summary 83 4. AJAX and POST Requests 85 Review: Sending Data with GET 86 Sending Data with POST 86 A Quick Form POST 88 Using formData2QueryString 88 An Application Login 90 Accessibility and Backward Compatibility 90 Markup and CSS 91 Creating the Login Class 94 Setting it Up with init 95 Setting the Login Prompt 97 Ensuring Valid Input 99 Submitting the Form Data 103 Processing the Submission 104 Showing Processing Status 107 Handling the Server Response 109 Dealing with Login Failures 110 AJAX and Screen Readers 112 Thinking “Linearly” 112 Skip Navigation Links 115 Notification for Dynamic Content 117 Testing in Multiple Readers 118 iv Build Your Own AJAX Web Applications Licensed to siowchen@darke.biz [...]... 206 207 207 208 209 209 210 211 211 211 214 215 216 217 218 218 220 223 223 223 225 226 227 227 228 229 2 31 232 233 233 234 235 235 237 238 239 240 240 240 240 2 41 2 41 vii Licensed to siowchen@darke.biz Build Your Own AJAX Web Applications Apache2 and OpenSSL on Windows 2 41 WSDL 2 41 Summary 242 8 Drag and Drop with AJAX Chess 243 AJAX Chess 243 Problems... siowchen@darke.biz Build Your Own AJAX Web Applications 6 Web Services and Slide-and-hide 16 7 Slide-and-hide Window 16 8 Web Services: an Overview 16 8 APIs and Protocols 16 9 REST 16 9 XML-RPC 17 0 SOAP 17 1 Network-centric vs Application-centric 17 1 Amazon Web Services Client 17 2 Amazon Web Services Accounts 17 3 Amazon E-Commerce... Summary 12 1 12 2 12 3 12 5 12 6 12 7 12 8 5 Broader AJAX with Edit-in-place 12 9 Page Markup 13 0 Accessibility and Backward Compatibility 13 2 The Blog Class 13 3 The init Method 13 4 Edit-in-place 13 4 Editing an Entry 13 7 The getSrcElem Method 13 8 Getting the Entry’s ID 13 9 Changing the State 14 0 Turning on Editable... 18 7 Performing the Slide-and-hide 18 8 The Slide-and-hide Effect 19 0 AJAX Fat-client Code 19 1 Legacy Browsers and Accessibility 19 1 Usability: the Back Button Problem 19 2 Debugging Client-side AJAX 19 4 Further Reading 19 6 Cross-site Scripting (XSS) 19 6 Mashups 19 7 Summary 19 7 7 More Web Services and a Back Button 19 9... Service 17 4 The Client Class 17 5 Initial Setup 17 6 Cross-site AJAX 17 7 XMLHttpRequest and Security 17 7 An AJAX Relay 17 8 The Proxy Script 17 9 Sending the Request to Amazon Web Services 18 2 Getting the Search Text 18 3 Sending the Request 18 3 Handling the Results from Amazon 18 4 Using xml2ObjArray 18 5 Formatting... Editable State 14 0 Enabling and Disabling Other Input 14 5 Returning to Display State 14 6 Saving Changes 14 8 The Status Animation 14 9 Starting the Animation 15 0 The doStatusAnim Method 15 1 The Fake Back-end Page 15 2 Using YAML 15 2 The PHP Code 15 4 Response Examples 15 4 Parsing YAML in JavaScript 15 5 Handling the... Response 15 6 Stopping the Status Animation 15 7 Cleaning Up with stopReset 15 7 Adding a New Entry 15 8 Adding the New Entry divs 15 9 Canceling the New Entry 16 1 The Placeholder ID 16 2 Future Enhancements 16 3 Loading Existing Entries 16 3 Concurrency and Locking 16 4 Errors and Timeouts 16 5 Summary 16 5 v Licensed... browser-based applications that behave much more dynamically than old-school web apps This new crop of AJAX web applications make more extensive use of interaction techniques like edit-in-place text, dragand-drop, and CSS animations or transitions to effect changes within the user interface This book will explain those techniques, and show you how to develop AJAX web applications of your own AJAX Web Applications. .. horrible, stodgy, old-school web app is a horrible, poorly executed AJAX web app When you apply it to the right parts of your web application, in the right ways, AJAX can enhance users’ experience of your application significantly AJAX can improve the interactivity and speed of your app, ultimately making that application easier, more fun, and more intuitive to use Often, AJAX applications are described... accurate description AJAX web apps are significantly more responsive than traditional, old-fashioned web applications, and they can provide levels of interactivity similar to those of desktop applications But an AJAX web app is still a remote application, and behaves differently from a desktop application that has access to local storage Part of your job as an AJAX developer is to craft applications that . 16 8 Web Services: an Overview 16 8 APIs and Protocols 16 9 REST 16 9 XML-RPC 17 0 SOAP 17 1 Network-centric vs Application-centric 17 1 Amazon Web Services Client 17 2 Amazon Web Services Accounts 17 3 Amazon. Readers 11 8 iv Build Your Own AJAX Web Applications Licensed to siowchen@darke.biz The Screen Reader Code 12 1 Setting Up Notification 12 2 Showing Notifications 12 3 Enabling the Submit Button 12 5 Adding. Status 10 7 Handling the Server Response 10 9 Dealing with Login Failures 11 0 AJAX and Screen Readers 11 2 Thinking “Linearly” 11 2 Skip Navigation Links 11 5 Notification for Dynamic Content 11 7 Testing