OReilly AJAX design patterns jun 2006 ISBN 0596101805

AjaxDesignPatterns
ByMichaelMahemoff
...............................................
Publisher:O'Reilly
PubDate:June2006
PrintISBN-10:0-596-10180-5
PrintISBN-13:978-0-59-610180-0
Pages:655

TableofContents|Index

Ajax,orAsynchronousJavaScriptandXML,explodedontothe
sceneinthespringof2005andremainsthehotteststoryamongweb
developers.Withitsrichcombinationoftechnologies,Ajaxprovidesa
strongfoundationforcreatinginteractivewebapplicationswithXMLor
JSON-basedwebservicesbyusingJavaScriptinthebrowsertoprocess
thewebserverresponse.

AjaxDesignPatternsshowsyoubest
practicesthatcandramaticallyimproveyourwebdevelopmentprojects.
Itinvestigateshowothershavesuccessfullydealtwithconflicting
designprinciplesinthepastandthenrelaysthatinformation
directlytoyou.

Thepatternsoutlinedinthebookfallintofour
categories:

Foundationaltechnology:Examinestherawtechnologies
requiredforAjaxdevelopment
Programming:Exposestechniquesthatdevelopershave
discoveredtoensuretheirAjaxapplicationsaremaintainable

Functionalityandusability:Describesthetypesofuser
interfacesyou'llcomeacrossinAjaxapplications,aswellasthenew
typesoffunctionalitythatAjaxmakespossible
Development:Explainstheprocessbeingusedtomonitor,


debug,andtestAjaxapplications

AjaxDesignPatternswillalsogetyouup
tospeedwithcoreAjaxtechnologies,suchasXMLHttpRequest,theDOM,andJSON.
Technicaldiscussionsarefollowedbycodeexamplessoyoucanseefor
yourselfjustwhatis-andisn't-possiblewithAjax.Thishandy
referencewillhelpyoutoproducehigh-qualityAjaxarchitectures,
streamlinewebapplicationperformance,andimprovetheuser
experience.

MichaelMahemoffholdsaPhDinComputer
ScienceandSoftwareEngineeringfromtheUniversityofMelbourne,wherehisthesis
was"DesignReuseinSoftwareEngineeringandHuman-Computer
Interaction."HelivesinLondonandconsultsonsoftwaredevelopment
issuesinbanking,healthcare,andlogistics.

"MichaelMahemoff'sAjaxDesignPatterns
isatrulycomprehensivecompendiumofweb
applicationdesignexpertise,centredaroundbutnotlimitedtoAjax
techniques.Polishednuggetsofdesignwisdomaresupported
bytutorialsandreal-worldcodeexamplesresultinginabookthat
servesnotonlyasanintermediatetoexperthandbookbutalsoasan
extensivereferenceforbuildingrichinteractivewebapplications."
--BrentAshley,remotescriptingpioneer

AjaxDesignPatterns
ByMichaelMahemoff
...............................................
Publisher:O'Reilly
PubDate:June2006
PrintISBN-10:0-596-10180-5
PrintISBN-13:978-0-59-610180-0
Pages:655

TableofContents|Index

Copyright
Preface
PartI:Introduction
Chapter1.IntroducingAjax
Section1.1.AjaxandtheUsableWeb
Section1.2.TheRiseofAjax
Section1.3.AjaxifyingtheWeb:TheStoryofPortals
Section1.4.WebifyingtheDesktop:TheStoryofOfficeApplications
Section1.5.CharacteristicsofAjaxApplications
Section1.6.TheAjaxTechnologies
Section1.7.AnatomyofaServerCall
Section1.8.AjaxTrends
Section1.9.Conclusions
Chapter2.APattern-LedTutorial
Section2.1.AjaxTechnologiesinaBlink
Section2.2.AjaxifyingaWebApp:OnePatternataTime
Section2.3.ProjectsandKatas
Section2.4.Conclusions
Chapter3.AjaxDesign:PrinciplesandPatterns
Section3.1.DesirableAttributesofAjaxApplications
Section3.2.DesigningforAjax
Section3.3.AjaxPatternsOverview
Section3.4.AnatomyofaPattern
Section3.5.AjaxPatternsDemos

