Pragmatic Ajax: a Web 2.0 primer

296 Pages·2006·3.84 MB·English

by  Justin Gehtland

Pragmatic Ajax
A Web 2.0 Primer
Justin Gehtland
Ben Galbraith
Dion Almaer
The Pragmatic Bookshelf
Raleigh,NorthCarolina Dallas,Texas
P r a g m a t i c
B o o k s h e l f
Manyofthedesignationsusedbymanufacturersandsellerstodistinguishtheirproducts
are claimed as trademarks. Where those designations appear in this book, and The
Pragmatic Programmers, LLC was aware of a trademark claim, the designations have
been printed in initial capital letters or in all capitals. The Pragmatic Starter Kit, The
PragmaticProgrammer,PragmaticProgramming,PragmaticBookshelfandthelinkingg
devicearetrademarksofThePragmaticProgrammers,LLC.
Every precaution was taken in the preparation of this book. However, the publisher
assumesnoresponsibility forerrors oromissions, orfor damagesthatmay result from
theuseofinformation(includingprogramlistings)containedherein.
Our Pragmatic courses, workshops, and other products can help you and your team
create better software and have more fun. For more information, as well as the latest
Pragmatictitles,pleasevisitusat
http://www.pragmaticprogrammer.com
Copyright©2006ThePragmaticProgrammersLLC.
Allrightsreserved.
Nopartofthispublicationmaybereproduced,storedinaretrievalsystem,ortransmit-
ted, in any form, or by any means, electronic, mechanical,photocopying, recording, or
otherwise,withoutthepriorconsentofthepublisher.
PrintedintheUnitedStatesofAmerica.
ISBN0-9766940-8-5
Printedonacid-freepaperwith85%recycled,30%post-consumercontent.
Firstprinting,March2006
Version: 2006-4-27
Contents
Acknowledgments vii
1 Building Rich Internet Applications with Ajax 1
1.1 A Tale in Three Acts . . . . . . . . . . . . . . . . . . . . . 2
1.2 Google Maps: The Missing Spark . . . . . . . . . . . . . 4
1.3 What Is Ajax? . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 Whither Now? . . . . . . . . . . . . . . . . . . . . . . . . . 8
2 Creating Google Maps 9
2.1 Rocket Scientists? . . . . . . . . . . . . . . . . . . . . . . 10
2.2 Your Own Google Maps . . . . . . . . . . . . . . . . . . . 11
2.3 Creating Ajaxian Maps . . . . . . . . . . . . . . . . . . . 16
2.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . 47
3 Ajax in Action 48
3.1 Ajaxifying a Web Application . . . . . . . . . . . . . . . . 48
3.2 Ajax to the Rescue . . . . . . . . . . . . . . . . . . . . . . 48
3.3 The Grubby Details . . . . . . . . . . . . . . . . . . . . . 56
3.4 Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . 59
4 Ajax Explained 60
4.1 A Review of Client-Side JavaScript. . . . . . . . . . . . . 61
4.2 Manipulating the Web Page . . . . . . . . . . . . . . . . . 67
4.3 Retrieving Data . . . . . . . . . . . . . . . . . . . . . . . . 73
4.4 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
5 Ajax Frameworks 77
5.1 Frameworks, Toolkits, and Libraries . . . . . . . . . . . 77
5.2 Remoting with the Dojo Toolkit. . . . . . . . . . . . . . . 82
5.3 Remoting with the Prototype Library . . . . . . . . . . . 90
5.4 Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . 92
CONTENTS v
6 Ajax UI, Part I 93
6.1 Ajax and JavaScript for the UI . . . . . . . . . . . . . . . 93
6.2 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . 121
7 Ajax UI, Part II 122
7.1 Some Standard Usages . . . . . . . . . . . . . . . . . . . 122
7.2 It Isn’t All Just Wine and Roses... . . . . . . . . . . . . . 137
7.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . 146
8 Debugging Ajax Applications 147
8.1 View Source . . . . . . . . . . . . . . . . . . . . . . . . . . 147
8.2 DOM Inspectors . . . . . . . . . . . . . . . . . . . . . . . 148
8.3 JavaScript Debugging . . . . . . . . . . . . . . . . . . . . 160
8.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . 169
9 Degradable Ajax 170
9.1 What Is Degradable Ajax? . . . . . . . . . . . . . . . . . . 170
9.2 Ensuring Degradable Ajax Applications . . . . . . . . . . 172
9.3 Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . 183
10 JSON and JSON-RPC 184
10.1 JSON-RPC . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
11 Server-side Framework Integration 192
11.1 Different Strategies for Integration. . . . . . . . . . . . . 193
12 Ajax with PHP 195
12.1 The PHP Frameworks . . . . . . . . . . . . . . . . . . . . 195
12.2 Working with Sajax . . . . . . . . . . . . . . . . . . . . . 196
12.3 XOAD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
12.4 Wrapping Up . . . . . . . . . . . . . . . . . . . . . . . . . 209
13 Ajax with Rails 210
13.1 Ruby on Rails . . . . . . . . . . . . . . . . . . . . . . . . . 210
13.2 Ajax Integration. . . . . . . . . . . . . . . . . . . . . . . . 214
13.3 The Future of Ajax in Rails . . . . . . . . . . . . . . . . . 227
14 Proxy-Based Ajax with DWR 230
14.1 DWR . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
14.2 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . 245
CONTENTS vi
15 ASP.NET and Atlas 246
15.1 BorgWorX . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
15.2 Atlas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
15.3 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . 258
16 Ajax in the Future and Beyond 259
16.1 Data Manipulation . . . . . . . . . . . . . . . . . . . . . . 259
16.2 UI Manipulation . . . . . . . . . . . . . . . . . . . . . . . 263
16.3 Predictions . . . . . . . . . . . . . . . . . . . . . . . . . . 275
16.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . 278
Acknowledgments
Writing a book is a lot like (we imagine) flying a spaceship too close
to a black hole. One second you’re thinking “Hey, there’s something
interesting over there” and a picosecond later, everything you know
and love has been sucked inside and crushed.
OK,that’shyperbole,butthepointisthatbooksdon’twritethemselves.
Moretothepoint,booksaren’tevenjustwrittenbytheauthors. Ittakes
the combined efforts of a lot of people to extract information from the
chaos. We’d like to hereby issue the following thanks.
To every single beta purchaser of thebook and especially the ones who
sent in all those errata posts. You are a fantastic bunch, and we can’t
thankyouenoughforyourbeliefintheprojectandyourhelpinmaking
it a better book.
To the team at the Pragmatic Programmers (especially you, Dave): you
exhibited endless patience, forbearance, and wisdom during the pro-
cess.
Finally, to the authors of all the wonderful frameworks and tools we
highlight in this book: your work is inspiring and we hope that this
book helps shed just a littlemore light on the work you’ve done.
From Justin Gehtland
To my coauthors: thanks for thinking of me.
Mycolleaguesareanendlessfontofinspirationandvexation,both
of which help with the creative process. So, thanks to Stu Hal-
loway,GlennVanderburg,NealFord,andTedNeward,allofwhom
provided various amounts of both.
I keep telling my family that one day I’ll write a book they’d like
to read. At least this one has an interesting cover. Lisa, Zoe, and
Gabe: thanks for putting up with my office hours.
ACKNOWLEDGMENTS viii
From Ben Galbraith
Thank you to my family, for all your patience while I spent late
nights and early mornings working on this project. I love you.
My sinceregratitudealsogoestomypublisher Dave Thomas(who
patiently and gracefully watched this project go from early arrival
to, well, somewhat less than early arrival) and my fellow authors,
Justin Gehtland and Dion Almaer, who made many personal sac-
rifices to get across the finish line.
Finally, I thank all of my peers and colleagues who have taught
me throughout the years. The patience and kindness of nearly
everyone in our industry has always been an inspiration to me.
From Dion Almaer
Ah, acknowledgments. Thisisthemoment whereyoufeel likeyou
are at the podium and don’t want to forget anyone.
Firstly, I would like to thank my fellow Ajaxians: Ben Galbraith,
Justin Gehtland, StuHalloway, Rob Sanheim,Michael Mahemoff,
and the entire community that visits and contributes to ajax-
ian.com. This book is really for you, the readers.
Secondly, Iwould liketothankallof thegreattechnicalfolkwhoI
havehadthepleasureofworkingwith. Thisincludesbuddiesfrom
Adigio, the No Fluff Just Stuff tour, and the general blogosphere.
You know who you are.
Finally,Iwould liketothankmy family,especially mywife,Emily,
who lets me work crazy hours without putting me through guilt
trips. You are my best friend, Em.
Chapter 1
Building Rich Internet
Applications with Ajax
This is a book about developing effective web applications. We’re not
going to dance around this issue. Underneath everything else, this
book is about XHTML, JavaScript, CSS, and standards that have been
around for almost a decade now. Not only do we admit this truth, we
embraceit. Justbecausethesestandardshavebeenaroundforawhile
doesn’t mean we can’t build something new and exciting out of them.
Technology,likeJello,takesawhiletosolidifyintosomethingtastyand
satisfying.
Ajax(andWeb2.0)representsthematurationofInternetstandardsinto
a viable application development platform. The combination of stable
standards, better understanding, and a unifying vision amount to a
wholethatisgreater,by far,thanthesumof itsparts. WithAjax, you’ll
be able to achieve the double Holy Grail: feature-filled user interfaces
and a no-hassle, no-install deployment story.
Itwasn’tlongagothatJesseJamesGarrettcoinedthetermAjax. When
he first released the term onto the public consciousness, it stood for
Asynchronous JavaScript And XML. It has since, like SOAP before it,
lostitsacronymstatusandisjustaword. However,itisanenormously
powerfulword. Withthissingleword,JesseJameswasabletoharness
an industry-wide trendtowardricher, install-freeweb applications and
give it focus.
Naming a thing is powerful. In this case, it’s not powerful enough to
become a movement, though. A spark was still lacking. It was to be
A TALE IN THREE ACTS 2
provided by an entirely unlikely entity. What follows is the story of
one development team, that spark, and how it changed the way we
approach web software.
1.1 A Tale in Three Acts
Hector is a project manager for a web application development shop.
With a long history of Perl, CGI, ASP, Servlet, and JSP development
under his belt, Hector’s been around the block. For the last year his
teamhasbeenbuildingaCRMapplicationforalargeFortune500com-
panywithoffices allover theworld. Theapplication usedtobeagreen-
screenmainframeapplication; thecompany wantstotakeadvantageof
the great reach of the Internet to deploy the application to every office.
Hector and his team focus a lot of their energy on the server side of
the application. They have been using one of the modern MVC frame-
works from the Java community to implement the business logic, a
high-performance persistence framework to access the database, and
messaging-based infrastructureto connect to other existing systems.
Yesterday
On the client side, Hector and his team have become masters of CSS.
The look of the pages bends to their will; when the customer wants
rounded corners, they get rounded corners. Rollover colors? That’s
easy. Multiplecolorschemes? Noproblem. Infact,Hectorandhisteam
long ago reached a point where they weren’t really worried about the
userinterface. See,theWeboperatesoneway: itessentiallydistributes
static documents. When users want more data, they incur a complete
interfacerefresh. It isn’t optimal froman efficiency perspective, but it’s
how the Web works, and users have just learned to live with it.
Then, sometime a couple of weeks ago, Hector’s customer came to a
meeting. Thecustomer wasusually apolite, accommodating fellow. He
understood the Web, and he understood the restrictions he had to live
withtogetthereachoftheInternet. Infact,Hectorhadneverseenhim
get really angry. Until this meeting.
Assoon as hewalked in,theteamknew something wasup. He hadhis
laptop with him, and he never carried it. As he stormed into the room,
the team glanced around the table: what have we done? The customer
sat down at the table, fired up the laptop, and hammered away at the
keyboard for a minute. While he pounded the keys, he told the team,