wrox press beginning ajax (2007)

Beginning
Ajax
Chris Ullman
Lucinda Dykes
01_106754 ffirs.qxp 2/9/07 6:13 PM Page iii
01_106754 ffirs.qxp 2/9/07 6:13 PM Page ii
Beginning
Ajax
01_106754 ffirs.qxp 2/9/07 6:13 PM Page i
01_106754 ffirs.qxp 2/9/07 6:13 PM Page ii
Beginning
Ajax
Chris Ullman
Lucinda Dykes
01_106754 ffirs.qxp 2/9/07 6:13 PM Page iii
Beginning Ajax
Published by
Wiley Publishing, Inc.
10475 Crosspoint Boulevard
Indianapolis, IN 46256
www.wiley.com
Copyright © 2007 by Wiley Publishing, Inc., Indianapolis, Indiana
Published simultaneously in Canada
ISBN: 978-0-470-10675-4
Manufactured in the United States of America
10 9 8 7 6 5 4 3 2 1
Library of Congress Cataloging-in-Publication data is available from the publisher.
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any
means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sec-
tions 107 or 108 of the 1976 United States Copyright Act, without either the prior written permission of the Pub-

lisher, or authorization through payment of the appropriate per-copy fee to the Copyright Clearance Center, 222
Rosewood Drive, Danvers, MA 01923, (978) 750-8400, fax (978) 646-8600. Requests to the Publisher for permis-
sion should be addressed to the Legal Department, Wiley Publishing, Inc., 10475 Crosspoint Blvd., Indianapolis,
IN 46256, (317) 572-3447, fax (317) 572-4355, or online at />LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO
REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF
THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING
WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY
MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND
STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS
SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING
LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS
REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT.
NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HERE-
FROM. THE FACT THAT AN ORGANIZATION OR WEB SITE IS REFERRED TO IN THIS WORK AS A
CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT
THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEB
SITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE
AWARE THAT INTERNET WEB SITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAP-
PEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.
For general information on our other products and services please contact our Customer Care Department
within the United States at (800) 762-2974, outside the United States at (317) 572-3993 or fax (317) 572-4002.
Trademarks: Wiley, the Wiley logo, Wrox, the Wrox logo, Programmer to Programmer, and related trade
dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and/or its affiliates, in the United
States and other countries, and may not be used without written permission. All other trademarks are the
property of their respective owners. Wiley Publishing, Inc., is not associated with any product or vendor
mentioned in this book.
Wiley also publishes its books in a variety of electronic formats. Some content that appears in print may not
be available in electronic books.
01_106754 ffirs.qxp 2/9/07 6:13 PM Page iv
About the Authors

Chris Ullman is a freelance Web developer and technical author who has spent many years working
with ASP/ASP.NET. Coming from a computer science background, he started initially as a UNIX/Linux
guru, who gravitated toward Microsoft technologies during the summer of ASP (1997). He cut his teeth
on Wrox Press ASP guides, and since then he has written and contributed to more than 25 books, most
notably as lead author for Wrox’s bestselling Beginning ASP/ASP.NET 1.x series. He has contributed
chapters to books on PHP, ColdFusion, JavaScript, Web Services, C#, XML, and other Internet-related
technologies. After he left Wrox as a full-time employee in August 2001, he branched out into
VB.NET/C# programming and ASP.NET development, and he started his own business, CUASP
Consulting Ltd, in April 2003. He maintains a variety of Web sites from

(his “work” site) to (a selection of his writings on music and art). He
now divides his time between his family and composing electronic sounds for his music project, Open E.
Lucinda Dykes is a freelance Web developer, teacher, and technical author who has been writing code
and developing Web sites since 1994. She started her career in a high-tech area of medicine but left
medicine to pursue her interests in technology and the Web. She has been involved in client-side devel-
opment with JavaScript for many years through her company, Zero G Web, and teaches JavaScript
courses online for an international group of students at
eclasses.org. She has also authored numerous
technical books about XML, XHTML, and Web application development with Dreamweaver.
01_106754 ffirs.qxp 2/9/07 6:13 PM Page v
01_106754 ffirs.qxp 2/9/07 6:13 PM Page vi
Credits
Senior Acquisitions Editor
Jim Minatel
Development Editor
Kevin Shafer
Technical Editors
Alexei Gorkov
Sam Judson
Todd Meister