Section3.6.Conclusions
PartII:FoundationalTechnologyPatterns
Chapter4.AjaxApp
Section4.1.AjaxApp
Chapter5.DisplayManipulation
Section5.1.DisplayMorphing
Section5.2.PageRearrangement
Chapter6.WebRemoting
Section6.1.WebService
Section6.2.XMLHttpRequestCall
Section6.3.IFrameCall
Section6.4.HTTPStreaming
Section6.5.On-DemandJavaScript
Chapter7.DynamicBehavior
Section7.1.UserAction
Section7.2.Scheduling

Chapter8.ExtendedTechnologies
Section8.1.RicherPlugin
PartIII:ProgrammingPatterns
Chapter9.WebServices
Section9.1.RESTfulService
Section9.2.RPCService
Section9.3.AjaxStub
Section9.4.HTMLMessage
Section9.5.Plain-TextMessage
Section9.6.XMLMessage
Section9.7.JSONMessage
Chapter10.Browser-ServerDialogue
Section10.1.CallTracking
Section10.2.PeriodicRefresh
Section10.3.SubmissionThrottling
Section10.4.ExplicitSubmission
Section10.5.DistributedEvents
Section10.6.Cross-DomainProxy
Chapter11.DOMPopulation
Section11.1.XMLDataIsland
Section11.2.Browser-SideXSLT
Section11.3.Browser-SideTemplating
Chapter12.CodeGenerationandReuse

Section12.1.Server-SideCodeGeneration
Section12.2.Cross-BrowserComponent
Chapter13.PerformanceOptimization
Section13.1.Browser-SideCache
Section13.2.PredictiveFetch
Section13.3.Guesstimate
Section13.4.Multi-StageDownload
Section13.5.FatClient
PartIV:FunctionalityandUsabilityPatterns
Chapter14.Widgets
Section14.1.Slider
Section14.2.ProgressIndicator
Section14.3.Drilldown
Section14.4.DataGrid
Section14.5.RichTextEditor
Section14.6.Suggestion

Section14.7.LiveSearch
Section14.8.LiveCommand-Line
Section14.9.LiveForm
Chapter15.PageArchitecture
Section15.1.Drag-And-Drop
Section15.2.Sprite
Section15.3.Popup
Section15.4.MalleableContent
Section15.5.Microlink
Section15.6.Portlet
Section15.7.StatusArea
Section15.8.UpdateControl
Section15.9.VirtualWorkspace
Chapter16.VisualEffects
Section16.1.One-SecondSpotlight
Section16.2.One-SecondMutation
Section16.3.One-SecondMotion
Section16.4.Highlight
Chapter17.Functionality
Section17.1.LazyRegistration
Section17.2.DirectLogin
Section17.3.Host-ProofHosting
Section17.4.Timeout

Section17.5.Heartbeat
Section17.6.UniqueURLs
PartV:DevelopmentPatterns
Chapter18.Diagnosis
Section18.1.Logging
Section18.2.Debugging
Section18.3.DOMInspection
Section18.4.TrafficSniffing
Chapter19.Testing
Section19.1.SimulationService
Section19.2.Browser-SideTest
Section19.3.ServiceTest
Section19.4.SystemTest
PartVI:Appendixes
AjaxFrameworksandLibraries
SectionA.1.JavaScriptMultipurposeFrameworks
SectionA.2.JavaScriptRemotingFrameworks
SectionA.3.JavaScriptEffectsFrameworks
SectionA.4.JavaScriptFlashFrameworks
SectionA.5.JavaScriptXMLFrameworks
SectionA.6.JavaScriptSpecializedFrameworks
SectionA.7.MultilanguageAjaxFrameworks
SectionA.8.C++AjaxFrameworks
SectionA.9.ColdFusionAjaxFrameworks
SectionA.10..NETAjaxFrameworks

SectionA.11.JavaAjaxFrameworks
SectionA.12.LispAjaxFrameworks
SectionA.13.PerlAjaxFrameworks
SectionA.14.PHPAjaxFrameworks
SectionA.15.PythonAjaxFrameworks
SectionA.16.RubyAjaxFrameworks
SettingUptheCodeExamples
PatternsandPatternLanguages
References
AbouttheAuthor
Colophon
Index


