Foundations of Ajax

282 Pages·5.973 MB·English

by  Ryan Asleson, Nathaniel T Schutta

Foundations
of Ajax
Ryan Asleson
Nathaniel T. Schutta
Foundations of Ajax
Copyright © 2006 by Ryan Asleson and Nathaniel T.Schutta
All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording, or by any information storage or retrieval
system, without the prior written permission of the copyright owner and the publisher.
ISBN (pbk): 1-59059-582-3
Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1
Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence
of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark
owner, with no intention of infringement of the trademark.
Lead Editor: Ewan Buckingham
Technical Reviewer: Keith Harvey
Editorial Board: Steve Anglin, Dan Appleman, Ewan Buckingham, Gary Cornell, Tony Davis,
JasonGilmore, Jonathan Hassell, Chris Mills, Dominic Shakeshaft, Jim Sumser
Production Director and Project Manager: Grace Wong
Copy Edit Manager: Nicole LeClerc
Copy Editor: Kim Wimpsett
Assistant Production Director: Kari Brooks-Copony
Production Editor: Linda Marousek
Compositor: Linda Weidemann, Wolf Creek Press
Proofreader: Patrick Vincent
Indexer: Tim Tate
Artist: Kinetic Publishing Services, LLC
Interior Designer: Van Winkle Design Group
Cover Designer: Kurt Krames
Manufacturing Director: Tom Debolski
Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor,
New York, NY 10013. Phone 1-800-SPRINGER, fax [phone], e-mail [email protected],or
visit http://www.springeronline.com.
For information on translations,please contact Apress directly at 2560 Ninth Street, Suite 219, Berkeley,
CA 94710. Phone [phone], fax [phone], e-mail [email protected],or visit http://www.apress.com.
The information in this book is distributed on an “as is” basis, without warranty. Although every pre-
caution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any
liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly
or indirectly bythe information contained in this work.
The source code for this book is available to readers at http://www.apress.comin the Source Code section.
For Sara and Adam
—Ryan Asleson
To Christine,without whom
none of this would matter
—Nathaniel T.Schutta
Contents at a Glance
About the Authors ................................................................xiii
About the Technical Reviewer ......................................................xv
Acknowledgments ...............................................................xvii
Introduction .....................................................................xix
nCHAPTER 1 Introducing Ajax................................................1
nCHAPTER 2 Using the XMLHttpRequest Object..............................23
nCHAPTER 3 Communicating with the Server:
Sending Requests and Processing Responses..................39
nCHAPTER 4 Implementing Basic Ajax Techniques...........................75
nCHAPTER 5 Building the Ultimate Ajax Developer’s Toolbox................131
nCHAPTER 6 Testing JavaScript with JsUnit................................161
nCHAPTER 7 Exploring JavaScript Debugging
Tools and Techniques.........................................193
nCHAPTER 8 Putting It All Together.........................................219
nAPPENDIX A Developing Cross-Browser JavaScript.........................251
nAPPENDIX B Introducing Ajax Frameworks.................................257
nINDEX .......................................................................265
v
Contents
About the Authors ................................................................xiii
About the Technical Reviewer ......................................................xv
Acknowledgments ...............................................................xvii
Introduction .....................................................................xix
nCHAPTER 1 Introducing Ajax .............................................1
AShort History of Web Applications.................................1
Browser History..................................................2
The Evolution of Web Applications..................................3
CGI ........................................................3
Applets.....................................................4
JavaScript..................................................5
Servlets and ASPs and PHP ...Oh My!.........................6
Flash.......................................................9
The DHTML Revolution......................................10
The XML Derivatives........................................10
The Fundamental Problem...................................12
Ajax.......................................................13
The Usability Question ...........................................16
The Skill Set....................................................17
Usage..........................................................19
Design Considerations ...........................................20
Summary.......................................................20
nCHAPTER 2 Using the XMLHttpRequest Object.........................23
Overview of the XMLHttpRequest Object............................23
Methods and Properties..........................................24
An Example Interaction...........................................26
GET vs.POST...................................................28
Remote Scripting................................................29
Overview of Remote Scripting................................29
ARemote Scripting Example.................................29
vii
viii nCONTENTS
How to Send a Simple Request....................................31
ASimple Request Example ..................................32
AWord About Security ......................................34
DOM Level 3 Load and Save......................................35
The DOM.......................................................36
Summary.......................................................37
nCHAPTER 3 Communicating with the Server:
Sending Requests and Processing Responses............39
Processing the Server Response ..................................39
Using the innerHTML Property to Create Dynamic Content.......39
Parsing the Response As XML................................42
Dynamically Editing Page Content with the W3C DOM...........48
Sending Request Parameters .....................................55
Sending Request Parameters As XML.........................62
Sending Data to the Server Using JSON .......................67
Summary.......................................................73
nCHAPTER 4 Implementing Basic Ajax Techniques.....................75
Performing Validation............................................75
Reading Response Headers.......................................79
Dynamically Loading List Boxes...................................83
Creating an Autorefreshing Page ..................................90
Displaying a Progress Bar ........................................95
Creating Tooltips...............................................101
Dynamically Updating a Web Page................................106
Accessing Web Services ........................................115
Providing Autocomplete.........................................122
Summary......................................................128
nCHAPTER 5 Building the Ultimate Ajax Developer’s Toolbox.........131
Documenting JavaScript Code with JSDoc.........................131
Installation................................................132
Usage....................................................132
Validating HTML Content with Firefox Extensions...................135
HTML Validator............................................136
Checky...................................................138
nCONTENTS ix
Searching for Nodes Using DOM Inspector.........................140
Performing JavaScript Syntax Checking with JSLint ................143
Performing JavaScript Compression and Obfuscation...............145
Using the Web Developer Extension for Firefox.....................147
Implementing Advanced JavaScript Techniques....................148
Object-Oriented JavaScript via the prototype Property..........148
Private Properties and Information Hiding with JavaScript ......153
Classical Inheritance in JavaScript...........................154
Putting It All Together......................................155
Summary......................................................158
nCHAPTER 6 Testing JavaScript with JsUnit ...........................161
Rising to the JavaScript Challenge................................161
Introducing the Test-First Approach..........................161
Introducing JUnit..........................................163
Exploring JsUnit................................................164
Getting Started............................................164
Writing Tests..............................................164
Running Tests.............................................179
Using Standard and Custom Query Strings....................184
Working with JsUnit Server.................................189
Getting Help ..............................................191
What Else Can You Use?....................................192
Summary......................................................192
nCHAPTER 7 Exploring JavaScript Debugging
Tools and Techniques .....................................193
Debugging Ajax Requests with Greasemonkey.....................193
Introducing Greasemonkey .................................194
Using an XMLHttpRequest Debugging User Script
for Greasemonkey ......................................194
Inspecting Ajax Requests and Responses with the
XMLHttpRequest Debugging User Script ...................194
Debugging JavaScript...........................................196
Using Firefox JavaScript Console............................197
Using Microsoft Script Debugger ............................198
Using Venkman ...........................................201
Summary .....................................................217
x nCONTENTS
nCHAPTER 8 Putting It All Together .....................................219
Introducing Patterns............................................219
Implementing the Fade Anything Technique (FAT) .............219
Implementing Auto Refresh.................................220
Implementing a Partial Page Paint...........................220
Implementing a Draggable DOM.............................221
Avoiding Common Gotchas......................................222
Learning Where to Go for More...................................224
Using a Framework.............................................226
Introducing Taconite............................................226
The Theory of Taconite.....................................227
The Solution ..............................................227
What Does Taconite Do with the Content? ....................228
Introducing Dashboard Applications...............................229
Building the Ajax Dashboard with Taconite ........................230
Introducing the General Features............................230
Introducing the Design Features.............................232
Analyzing the Code ........................................233
Analyzing the Weather Forecast Component ..................235
Analyzing the Headline News Component.....................242
How Does the Automatic Refreshing Work?...................245
Building a Better Autocomplete..............................247
Summary......................................................249
nAPPENDIX A Developing Cross-Browser JavaScript ...................251
Appending Rows to a Table......................................251
Setting an Element’s Style via JavaScript..........................252
Setting an Element’s class Attribute ..............................253
Creating Input Elements.........................................253
Adding Event Handlers to Input Elements..........................254
Creating Radio Buttons..........................................255
Summary .....................................................256
nCONTENTS xi
nAPPENDIX B Introducing Ajax Frameworks.............................257
Browser-Side Frameworks ......................................257
Dojo .....................................................257
Rico .....................................................258
qooxdoo..................................................258
TIBET....................................................258
Flash/JavaScript Integration Kit..............................259
Google AJAXSLT...........................................259
libXmlRequest.............................................259
RSLite....................................................259
SACK ....................................................260
sarrisa ...................................................260
XHConn ..................................................260
Server-Side Frameworks........................................261
CPAINT...................................................261
Sajax ....................................................261
JSON/JSON-RPC ..........................................261
Direct Web Remoting ......................................261
SWATO...................................................262
Java BluePrints............................................262
Ajax.Net..................................................262
Microsoft’sProject Atlas....................................262
Ruby on Rails.............................................263
nINDEX .......................................................................265
About the Authors
nRYAN ASLESON is a software developer who lives and works in the Twin
Cities area of Minnesota. Ryan has been building Web applications since
1998 and has extensive experience with JavaScript and Web development
tools.He helped his organization make the transition from servlet-based
content creation to JavaServer Pages and has also maintained a corporate
Web application framework based on Java Enterprise Edition. He is the
cocreator of the open-source Taconite framework (taconite.sf.net), which
greatly simplifies Ajax development. His interests include performance tuning and standards-
based development. When not working, Ryan enjoys spending time with his family and outdoor
activities such as fishing, hunting, and water sports.
nNATHANIEL T.SCHUTTA is a senior software engineer in the Twin Cities area
ofMinnesota with extensiveexperience developing Java Enterprise Edition–
based Web applications. He has a master’s of science degree in software
engineering from the University of Minnesota and for the last several years
has focused on user interface design. Nathaniel has contributed to corporate
interface guidelines and consulted on a variety of Web-based applications.
Along-time member of the Association for Computing Machinery’s Computer-
Human Interaction Special Interest Group and a Sun-certified Web component developer,
Nathaniel believes that if the user can’t figure out your application, then you’ve done some-
thing wrong. Along with his user interface work, Nathaniel is the cocreator of the open-source
Taconite framework, has contributed to two corporate Java frameworks, has developed train-
ing material, and has led several study groups. During the brief moments of warm weather
found in his home state of Minnesota, he spends as much time on the golf course as his wife
will tolerate. He’s currently exploring Ruby, Rails, and (after recently making the switch)
MacOS X. For more of his random thoughts, check out his blog at www.ntschutta.com/jat/.
xiii