Matthew Carl Tyson
Spike Xavier
Production Editor
Rachel Meyers
Copy Editor
Nancy Kruse Hannigan
Editorial Manager
Mary Beth Wakefield
Production Manager
Tim Tate
Vice President and Executive Group Publisher
Richard Swadley
Vice President and Executive Publisher
Joseph B. Wikert
Graphics and Production Specialists
Jennifer Mayberry
Alicia B. South
Quality Control Technicians
Laura Albert
John Greenough
Melanie Hoffman
Jessica Kramer
Project Coordinator
Jennifer Theriot
Proofreading and Indexing
Aptara
Anniversary Logo Design
Richard Pacifico
01_106754 ffirs.qxp 2/9/07 6:13 PM Page vii
viii

All my love to my wife, Kate, and the boys.
—Chris Ullman
With love and thanks to Wali for putting up with being married to a
writer; to my mother, Doris Dykes, for instilling a lifelong love of reading
and books; and to all the Web pioneers and innovators who shared their
knowledge with the rest of us.
—Lucinda Dykes
01_106754 ffirs.qxp 2/9/07 6:13 PM Page viii
Acknowledgments
Thanks to my fellow author, Lucinda, for being available for queries and comments. Thanks to Kevin
Shafer for his tremendously measured and consistent input on my text. Thanks to Alexei Gorkov for his
excellent and incisive input on the chapters and code. And thanks to Jim Minatel for being there to field
my numerous requests.
—Chris Ullman
Thanks to my fellow author Chris for everything I’ve learned about server-side development from him.
Thanks to Kevin Shafer for tolerating all the quirks of working with two authors long distance. Thanks
to Alexei Gorkov for an outstanding technical review and suggestions about the code. And thanks to Jim
Minatel for always being there to answer our questions, for providing excellent suggestions, and for giv-
ing me the opportunity to be involved in this project.
—Lucinda Dykes
01_106754 ffirs.qxp 2/9/07 6:13 PM Page ix
01_106754 ffirs.qxp 2/9/07 6:13 PM Page x
Contents
Introduction xxi
Chapter 1: Introducing Ajax 1
What Is Ajax? 2
Ajax in Action 3
flickr 3
Basecamp 4
Amazon (A9.com) 5

Google Suggest and Google Maps 6
Other Sites 7
Bad Examples 8
Ajax: The Acronym 9
XHTML and CSS 9
The Document Object Model (DOM) 10
JavaScript 11
XML, XSLT, and XPath 12
The XMLHttpRequest Object 14
Server-Side Technologies 15
The Ajax Application Model 16
Why Should I Use Ajax? 17
Partial Page Updating 17
Invisible Data Retrieval 18
Constant Updating 18
Smooth Interfaces 18
Simplicity and Rich Functionality 18
Drag and Drop 18
When Not to Use Ajax 18
Poor Responsiveness 19
Breaks the Back Button on Your Browser 19
Breaking Bookmarks and Blocking Search Engine Indexes 19
Strain on the Browser 19
Who Can/Can’t Use Ajax? 20
Create Your Own Example 20
Summary 29
Exercises 30
02_106754 ftoc.qxp 2/9/07 6:14 PM Page xi
xii
Contents

Chapter 2: JavaScript Refresher 31
Core JavaScript 32
Syntax 32
Variables 32
Primitive Datatypes 33
Reference Datatypes 33
Operators 34
Assignment Operator 34
Arithmetic Operators 34
Comparison Operators 35
Logical Operators 35
Increment and Decrement Operators 36
Statements 37
Conditional Statements 37
Loops 38
Functions 40
Object-Oriented JavaScript 41
Built-in Objects 41
Browser Objects 42
User-Defined Objects 43
Constructors 43
Prototypes 44
Destroying Objects 45
The Document Object Model 47
The Document as a Family Tree 48
The Document as a Node Tree 48
DOM Methods for Accessing Objects 49
getElementById 49
getElementsByTagName 50
Creating Nodes 51