AjaxDesignPatterns
byMichaelMahemoff
Copyright©2006MichaelMahemoff.Allrightsreserved.
PrintedintheUnitedStatesofAmerica.
PublishedbyO'ReillyMedia,Inc.1005GravensteinHighway
North,Sebastopol,CA95472
O'Reillybooksmaybepurchasedforeducational,business,or
salespromotionaluse.Onlineeditionsarealsoavailablefor
mosttitles(safari.oreilly.com).Formoreinformation,contactour
corporate/institutionalsalesdepartment:(800)998-9938or

Editor:

SimonSt.Laurent

ProductionEditor:

MaryBrady

Copyeditors:

MaryBradyandLydiaOnofrei

Indexer:

JulieHawks

CoverDesigner:

MikeKohnke

InteriorDesigner:

MarciaFriedman

Illustrators:

RobertRomanoandJessamynRead

PrintingHistory:
June2006:

FirstEdition.


TheO'ReillylogoisaregisteredtrademarkofO'ReillyMedia,

Inc.AjaxDesignPatternsandrelatedtradedressare
trademarksofO'ReillyMedia,Inc.Manyofthedesignations
usedbymanufacturersandsellerstodistinguishtheirproducts
areclaimedastrademarks.Wherethosedesignationsappearin
thisbook,andO'ReillyMedia,Inc.wasawareofatrademark
claim,thedesignationshavebeenprintedincapsorinitialcaps.
Whileeveryprecautionhasbeentakeninthepreparationofthis
book,thepublisherandauthorassumenoresponsibilityfor
errorsoromissions,orfordamagesresultingfromtheuseof
theinformationcontainedherein.
ThisworkislicensedundertheCreativeCommonsLicense
Attribution2.0.ToviewacopyofthisLicense,visit
orsendaletterto
CreativeCommons,543HowardStreet,5thFloor,San
Francisco,California94105-3013,USA.
ISBN:0-596-10180-5
[M]




Preface
AJAXDESIGNPATTERNSISAREFERENCEFOR
DEVELOPERS,DESIGNERS,ANDMANAGERSWHOWANT
TOknowhowAjaxisbeingusedintherealworld.Ajaxisanew
labeltodescriberich,desktop-likeInternetapplicationsthatrun
instandardwebbrowsersanddonotrequireanyspecial
plugins.Itspopularitystemsfromhigh-profileAjaxapplications
likeGmail,GoogleMaps,and37signals'Basecamp,anditis
becomingpopularintheenterpriseaswell.

Thepatternsinthisbookfallintofourcategories.Foundational
Technologypatternsoverviewtherawtechnologiesrequiredfor
Ajaxdevelopment,suchastheXMLHttpRequestobject.
Programmingpatternsexposetechniquesdevelopershavebeen
discoveringtoensuretheirAjaxapplicationsaremaintainable
andperformant.FunctionalityandUsabilitypatternsareabout
thekindsofuser-interfacesyou'llcomeacrossinAjax
applicationsandthenewtypesoffunctionalitythatAjaxmakes
possible.Finally,Developmentpatternsexplaintheprocesses
beingusedtomonitor,debug,andtesttheirAjaxapplications.

WhoShouldReadThisBook?
Youshouldreadthisbookifyouwantto:
Learnwhat'spossibleandwhat'snotwithAjax,andseehow
Ajaxisbeingusedintherealworld.
GetuptospeedwithcoreAjaxtechnologiessuchas
XMLHttpRequest,theDOM,andJSON.
DiscoverthepatternsdevelopersareusingtoproducehighqualityAjaxarchitectures,streamlineperformance,and


improveusability.
Becauseofthereference-likenatureofthepatterns,thebookis
accessibletopeoplefromdifferentbackgrounds.Developers
whowanttorampuponAjaxwillbeabletobeginwiththe
tutorialchapterandthefoundationaltechnologies.Thosewho
alreadyhavesomeexperiencewithAjaxwillprobablygainthe
mostfromtheProgrammingandDevelopmentpatterns.People
inlesstechnicalroleswillbeabletotakeahigh-level
perspective,lookingespeciallyattheFunctionalityandUsability
patternsandtheReal-WorldExamplesthereintoseewhat's

possiblewithAjax.
Tofollowthetechnicaldiscussionandcodeexamples,
programmersshouldhavesomeexperiencewiththebasicsof
webdevelopmentHTML,formsubmission,server-sidescripting,
andsoon.Ideally,youshouldknowsomeJavaScripttoo,as
thisbookisn'tintendedtoteachyouthelanguage,butthe
writingdoestakeintoaccountthatmanyreaderswillonlyhave
basicfamiliaritywithJavaScript.
Ajaxismostlyaboutwhathappensinthebrowser,sothebook
doesn'tassumeyouknowanyparticularserver-side
environment.Onthoseoccasionswhereserver-sidecodeis
involved,theexamplesarePHP-basedandalwaysexplainedin
language-neutralterms.

WhoShouldNotReadThisBook?
Ifyouhaven'tperformedanywebdevelopmentwork,you're
probablybetterofflookingforanintroductiontothebasic
conceptsbeforejumpingintoAjaxandthesepatterns.
Ajaxdevelopmentinvolvesworkingwithabroadrangeof
technologies,includingHTML,XML,CSS,JavaScript,and
server-sidedevelopment.Thisbookwillhelpyouunderstand
howAjaxrelatestoeachoftheseandhowtheyareoften


combinedtogether,butifyou'relookingtolearnanyoneof
theseindepthoryou'reseekingareferenceonbrowser
specifics,I'drecommendconsultingaspecializedtext.

AbouttheExamples
Alltheexamplesinthisbookthetutorialcodeaswellasthe

AjaxPatternscodeexamplescanbedownloadedfrom
They'vebeendevelopedtobe
compatiblewithrecentversionsofFirefoxandInternetExplorer
(IE),andhavebeentestedonFirefox1.5andIE6.0.[*]Mostof
theserver-sidecoderequiresPHP5orlaterandwastestedon
PHP5.0.4.ThePHPcodeshouldrunonanystandardweb
servercapableofrunningPHPscripts;Apache1.3.33wasused
fortesting.TheWikiDemorequiresMySQLandwastestedon
version4.1.14-max.SeeAppendixBforinformationon
installingthedemos.
[*]Itwouldhavebeennicetoensurefullcompatibilityforallmajorbrowsers(e.g.,Safari,Opera),andthat's
certainlyadvisableforproductionsystems,butportabilitywasconsideredorthogonaltotheindividualdemos,
eachaimingtoexposeinformationaboutaparticularAjaxconcept.

BrowserSpecifics
TruetotheaimsofAjax,alloftheAjaxPatternsare
implementableinanymodern,standardbrowser,andthe
discussionsfocusmoreonissuesofgeneralarchitectureand
usabilityinsteadofbrowserspecifics.However,portability
issuesdoariseinsomecasesandareaddressedwheretheyare
criticaltoimplementingthepattern(asinsomeofthetopicsin
PartII,FoundationalTechnologyPatterns).Tomaintaina
high-levelfocus,mostofthesediscussionarestilllimitedtoIE
andFirefox;it'sbeyondthescopeofthepatternstooutlinethe
idiosyncraciesofeachbrowserandversion,forwhicha
specializedreferenceisadvisable.


OrganizationofThisBook

PartI,Introduction
Thefirstfewchaptersareapreludetothepatterns.
Chapter1,IntroducingAjax,overviewstheAjax
phenomenonanddiscussescurrenttrends.Chapter2,A
Pattern-LedTutorial,isaquick-starttutorialonAjaxand
theAjaxPatterns.ThedesignconceptsbehindtheAjax
PatternsarediscussedinChapter3,AjaxDesign:Principles
andPatterns,alongwithanintroductiontothepatterns
themselves.

PartII,FoundationalTechnologyPatterns
TheFoundationalTechnologypatternsoutlinethe"building
blocks"attheheartofanyAjaxapplication.Ajaxitselfisa
pattern,hencethefirstpattern,AjaxApp(Chapter4),
whichactsastherootforalltheAjaxPatterns.Thenext
fewchapterslookatthethreecoretechnologiesinvolvedin
creatinganAjaxApp.DisplayManipulation(Chapter5)
patternsareaboutrepaintingtheuserinterface,andWeb
Remoting(Chapter6)patternsdocumentseveral
alternativesforcommunicatingwiththeserver.The
DynamicBehavior(Chapter7)patternsareabout
eventsthosederivedbyusersandthosebasedontiming.
Finally,ExtendedTechnologies(Chapter8)explainhowyou
canextendanAjaxAppwithnonstandardtechnologies.