The innerHTML Alternative 53
JavaScript and Events 54
Event Models 54
Event Registration 55
The Internet Explorer Event Registration Model 56
The W3C DOM Event Registration Model 56
Event Objects 57
Summary 60
Exercises 61
02_106754 ftoc.qxp 2/9/07 6:14 PM Page xii
xiii
Contents
Chapter 3: Ajax and Server-Side Technologies 63
Ajax and the Server-Side Technologies 64
Forms and HTML Controls 64
The Forms Model of Submission 64
The Ajax/JavaScript Model of Submission 65
From the Server Side Onward 66
Submitting Data to the Server 67
The Server Receives the Request 67
Writing the HTTP Response 68
The XMLHttpRequest Object 69
The Callback Function 69
The responseText Property 70
The responseXML Property 70
Debugging responseXML 71
Debugging responseXML in IE 72
Using the Data 72
The Server-Side Technologies 73
ASP.NET 73

Example Using AJAX and ASP.NET 75
PHP 85
Example Using AJAX and PHP 86
Java Servlets 91
Example Using AJAX and Java Servlets 91
Which One Should You Use? 96
Summary 97
Exercises 97
Chapter 4: Ajax Techniques 99
The XMLHttpRequest Object 100
Creating an XMLHttpRequest Object 100
Synchronous Usage 101
Asynchronous Usage 101
The readyState Property 102
XMLHttpRequest Properties and Methods 102
Common Mistakes 109
More Complex Issues 109
Same Origin Issues 110
Cache Control: IE Aggressive Caching 110
The POST Method 115
Advantages and Disadvantages of Using the POST and GET Methods 117
02_106754 ftoc.qxp 2/9/07 6:14 PM Page xiii
xiv
Contents
Other Ajax Techniques 117
Hidden Frames 118
The Concept 118
Advantages and Disadvantages 124
Hidden Inline Frames 124
The Concept 124

Advantages and Disadvantages 128
Dynamic Script Loading 128
The Concept 128
Advantages and Disadvantages 130
Images and Cookies 130
The Concept 131
Advantages and Disadvantages 135
Summary 135
Exercises 136
Chapter 5: Working with XML 137
XML Basics 137
Creating Tags 138
XML Syntax 138
Well-Formed and Valid XML Documents 139
Extracting XML Data with JavaScript 145
Using Nodes 145
Accessing XML Elements by Name 147
Accessing Attribute Values 148
Using CSS with XML Data 152
Using CSS with XML Documents 153
Using CSS with Ajax 153
The style Property 153
The className Property 154
Summary 154
Exercises 155
Chapter 6: Debugging and Error Handling 157
JavaScript Error Handling 158
Handling Exceptions 158
The onerror Event Handler 160
Mozilla JavaScript Console 162

Microsoft Script Debugger 164
Firebug 166
02_106754 ftoc.qxp 2/9/07 6:14 PM Page xiv
xv
Contents
DOM Inspectors 168
Firefox DOM Inspector 168
IE DOM Inspector 170
Mouseover DOM Inspector (MODI) 171
Troubleshooting Ajax 172
Using the Firebug Console with XMLHttpRequest 172
Live HTTP Headers 173
ieHTTPHeaders Explorer Bar 175
Summary 176
Exercises 177
Chapter 7: Web Services, APIs, and Mashups 179
What Is a Web Service? 180
Public Web Services 181
Consuming a Third-Party Web Service 181
The Structure of a Web Service 183
The REST Approach 184
The SOAP Approach 185
Integrating a Web Service into Your Ajax Application 186
Consuming a Service with XMLHttpRequest 187
Same Origin Policy 187
Creating an Application Proxy 188
The Script Tag Hack 195
Future Alternatives 198
Using APIs 198
The Difference Between Web Services and APIs 199

The Google Maps APIs 199
Google Maps API Key 200
The Map Object 200
Geocode 201
The XMLHttpRequest Factory Method 201
Mashups 209
How Ajax Helps Enable the Use of Mashups 210
Using the Flickr API 210
Tag Clouds (Weighted List) 211
Using the Flickr API Key 212
Creating an Example Application 212
Geotagging Photos in Flickr 212
Displaying Photos from Flickr 222
Summary 225
Exercises 226
02_106754 ftoc.qxp 2/9/07 6:14 PM Page xv
xvi
Contents
Chapter 8: XSLT and XPath 227
XSLT and Its Purpose 228
XSLT Elements 230
xsl:stylesheet 230
xsl:output 230
xsl:includes 231
xsl:template, xsl:apply-templates, and xsl:call-template 232
The Match Attribute 232
The Name Attribute 233
XSLT Parameters 233
xsl:if 234
xsl:choose 234