PartIII,ProgrammingPatterns
TheProgrammingpatternsfocusontechnicalqualitiesof


software,inparticularmaintainability,robustness,and

performance.Thefirstchapterinthispart,Chapter9,
providesseveralalternativestrategiesfordesigningWeb
Services.AlsorelatedtoWebRemoting,theBrowser-Server
Dialogue(Chapter10)patternslookattheflowof
informationbetweenbrowserandserver;e.g.,
synchronizationtechniques.TheDOMPopulation(Chapter
11)patternscoverseveralstrategiesforhandlingDOM
populationfollowingaserverresponse.CodeGeneration
andReuse(Chapter12)containsacoupleofgeneral
programmingpatternsformaintainabilityandportability.
Finally,thePerformanceOptimization(Chapter13)patterns
areaboutimprovingnotonlyspeedofupdatesand
communication,butalsooptimizingtheuserexperiencein
thefaceofinevitabledelays.

PartIV,FunctionalityandUsabilityPatterns
TheFunctionalityandUsabilitypatternsarefocusedon
usabilityofAjaxapplications.Chapter14introducesa
numberofwidgetsthatarebeingwovenintomanyAjax
interfaces.Ahigher-levelperspectiveistakenbythePage
Architecture(Chapter15)patterns,wherethefocusison
pagelayout,contentbreakdown,andtechniquesfor
exposingserver-sidecontent.WiththepopularityofAjax,
theWebisundergoingariseinvisualeffectssomewhat
unprecedentedonconventionaldesktopsystems,andthe
mostcommoneffectsaredescribedintheVisualEffects
(Chapter16)patterns.Thepatternsinthefinalchapterof
thispart,Functionality(Chapter17)patterns,areabout
newkindsoffunctionalitythatAjaxmakespossible.

PartV,DevelopmentPatterns


TheDevelopmentpatternsarenot"things"inthesame
senseasthepatternsinpreviouspatterns,but"processes"
youcanusetoaiddevelopment.DiagnosisPatterns
(Chapter18)helpswithtroubleshootingandmonitoringthe
healthofanAjaxApp.TestingPatterns(Chapter19)helps
withtestingatvariouslevelsandisbasedontheagile
practiceoftestingastheapplicationevolves.

PartVI,Appendixes
Therearefourappendixsections.AppendixA,thelargest
appendix,isalistingofAjax-relatedframeworksand
libraries,manyofwhichareagreataidinimplementing
someofthepatternsdescribedinthisbook.AppendixBisa
setofinstallationnotesforthecodeexamples.AppendixC
placestheworkhereinthecontextofgeneraldesign
patterntheory.Finally,AppendixDliststextsreferenced
throughoutthebook.

ConventionsUsedinThisBook

Italics
Usedfornamesofpatterns

Constantwidth
Usedforcodeexamplesandfragments

Constantwidthbold

Usedforimportantorsignificantlinesofcode
Theterm"thebrowser"isshorthandfortheentiresystemat
thebrowserendnotonlythebrowserapplication(e.g.,Firefox),
butalsothewebapplicationrunninginsideit(e.g.,Google
Maps).WhenI'mtalkingaboutthebrowserapplication,I'll
usuallycallita"webbrowser"it'sfairlyobviousfromthecontext
anyway.Likewise,"theserver"or"theserverside"refersto
everythingontheservertheoperatingsystem(e.g.,Linux),the
webserver(e.g.,Apache),aswellastheapplication-specific
scriptsrunningwithin.
Theterms"ECMAScript"and"JScript"don'tappear"JavaScript"
ismeanttocovertheseterms.
Theterm"class"isusedtodescribeJavaScriptfunctionsthat
areusedinamannersimilartoclassesinobject-oriented
systems.
Thefirstfigurethatappearsineachpattern'ssectionisan
illustratedoverviewofthatparticularpattern.
Somecommonacronymsusedthroughoutthebookare:
CSS:CascadingStyleSheets
DHTML:DynamicHTML
DOM:DocumentObjectModel
HTML:HypertextMarkupLanguage
IE:MicrosoftInternetExplorer
XML:eXtensibleMarkupLanguage