Escaping XSLT Special Characters 235
xsl:for-each 235
xsl:value-of 236
xsl:sort 236
xsl:variable 236
XSLT Support in the Main Browsers 237
Performing a Transform 237
Performing a Transform Using IE 237
Performing a Transform in Firefox 242
Performing a Transform on the Server Side 245
Creating an XSLT Style Sheet for a Shopping Cart 247
XPath and Its Purpose 256
Basic XPath Functionality 257
XPath Expressions 257
Current Context 258
Document Root 258
Root Element 258
Recursive Descent 259
Specific Elements or Items 259
XPath Functions 259
The number Function 259
The position Function 260
The count Function 260
String Formatting 260
Arithmetic Functions 260
Logical Functions 261
Querying in an XML Document Using XPath 262
Amending the Shopping Cart Example to Use XSLT and Ajax 267
Summary 273
Exercises 273

02_106754 ftoc.qxp 2/9/07 6:14 PM Page xvi
xvii
Contents
Chapter 9: Patterns 275
Design Pattern Background 276
Form Validation 276
Problem 276
Pattern 277
Extra Information on Mouseover Patterns 284
Problem 284
Pattern 284
Polling the Server Pattern 292
Problem 292
Pattern 292
Drag-and-Drop Lists Pattern 301
Problem 301
Pattern 301
Handling Errors Pattern 314
Problem 315
Pattern 315
Summary 320
Exercises 321
Chapter 10: Working with External Data 323
Working with XML News Feeds 324
RSS 0.9x 325
RSS 2.0 327
RSS 1.0 328
Atom 329
Extracting Data from an XML Feed 331
Extracting XML Data 331

Extracting String Data 337
Building an Online Feed Reader with Ajax 339
Summary 348
Exercise 349
Chapter 11: JSON 351
JSON Syntax 352
JSON Datatypes 352
Object Literals 353
Array Literals 354
Using a JSON Parser 354
Data Transmission Formats 355
02_106754 ftoc.qxp 2/9/07 6:14 PM Page xvii
xviii
Contents
Ajax and JSON 357
Creating the Request 357
Parsing the Response 359
Using eval() 359
Using parseJSON() 359
Adding JSON Data to Your Page 360
Using JSON with PHP 364
Summary 365
Exercises 366
Chapter 12: In-Depth Example: Sortable List 367
Using MySQL 368
Creating a MySQL Table 368
Adding Data to the Table 370
Creating a Database Connection 370
Creating Database Queries 371
Obtaining Current Field Values 372

Ordering the List 373
Editing Database Records 374
Inserting a Record 374
Deleting a Record 375
Using Scriptaculous for Drag and Drop 376
Creating a Droppable Element 377
Creating a Sortable Element 378
Interaction with the User: The Index Page 380
Using Ajax for Updates 383
Creating POST Requests 385
Creating GET Requests 386
Processing the Results 387
Adding Style 388
The Files 388
Summary 389
Appendix A: Exercise Solutions 391
Appendix B: Ajax Resources: Frameworks and Libraries 415
02_106754 ftoc.qxp 2/9/07 6:14 PM Page xviii
xix
Contents
Appendix C: JavaScript Resources 425
Appendix D: JavaScript Language Reference 429
Index 475
02_106754 ftoc.qxp 2/9/07 6:14 PM Page xix
02_106754 ftoc.qxp 2/9/07 6:14 PM Page xx
Introduction
Ajax has become a huge buzzword over the past two years, and it is often mentioned in the same breath
as another buzzword — Web 2.0. Neither term refers to something concrete or downloadable, but
they’ve both been coined to reflect the changing face of the Web. Web 2.0 is as much about an attitude
and a mindset as it is about new developments. Several innovations have emerged concurrently to create

this sea of change, such as wikis, blogs, newsfeeds, third-party application programming interfaces
(APIs), and web services. Ajax is one of the prime enablers.
Ajax is not a technology in itself, but rather an umbrella term used to describe how several existing tech-
nologies such as JavaScript, the Document Object Model (DOM), and Extensible Markup Language
(XML) can be used together to create Web applications that are more interactive and that remove the
need for entire web pages to be refreshed when only part of the page is changing.
While the term “Ajax” appeared only fairly recently, the technologies used in Ajax applications have been
around for several years, and some programmers have been using Ajax-style technologies and techniques
for half a decade at least. In the past year, though, there has been a rapid increase in the number of Web
sites that are using Ajax-style techniques. Furthermore, a lot of new job positions are requiring that pro-
grammers know how to program Ajax-style applications. This book helps programmers to understand
the core technologies behind the term “Ajax” and to start building sites using Ajax techniques.
While many people have heard of Ajax, few understand how to write applications using these tech-
niques. Ajax blurs the traditional boundaries between front-end developers and server-side developers,
and it forces a new evaluation of the way applications should be created, as well as the kind of prerequi-
sites a user interface should offer.
Ajax doesn’t require new software, new servers, or tools. It’s about making use of what is already avail-
able. It’s about challenging perceptions that everything is necessarily done on the server. It’s about going
back to old ideas and breathing new life into them. It’s about fundamentally changing the way in which
the Web works.
Who Is This Book For?
This book teaches you how to create applications according to Ajax principles. This book takes no views
on whether Internet Explorer (IE), Firefox, or Safari is a superior browser, and it offers examples that
work across all major browsers. Because of the complexities involved, however, Ajax is not something a
complete novice can expect to pick up. The reader is expected to be familiar with the following client-
side technologies:
❑ HTML (and/or) XHTML
❑ JavaScript
❑ Cascading style sheets (CSS)
03_106754 flast.qxp 2/9/07 6:14 PM Page xxi

The reader will also need to be familiar with at least one of the two following server-side technologies:
❑ PHP
❑ ASP.NET
Server-side examples will be given in both PHP and ASP.NET/C#, but an extensive knowledge of either
isn’t expected.
The reader is not expected to know any of the following because full introductions to each technology
will be given (although familiarity with one or many of them may be useful):
❑ Document Object Model (DOM)
❑ XML
❑ XPath
❑ Extensible Stylesheet Language Transformations (XSLT)
❑ Web services (REST and SOAP)
As with other Wrox Beginning books, you’ll find that the concepts discussed in one chapter are then
used and extended in other chapters.
What This Book Covers
This book discusses what Ajax is and what it means to Web developers, as well as the technologies
behind Ajax applications. The early chapters of this book begin with a discussion of the pros and cons of
Ajax techniques, and they provide a quick refresher of JavaScript techniques. Working through this
book, you’ll discover how Ajax applications cross between client-side and server-side development tech-
niques, examine some common Ajax patterns, and see how Ajax links in to existing technologies such as
XSLT, web services, and the DOM. The final chapter provides an in-depth case study in creating Ajax
applications.
Here’s a chapter by chapter breakdown of what to expect:
❑ Chapter 1: “Introducing Ajax” — This chapter provides an open-minded assessment of what
Ajax is, what is good about it, and what is bad or potentially bad about it. This chapter exam-
ines the different technologies and starts you with a solid opening example of a dynamic menu
that draws its display from an XML back end.
❑ Chapter 2: “JavaScript Refresher” — Before beginning to discuss the building of Ajax applica-
tions in any detail, all readers should be starting from the same level. This chapter provides a
quick refresher of JavaScript techniques and talks about the DOM, including why it has such an

important role in Ajax applications.
❑ Chapter 3: “Ajax and Server-Side Technologies” — While Ajax is primarily about building
applications with JavaScript and calling the server under the covers, how the server receives, pro-
cesses, and returns data is of great importance. This chapter introduces the
XMLHttpRequest
object and looks at how it can call ASP.NET, PHP, and Java applications. The discussion also
examines the different ways and formats in which it can return information back to the client.
Introduction
xxii
03_106754 flast.qxp 2/9/07 6:14 PM Page xxii