ConventionsinCodeExamples
DesigndiagramsarebasedonUniversalModellingLanguage

(UML)notation,thoughlessformalinmostcases.
Inthecodeexamples,a.phtmlsuffixisusedforPHPfilesthat
outputHTML;allotherPHPfiles(suchasbusinesslogic
modules)endin.php.
AsillustratedinChapter2,$()isaliasedto
document.getElementById()toreducecodeclutter(inspiredbythe
prototypelibrarysee />Somecodeexampleshavebeenreformattedforthesakeof
clarify.

Safari®Enabled

WhenyouseeaSafari®Enabledicononthecoverof
yourfavoritetechnologybook,thatmeansthebookisavailable
onlinethroughtheO'ReillyNetworkSafariBookshelf.
Safarioffersasolutionthat'sbetterthane-books.It'savirtual
librarythatletsyoueasilysearchthousandsoftoptechbooks,
cutandpastecodesamples,downloadchapters,andfindquick
answerswhenyouneedthemostaccurate,currentinformation.
Tryitforfreeat.

HowtoContactUs
Pleaseaddresscommentsandquestionsconcerningthisbookto
thepublisher:
O'ReillyMedia,Inc.


1005GravensteinHighwayNorth
Sebastopol,CA95472
800-998-9938(intheUnitedStatesorCanada)
707-829-0515(internationalorlocal)

707-829-0104(fax)
Wehaveawebpageforthisbook,wherewelisterrata,
examples,andanyadditionalinformation.Youcanaccessthis
pageat:
/>There'salsowebpageforthisbook,containingfulldrafttextfor
allpatternsandlinkstoanincreasingcollectionofaudio
podcastsaboutthepatterns.Inaddition,you'llfindinformation
onvariousAjaxresourcesanderrataforthisbook.Theweb
pageislocatedat:

Tocommentorasktechnicalquestionsaboutthisbook,send
emailto:

Formoreinformationaboutourbooks,conferences,Resource
Centers,andtheO'ReillyNetwork,seeourwebsiteat:


Acknowledgments


WritingthisbookonlinemeansIreceivedlotsofexcellent
feedbackthroughouttheprocessandhavemanypeopleto
thank.Whichisanotherwayofsayingit'shighlyprobableI'll
leavesomeoneout!Ifthat'sthecase,pleasemailmeany
corrections.
Myeditor,SimonSt.Laurent,hasalwaysbeenquicktorespond
tomyqueriesanddealtadmirablywithabookbeingwrittenin
asomewhatunusualmanner.ThanksalsotoproofreaderMary
Bradyforleavingnostoneunturned,andillustratorRob
Romanoforhelpingtomakethecontentaccessibleataglance.

IalsowanttoexpressmyappreciationtoO'Reillyfortakingon
theAjaxPatternsandespeciallyforlettingmewritethebook
online,andblogandpodcastaboutthecontentwithout
restriction.
ThebookgrewfromablogpostonAjaxPatterns
(anditwastheinsightof
ThomasBaekdaltocoverAjaxusabilityprinciplesthatinspired
totheinitialpatternspost
(IalsohaveBrentAshleytothankforhisdiscussing
thepatternsattheinitialAjaxsummitandinhisblog,
apparentlythetriggerfortheinitialrippleofonlineinterestin
theproject.Theideasinthisbookalsooweagreatdealto
Jesse-JamesGarrettandhisseminalAjaxarticle,withoutwhich
youwouldnotbereadingthesewords.
Allthebookreviewersprovidedvaluablefeedbackontheonline
versionthroughoutthewritingprocessaswellasofferingmany
detailedcommentsonthebook'sdraftversion.Thereviewers
were:CameronShorter(ADILimited,Mapbuilder)andKevin
Vinsen(ADILimited),whoseemployer,ADILimited,provided
timeforthembothtoconductthereview;JepCastelein
(Backbase),DanielCzarnecki(ZoltakConsulting),TonyHill
(ThomsonCorporation),andAlexKirk(Blummy.com,
WizLite.com).Inaddition,abigthankstomembersofthe
SoftwareArchitectureGroup(SAG)attheUniversityofIllinois


atUrbana-Champaignforconductingseveralrichdiscussionson
thepatternsandmakingtheaudiopubliclyavailable
( />commentscertainlymadeadifferenceastheeditingmovedinto
itsfinalstages.RalphJohnson,wholeadsthegroup,nominated

theAjaxPatternsforreview,andBrianFootekeptmeinformed
throughouttheprocess.I'malsogratefultoeveryonewho
addedtothepublicportionsoftheAjaxPatterns.orgwikiand
offeredfeedbackontheonlinedraftviaemail,blogcomments,
andinwikidiscussions.
Asthepatternswerediscoveredfrommanyexisting
applications,Iwouldliketothankthecreatorsofallthe
examplesfeaturedinthepatterndescriptions,manyofthem
truepioneers.Specialthankstothosedeveloperswhoexplained
aspectsoftheirdesignstome:KevinArthur(Stream),Richard
CowinandBillScott(OpenRico),DonovanPreston(LivePage),
JeremyRuston(TiddlyWiki),andTino"Crisp"Zijdel(DHTML
Lemmings).Thepatternsarealsobasedonnumerouswritings,
codedissections,ideas,proofs-of-concept,anddirect
suggestions.Inparticular,anumberofpatternsareonlyhere
becauseofthecontributionsofthefollowingauthorsand
developers(alsomentionedinindividualpatterndescriptions):
JulienCouvreur,JamesDam,AbeFettig(Twisted,Jotspot),
ChrisJustus,ChristopherKruslicky,AlexRussell(Dojo,Jotspot),
RichardSchwartz,MikeStenhouse,JoelWebber,andChris
Were.Inaddition,therewereseveralnews-focusedservices
thatmadeitaloteasiertolocateallthiscontentasithappened
(andalsohelpedotherpeoplefindAjaxPatterns.org!).Among
theseresources:NinerNiner'sAjaxBlog.com,ChrisCornutt's
AjaxDeveloper.org(ChrisisnowwithAjaxian.com),Dion
Almaer,BenGalbraith,andRobSanheimatAjaxian.com
(disclaimer:I'vesincejoinedtheAjaxianteam),Shane
Witbeck'sAjaxMatters.com,MikePapageorge's
FiftyFourEleven.com,BrianBenzinger'sSolutionWatch.com,and
MikeArrington'sTechcrunch.com.

Lastbutnotleast,heapsofgratitudetomyfamilyfortheir
supportthroughoutthewritingprocess.




PartI:Introduction
Thefirstfewchaptersareapreludetothepatterns.
Chapter1overviewstheAjaxphenomenonand
discussescurrenttrends.Chapter2isatutorialonAjax
andtheAjaxPatterns.Thedesignconceptsbehindthe
AjaxPatternsarediscussedinChapter3,alongwithan
introductiontothepatternsthemselves.
Chapter1:IntroducingAjax
Chapter2:APattern-LedTutorial
Chapter3:AjaxDesign:PrinciplesandPatterns


Chapter1.IntroducingAjax
BYNOW,YOU'VEPROBABLYUSEDAJAXONSITESLIKE
GOOGLEMAPS(HTTP://MAPS.GOOGLE.COM)Amazon'sA9
searchengine(),andFlickr().
Despitetheirdifferentdomains,allthesewebsitesmakeheavy
useofAjax.Thetechnologyletsthemtakeagreatleapforth
towardstherichnessofstandarddesktopapplications,andina
mannerwhichstillrespectstheestablishedconventionsofthe
Web.

1.1.AjaxandtheUsableWeb
Nolongerareyouforcedtowaitfivesecondsawebpageto
reloadeverytimeyouclickonsomething.Ajaxapplications
changeinreal-time.Theyletyoudragboxesaroundinsteadof
clickingonarrowsandtypinginnumbers.Theykeeppage
contentfreshinsteadofforcingyoutokeephittingRefresh.
Theyshowmeaningfulanimationsinsteadofverbosemessages.
Attheheartofallthisisagrowingemphasisonwebusability.[*]
Perhapsyou'veheardthestoryofthedancingbeareveryone's
impressedwithiteventhoughitsskillsquitefranklywouldn't
getthebearintoadanceacademy;[*]itmakesanimpression
becauseitcandanceandnotbecauseofhowwellitwell
dances.TheWebfeltlikethatatfirst.Suddenlyyoucouldread
newsfromtheothersideoftheworld,findhintsonsome
obscuregame,purchaseararebook.Allvaluableactivities,
regardlessofhoweasyordifficulttoperformthem.Usability?
Wedon'tneednostinkin'usability!
[*]SeeThomasBaekdal's"TheUsabilityRevolutionisOverWeWon!"
( />
[*]ThedancingbearstoryisusedthroughoutTheInmatesAreRunningtheAsylum(Cooper,1999),abook
decryingtheobsessionwitheverythingthat's"cool"attheexpensiveoftrueusability.

Here'swhathappened:peoplediscoveredthatanycoderand
hisdogcanbuildthebasicfunctionality(andyoudon'talways
needthecoder);amidtherushofB2Bcompanieshyping
multimilliondollarauctionsystems,IrecalloneCTObragging
thathissummerstudentscreatedthesamethingforafew
thousandbucks.Soifcompaniesinasaturatedmarketcan't
competeonrawfunctionality,whatcantheycompeteon?The

thingsthatmattertousers.Mostofthecompaniesthathave
survivedandprosperedcompanieslikeGoogle,Amazon,and
Yahoo!avoidedfeaturebloatandpromotedsimple,thoughnot


dumbed-down,interfaces.It'snocoincidencethateachofthese
companieshavebeenbusyincorporatingAjaxfeaturestothat
end.EachofthesemonsterdotcomsnotonlyusesAjax,but
hasactuallypioneeredsomeoftheconceptsdescribedinthis
book.YoucanthrowMicrosoftintothatlistaswell.
Inaddition,awholenewgenerationofcompanieshasrisenon
thestrengthoftheirsimple,intuitiveapplications.37signalshas
asuiteoftightlyfocusedapplicationsuseddailybyapassionate
userbase.Withaninnovativephoto-sharinginterface,Flickr
builtacommunityof1millionphoto-sharingusersinaround18
months.[ ]AnotherrecententrantisOdeo,apodcastmanager
thatworksasaneasy-to-usewebapplicationratherthan
runninginthedesktoplikemostofthecompetition.Liketheir
giantcounterparts,thesenewcomersarebigproponentsofAjax
andhavehelpeddefinetheconceptsbehindmanyoftheAjax
Patternsfeaturedinthisbook.
[ ]TheFlickrestimateisbasedonaprojectionfromaJune2005article(thatcitestheuserbaseas775,000andgrowingat30percentpermonth,leadingto
overamillionusersinJuneorJuly.ThecompanylaunchedinFebruary2004
(andwassoonacquiredbyYahoo!.

AndthenthereareallthesystemsyouandIwillneversee
firsthand:thescoresofwebapplicationssittingonclosed
intranets.Likethedotcoms,thereremainplentyofdancing
bearsinthiscategorytoo.Companieswelcomedinternalweb
apps,butmostlyfortechnicalreasons,suchaseasy

deployment,monitoring,andremoteaccessandalsobecauseit
seemedlikethe"cool"thingtodo.Usabilitywasrarelythe
drivingfactor.Justaskauserwho'swonderingwhereher
keyboardshortcutshavegoneinthe"new,improved"web
interface.Irecallonewebmigrationthatincreasedanaverage
customertransactionfrom20secondsto2minutes!One
reactionhasbeentothrowinthetowelandretreatbacktothe
desktop.Butmanycompanieshavechosentopersistwiththe
Web,acceptingtheidionsyncraciesandusingwhatever
workaroundsarenecessarytogetthebenefitsofaweb


platformwithouttheusualproblems.It'sthisspiritthathasled
toAjaxfeaturesevolvingintheenterprise,andthepopularityof
Ajaxcontinuestofuelprogress.Whilemanyusageswillremain
hidden,oneopenexamplewedohaveisworkperformed
internallyattheSabretravelcompany,whichledtotheopen
sourceOpenRicolibrary
( />