[PDF] Mastering Ajax Part 1: Introduction to Ajax

View - Download Mastering Ajax Part 1: Introduction to Ajax

Previous PDF

Next PDF

MasteringAjax, Part1:Introductionto Ajax

UnderstandingAjax, aproductiveapproach tobuildingWeb sites,and howitworks

SkillLevel: Introductory

BrettMcLaughlin (brett@newInstance.com)

Authorand Editor

O'ReillyMedia Inc.

06Dec 2005

Ajax,which consistsofHTML, JavaScript™technology,DHTML, andDOM,is an outstandingapproach thathelpsyou transformclunkyWeb interfacesintointeractive Ajaxapplications. Theauthor,an Ajaxexpert,demonstrates howthesetechnologies worktogether --froman overviewtoa detailedlook-- tomakeextremely efficient Webdevelopment aneasyreality. Healsounveils thecentralconcepts ofAjax, includingthe XMLHttpRequestobject. Fiveyears ago,ifyou didn'tknowXML, youwerethe uglyducklingwhom nobody talkedto. Eighteenmonthsago, Rubycameinto thelimelightand programmerswho didn'tknow whatwasgoing onwithRuby weren'twelcomeat thewatercooler. Today,if youwantto getintothe latesttechnologyrage, Ajaxiswhere it'sat. However,Ajax isfarmore thanjustafad; it'sapowerful approachtobuilding Web sitesand it'snotnearly ashardto learnasan entirenewlanguage. BeforeI digintowhat Ajaxis,though, let'sspendjust afewmoments understanding whatAjax does.When youwritean applicationtoday,you havetwobasic choices: •Desktop applications •Web applications Theseare bothfamiliar;desktop applicationsusuallycome onaCD (orsometimes aredownloaded fromaWeb site)andinstall completelyonyour computer.They

Introductionto Ajax

©Copyright IBMCorporation1994, 2008.Allrights reserved.Page1 of14 mightuse theInternetto downloadupdates,but thecodethat runsthese applicationsresides onyourdesktop. Webapplications-- andthere'sno surprise here-- runona Webserversomewhere andyouaccess theapplicationwith your

Webbrowser.

Moreimportant thanwherethe codeforthese applicationsruns,though, ishowthe applicationsbehave andhowyou interactwiththem. Desktopapplicationsare usuallypretty fast(they'rerunning onyourcomputer; you'renotwaiting onan Internetconnection), havegreatuser interfaces(usuallyinteracting withyour operatingsystem), andareincredibly dynamic.Youcan click,point,type, pullup menusand sub-menus,andcruise around,withalmost nowaitingaround. Onthe otherhand,Web applicationsareusually up-to-the-secondcurrentand they provideservices youcouldnever getonyour desktop(thinkabout Amazon.comand eBay).However, withthepower oftheWeb comeswaiting-- waitingfora serverto respond,waiting forascreen torefresh,waiting forarequest tocomeback and generatea newpage. Obviouslythis isabit ofanoversimplification, butyouget thebasicidea. Asyou mightalready besuspecting,Ajax attemptstobridge thegapbetween the functionalityand interactivityofa desktopapplicationand thealways-updatedWeb application.You canusedynamic userinterfacesand fanciercontrolslike you'dfind ona desktopapplication,but it'savailableto youona Webapplication. Sowhat areyouwaiting for?Startlooking atAjaxand howtoturn yourclunkyWeb interfacesinto responsiveAjaxapplications.

Oldtechnology, newtricks

Whenit comestoAjax, therealityis thatitinvolves alotof technologies--to get beyondthe basics,youneed todrilldown intoseveraldifferent technologies(which iswhy I'llspendthe firstseveralarticles inthisseries breakingaparteach oneof them).The goodnewsis thatyoumight alreadyknowa decentbitabout manyof thesetechnologies --betteryet, mostofthese individualtechnologiesare easyto learn-- certainlynotas difficultasan entireprogramminglanguage likeJavaor Ruby.

Ajaxdefined

Bythe way,Ajaxis shorthandforAsynchronous JavaScriptand XML(and DHTML,andso on).Thephrase wascoinedby Jesse JamesGarrett ofAdaptivePath (seetheResourcessection)and is, accordingto Jesse,notmeantto beanacronym. Hereare thebasictechnologies involvedinAjax applications: developerWorks®ibm.com/developerWorks

Introductionto Ajax

Page2 of14©Copyright IBMCorporation1994, 2008.Allrights reserved. •HTML isusedto buildWebforms andidentifyfields forusein therestof yourapplication. •JavaScript codeisthe corecoderunning Ajaxapplicationsand ithelps facilitatecommunication withserverapplications. •DHTML, orDynamicHTML, helpsyouupdate yourformsdynamically. You'lluse div,span,and otherdynamicHTML elementstomark upyour HTML. •DOM, theDocumentObject Model,willbe used(throughJavaScript code)to workwithboth thestructureof yourHTMLand (insomecases)

XMLreturned fromtheserver.

Let'sbreak thesedownand getabetter ideaofwhat eachdoes.I'll delveintoeach ofthese moreinfuture articles;fornow focusonbecoming familiarwiththese componentsand technologies.Themore familiaryouare withthiscode, theeasierit willbe tomovefrom casualknowledgeabout thesetechnologiesto masteringeach (andreally blowingthedoors offofyour Webapplicationdevelopment).

TheXMLHttpRequest object

Thefirst objectyouwant tounderstandis probablytheone that'snewestto you;it's calledXMLHttpRequest.This isaJavaScript objectandis createdassimply as shownin Listing1 .

Listing1. Createanew XMLHttpRequestobject

varxmlHttp =newXMLHttpRequest(); I'lltalk moreaboutthis objectinthe nextarticle,but fornowrealize thatthisis the objectthat handlesallyour servercommunication.Before yougoforward, stopand thinkabout that--it's theJavaScripttechnologythrough theXMLHttpRequest objectthat talkstothe server.That'snot thenormalapplication flowandit's where

Ajaxgets muchofits magic.

Ina normalWebapplication, usersfillout formfieldsand clickaSubmitbutton. Then,the entireformis senttothe server,theserver passesonprocessing toa script(usually PHPorJava ormaybea CGIprocessor somethingsimilar),and whenthe scriptisdone, itsendsback acompletelynew page.Thatpage mightbe HTMLwith anewform withsomedata filledinor itmightbe aconfirmationor perhapsa pagewithcertain optionsselectedbased ondataentered intheoriginal form.Of course,whilethe scriptorprogram ontheserver isprocessingand returninga newform,users havetowait. Theirscreenwill goblankand thenbe redrawnas datacomesback fromtheserver. Thisiswhere lowinteractivitycomes ibm.com/developerWorksdeveloperWorks®

Introductionto Ajax

©Copyright IBMCorporation1994, 2008.Allrights reserved.Page3 of14 intoplay --usersdon't getinstantfeedback andtheycertainly don'tfeellike they're workingon adesktopapplication. Ajaxessentially putsJavaScripttechnology andtheXMLHttpRequestobject betweenyourWeb formandthe server.Whenusers filloutforms, thatdatais sent tosome JavaScriptcodeand notdirectlyto theserver.Instead, theJavaScriptcode grabsthe formdataand sendsarequest totheserver. Whilethisis happening,the formon theusersscreen doesn'tflash,blink, disappear,orstall. Inotherwords, the JavaScriptcode sendstherequest behindthescenes; theuserdoesn't evenrealize thatthe requestisbeing made.Evenbetter, therequestis sentasynchronously, whichmeans thatyourJavaScript code(andthe user)doesn'twait aroundonthe serverto respond.Sousers cancontinueentering data,scrollingaround, andusing theapplication. Then,the serversendsdata backtoyour JavaScriptcode(still standinginfor the Webform) whichdecideswhat todowith thatdata.It canupdateform fieldsonthe fly,giving thatimmediatefeeling toyourapplication --usersare gettingnewdata withouttheir formbeingsubmitted orrefreshed.The JavaScriptcodecould evenget thedata, performsomecalculations, andsendanother request,allwithout user intervention!This isthepower ofXMLHttpRequest.It cantalkback andforthwith a serverall itwants,without theuserever knowingaboutwhat's reallygoingon. The resultis adynamic,responsive, highly-interactiveexperiencelike adesktop application,but withallthe powerofthe Internetbehindit.

Addingin someJavaScript

Onceyou getahandle onXMLHttpRequest,the restofyour JavaScriptcodeturns outto beprettymundane. Infact,you'll useJavaScriptcode forjusta fewbasic tasks: •Get formdata:JavaScript codemakesit simpletopull dataoutof your

HTMLform andsendit totheserver.

•Change valuesonthe form:It'salso simpletoupdate aform,from setting fieldvalues toreplacingimages onthefly. •Parse HTMLandXML: You'lluseJavaScript codetomanipulate theDOM (seethe nextsection )and toworkwith thestructureof yourHTMLform andany XMLdatathat theserverreturns. Forthose firsttwoitems, youwantto beveryfamiliar withthegetElementById() methodas showninListing2 . Listing2. Grabandset fieldvalueswith JavaScriptcode

//Get thevalueof the"phone"field andstuffit inavariable calledphonevarphone =document.getElementById("phone").value;

developerWorks®ibm.com/developerWorks

Introductionto Ajax

Page4 of14©Copyright IBMCorporation1994, 2008.Allrights reserved.

//Set somevalueson aformusing anarraycalled responsedocument.getElementById("order").value= response[0];document.getElementById("address").value= response[1];

There'snothing particularlyremarkablehere andthat'sgood! Youshouldstart to realizethat there'snothingtremendously complicatedaboutthis. Onceyoumaster XMLHttpRequest,much oftherest ofyourAjax applicationwillbe simple JavaScriptcode likethatshown inListing2 ,mixed inwitha bitofclever HTML. Then,every onceina while,there'sa littleDOMwork...so let'slookat that.

Finishingoff withtheDOM

Lastbut notleast,there's theDOM,the DocumentObjectModel. Forsomeof you, hearingabout theDOMis goingtobe alittleintimidating --it'snot oftenusedby HTMLdesigners andiseven somewhatunusualfor JavaScriptcodersunless you're reallyinto somehigh-endprogramming tasks.Whereyou willfindthe DOMinuse a lotis inheavy-dutyJava andC/C++programs; infact,that's probablywherethe DOMgot abitof itsreputationfor beingdifficultor hardtolearn. Fortunately,using theDOMin JavaScripttechnologyis easy,andis mostlyintuitive. Atthis point,I'dnormally showyouhow tousethe DOMorat leastgiveyou afew codeexamples, buteventhat wouldbemisleading. Yousee,you cangetpretty far intoAjax withouthavingto messwiththe DOMandthat's thepathI'm goingtoshow you.I'll comebackto theDOMin afuturearticle, butfornow, justknowthat it'sout there.When youstartto sendXMLback andforthbetween yourJavaScriptcode andthe serverandreally changetheHTML form,you'lldig backintoDOM. Fornow, it'seasy togetsome effectiveAjaxgoing withoutit,so putthison theback-burnerfor now.

Gettinga Requestobject

Witha basicoverviewunder yourbelt,you're readytolook atafew specifics.Since XMLHttpRequestiscentral toAjaxapplications --andprobably newtomany of you-- I'llstartthere. Asyousaw inListing1 ,it shouldbepretty easytocreate this objectand useit,right? Waitaminute. Rememberthose peskybrowserwars fromafew yearsbackand hownothing workedthe sameacrossbrowsers? Well,believeit ornot,those warsarestill going onalbeit onamuch smallerscale.And, surprise:XMLHttpRequestisone ofthe victimsof thiswar.So you'llneedto doafew differentthingsto getan XMLHttpRequestobjectgoing. I'lltakeyour throughitstep bystep.

Workingwith Microsoftbrowsers

Microsoft'sbrowser, InternetExplorer,uses theMSXMLparser forhandlingXML ibm.com/developerWorksdeveloperWorks®

Introductionto Ajax

©Copyright IBMCorporation1994, 2008.Allrights reserved.Page5 of14 (youcan findoutmore aboutMSXMLin Resources).So whenyouwrite Ajax applicationsthat needtowork onInternetExplorer, youneedto createtheobject in aparticular way. However,it's notthateasy. MSXMLactuallyhas twodifferentversions floating arounddepending ontheversion ofJavaScripttechnology installedinInternet Explorer,so you'vegotto writecodethat handlesbothcases. LookatListing3 for thecode thatyouneed tocreatean XMLHttpRequestonMicrosoft browsers. Listing3. CreateanXMLHttpRequest objectonMicrosoft browsers

varxmlHttp =false;try{ xmlHttp= newActiveXObject("Msxml2.XMLHTTP");}catch (e){try{ xmlHttp= newActiveXObject("Microsoft.XMLHTTP");}catch (e2){xmlHttp= false;}}

Allof thiswon'tmake exactsenseyet, butthat'sOK. You'lldiginto JavaScript programming,error handling,conditionalcompilation, andmorebefore thisseriesis finished.For now,youwant togettwo corelinesinto yourhead: xmlHttp= newActiveXObject("Msxml2.XMLHTTP"); and xmlHttp= newActiveXObject("Microsoft.XMLHTTP");. Ina nutshell,thiscode triestocreate theobjectusing oneversionof MSXML;ifthat fails,it thencreatesthe objectusingthe otherversion.Nice, huh?Ifneither ofthese work,the xmlHttpvariableis settofalse, totellyour codeknowthat something hasn'tworked. Ifthat'sthe case,you'veprobably gotanon-Microsoft browserand needto usedifferentcode todothe job.

Dealingwith Mozillaandnon-Microsoft browsers

IfInternet Explorerisn'tyour browserofchoice oryouwrite codefornon-Microsoft browsers,then youneeddifferent code.Infact, thisisthe reallysimpleline ofcode yousaw backinListing1 : varxmlHttp =newXMLHttpRequest object;. Thismuch simplerlinecreates anXMLHttpRequestobjectin Mozilla,Firefox, Safari,Opera, andprettymuch everyothernon-Microsoft browserthatsupports Ajax inany formorfashion. developerWorks®ibm.com/developerWorks

Introductionto Ajax

Page6 of14©Copyright IBMCorporation1994, 2008.Allrights reserved.

Puttingit together

Thekey istosupport allbrowsers.Who wantstowrite anapplicationthat worksjust onInternet Exploreroran applicationthatworks justonnon-Microsoft browsers? Worseyet, doyouwant towriteyour applicationtwice?Of coursenot!So yourcode combinessupport forbothInternet Explorerandnon-Microsoftbrowsers. Listing4 showsthe codetodo justthat. Listing4. CreateanXMLHttpRequest objectthemulti-browser way

/*Create anewXMLHttpRequest objecttotalk totheWeb server*/varxmlHttp =false;/*@cc_on@*/ /*@if(@_jscript_version >=5)try{ xmlHttp= newActiveXObject("Msxml2.XMLHTTP");}catch (e){try{ xmlHttp= newActiveXObject("Microsoft.XMLHTTP");}catch (e2){xmlHttp= false;}}@end@*/

if(!xmlHttp &&typeofXMLHttpRequest !='undefined'){ xmlHttp= newXMLHttpRequest();} Fornow, ignorethecommenting andweirdtags like@cc_on;those arespecial JavaScriptcompiler commandsthatyou'll exploreindepth inmynext article,which willfocus exclusivelyonXMLHttpRequest.The coreofthis codebreaksdown into threesteps:

1.Create avariable,xmlHttp,to referencetheXMLHttpRequestobject

thatyou willcreate.

2.Try andcreatethe objectinMicrosoft browsers:

•Try andcreatethe objectusingthe Msxml2.XMLHTTPobject. •If thatfails,try andcreatethe objectusingthe Microsoft.XMLHTTP object.

3.If xmlHttpstillisn't setup,create theobjectin anon-Microsoftway.

Atthe endofthis process,xmlHttpshouldreference avalidXMLHttpRequest object,no matterwhatbrowser yourusersrun.

Aword onsecurity

ibm.com/developerWorksdeveloperWorks®

Introductionto Ajax

©Copyright IBMCorporation1994, 2008.Allrights reserved.Page7 of14 Whatabout security?Today'sbrowsers offerusersthe abilitytocrank theirsecurity levelsup, toturnoff JavaScripttechnology,and disableanynumber ofoptionsin theirbrowser. Inthesecases, yourcodeprobably won'tworkunder any circumstances.For thesesituations,you'll havetohandle problemsgracefully-- that'sat leastonearticle initself,one Iwilltackle later(it'sgoing tobea longseries, isn'tit? Don'tworry;you'll masterallof thisbeforeyou're through).Fornow, you're writingrobust, butnotperfect, code,whichis greatforgetting ahandleon Ajax.

You'llcome backtothe finerdetails.

Request/Responsein anAjaxworld

Soyou nowunderstandAjax andhavea basicideaabout theXMLHttpRequest objectand howtocreate it.Ifyou've readclosely,you evenrealizethat it'sthe JavaScripttechnology thattalksto anyWebapplication ontheserver ratherthan yourHTML formbeingsubmitted tothatapplication directly. What'sthe missingpiece?How toactuallyuse XMLHttpRequest.Since thisis criticalcode thatyou'lluse insomeform ineveryAjaxapplication youwrite,take a quicktour throughwhata basicrequest/responsemodel withAjaxlooks like.

Makinga request

Youhave yourshinynew XMLHttpRequestobject;now takeitfor aspin.First, you needa JavaScriptmethodthat yourWebpage cancall(like whenauser typesin textor selectsanoption fromamenu). Then,you'llfollow thesamebasic outlinein almostall ofyourAjax applications:

1.Get whateverdatayou needfromthe Webform.

2.Build theURLto connectto.

3.Open aconnectionto theserver.

4.Set upafunction fortheserver torunwhen it'sdone.

5.Send therequest.

Listing5 isa sampleofan Ajaxmethodthat doesthesevery things,inthis order:

Listing5. Makearequest withAjax

functioncallServer() {//Get thecityand statefromthe webformvarcity =document.getElementById("city").value;varstate =document.getElementById("state").value;//Only goonif therearevalues forbothfields

developerWorks®ibm.com/developerWorks

Introductionto Ajax

Page8 of14©Copyright IBMCorporation1994, 2008.Allrights reserved. if((city ==null)|| (city=="")) return;if((state ==null)|| (state=="")) return;

//Build theURLto connecttovarurl ="/scripts/getZipCode.php?city="+ escape(city)+"&state=" +escape(state);

//Open aconnectionto theserverxmlHttp.open("GET",url, true); //Setup afunctionfor theserverto runwhenit's donexmlHttp.onreadystatechange= updatePage; //Send therequestxmlHttp.send(null);} Alot ofthisis self-explanatory.Thefirst bitofthe codeusesbasic JavaScriptcode tograb thevaluesof afewform fields.Thenthe codesetsup aPHPscript asthe destinationto connectto.Notice howtheURL ofthescript isspecifiedand thenthe cityand state(fromthe form)areappended tothisusing simpleGETparameters. Next,a connectionisopened; here'sthefirst placeyousee XMLHttpRequestin actionagain. Themethodof connectionisindicated (GET),aswell astheURL to connectto. Thefinalparameter, whensetto true,requests anasynchronous connection(thus makingthisAjax). Ifyouused false,the codewouldwait around onthe serverwhenthe requestwasmade andnotcontinue untilaresponse was received.By settingthisto true,your userscanstill usetheform (andevencall otherJavaScript methods)whilethe serverisprocessing thisrequestin the background. Theonreadystatechangepropertyof xmlHttp(remember,that's yourinstance ofthe XMLHttpRequestobject)allows youtotell theserverwhat todowhen it doesfinishrunning (whichcouldbe infiveminutes orfivehours). Sincethecode isn'tgoing towaitaround fortheserver, you'llneedto lettheserver knowwhatto do soyou canrespondto it.Inthis case,aspecific method--called updatePage()-- willbe triggeredwhenthe serverisfinished processingyourrequest. Finally,send()iscalled withavalue ofnull.Since you'veaddedthe datatosend tothe server(thecity andstate)in therequestURL, youdon'tneed tosendanything inthe request.Sothis firesoffyour requestandthe servercando whatyouasked it todo. Ifyou don'tgetanything elseoutof this,noticehow straightforwardandsimple this is!Other thangettingthe asynchronousnatureof Ajaxintoyour head,thisis relativelysimple stuff.You'llappreciate howitfrees youupto concentrateoncool applicationsand interfacesratherthan complicatedHTTPrequest/response code. Thecode inListing5 isabout aseasyas itgets.The dataissimple textandcan be includedas partofthe requestURL.GET sendstherequest ratherthanthe more complicatedPOST. There'snoXML orcontentheaders toadd,no datatosend in thebody oftherequest --thisis AjaxUtopia,in otherwords. ibm.com/developerWorksdeveloperWorks®

Introductionto Ajax

©Copyright IBMCorporation1994, 2008.Allrights reserved.Page9 of14 Haveno fear;thingswill becomemorecomplicated asthisseries progresses.You'll learnhow tosendPOST requests,howto setrequestheaders andcontenttypes, howto encodeXMLin yourmessage,how toaddsecurity toyourrequest --thelist ispretty long!Don'tworry aboutthehard stufffornow; getyourhead aroundthe basics,and you'llsoonbuild upawhole arsenalofAjax tools.

Handlingthe response

Nowyou needtoactually dealwiththe server'sresponse.You reallyonlyneed to knowtwo thingsatthis point: •Don't doanythinguntil thexmlHttp.readyStatepropertyis equalto4. •The serverwillstuff it'sresponseinto thexmlHttp.responseText property. Thefirst ofthese-- readystates-- isgoingto takeupthe bulkofthe nextarticle; you'lllearn moreaboutthe stagesofan HTTPrequestthan youeverwanted to know.For now,ifyou simplycheckfor acertainvalue (4),thingswill work(andyou'll havesomething tolookforward tointhe nextarticle).The seconditem-- usingthe xmlHttp.responseTextpropertyto gettheserver's response--is easy.Listing6 showsan exampleofa methodthatthe servercancall basedonthe valuessentin

Listing5 .

Listing6. Handletheserver's response

functionupdatePage() {if(xmlHttp.readyState ==4){ varresponse =xmlHttp.responseText;document.getElementById("zipCode").value= response;}}

Again,this codeisn'tso difficultorcomplicated. Itwaitsfor theserverto callitwith theright readystateand thenusesthe valuethatthe serverreturns(in thiscase,the ZIPcode fortheuser-entered cityandstate) tosetthe valueofanother formfield. Theresult isthatthe zipCodefieldsuddenly appearswiththe ZIPcode-- butthe userneverhad toclicka button!.That's thedesktopapplication feelItalked about earlier.Responsiveness, adynamicfeel, andmore,all withalittle Ajaxcode. Observantreaders mightnoticethat thezipCodefieldis anormaltext field.Once theserver returnstheZIP codeandthe updatePage()methodsets thevalueof thatfield withthecity/state ZIPcode,users canoverridethe value.That'sintentional fortwo reasons:Tokeep thingsinthe examplesimpleand toshowyou that sometimesyou wantusersto beableto overridewhata serversays.Keep bothin mind;they're importantingood user-interfacedesign. developerWorks®ibm.com/developerWorks

Introductionto Ajax

Page10 of14©Copyright IBMCorporation1994, 2008.Allrights reserved.

Hookingin theWebform

Sowhat's left?Actually,not much.Youhave aJavaScriptmethod thatgrabs informationthat theuserput intoaform, sendsitto theserver,provides another JavaScriptmethod tolistenfor andhandlea response,andeven setsthevalue ofa fieldwhen thatresponsecomes back.Allthat's reallyleftis tocallthatfirst JavaScriptmethod andstartthe wholeprocess.You couldobviouslyadd abuttonto yourHTML form,butthat's pretty2001,don't youthink?Take advantageof

JavaScripttechnology likeinListing7 .

Listing7. Kickoffan Ajaxprocess

City:

State:

ZipCode:

Ifthis feelslikeyet onemorepiece offairlyroutine code,thenyou're right--it is! Whena userputsin anewvalue foreitherthe cityorstate field,thecallServer() methodfires offandthe Ajaxfunbegins. Startingtofeel likeyou'vegot ahandleon things?Good; that'stheidea!

Inconclusion

Atthis point,you'reprobably notreadyto gooutand writeyourfirst Ajaxapplication --at least,notunless you'rewillingto dosomereal digginginthe Resourcessection. However,you canstartto getthebasic ideaofhow theseapplicationswork anda basicunderstanding oftheXMLHttpRequestobject.In thearticlesto come,you'll learnto masterthisobject, howtohandle JavaScript-to-servercommunication,how towork withHTMLforms, andevenget ahandleon theDOM. Fornow, though,spendsome timethinkingabout justhowpowerful Ajax applicationscan be.Imaginea Webformthat respondstoyou notjustwhen you clicka button,butwhen youtypeinto afield,when youselectan optionfroma combobox...even whenyoudrag yourmousearound thescreen.Think about exactlywhat asynchronousmeans;think aboutJavaScriptcode runningandnot waitingonthe servertorespond toitsrequests. Whatsortsof problemscanyou run into?What areasdoyou watchoutfor? Andhowwill thedesignof yourforms changeto accountforthis newapproachin programming? Ifyou spendsomereal timewiththese issues,you'llbe betterservedthan just havingsome codeyoucan cut-and-pasteandthrow intoanapplication thatyou ibm.com/developerWorksdeveloperWorks®

Introductionto Ajax

©Copyright IBMCorporation1994, 2008.Allrights reserved.Page11 of14 reallydon't understand.Inthe nextarticle,you'll puttheseideas intopracticeand I'll giveyou thedetailson thecodeyou needtoreally makeapplicationslike thiswork.

So,until then,enjoythe possibilitiesofAjax.

developerWorks®ibm.com/developerWorks

Introductionto Ajax

Page12 of14©Copyright IBMCorporation1994, 2008.Allrights reserved.

Resources

Learn •" UseAjax withWebSpherePortal "(developerWorks, June2006)to improve portalperformance, createacleaner portalapplicationarchitecture, and--most important-- giveyourusers amuchmore responsiveportal. •AdaptivePath isone ofthecompanies ontheleading edgeofuser interface design;you canlearna tonaboutAjax byperusingtheir pages. •If you'recuriousabout wheretheterm Ajaxcamefrom, checkoutJesseJames Garrettandhis excellentarticles(like thisone )on Ajax. •You cangeta headstarton thenextarticle inthisseries, focusingonthe XMLHttpRequestobject,by checkingoutthis excellentarticle onthe

XMLHttpRequestobject.

•If youuseInternet Explorer,youcan getthescoop attheMicrosoftDeveloper

Network'sXML DeveloperCenter.

•Ajaxfor Javadevelopers:Build dynamicJavaapplications (developerWorks, September2005) introducesagroundbreaking approachtocreating dynamic Webapplication experiencesthatsolve thepage-reloaddilemma. •Ajaxfor Javadevelopers:Java objectserializationfor Ajax(developerWorks, October2005) showsyoufive waystoserialize datainAjax applications. •UsingAjax withPHPand Sajax(developerWorks,October 2005)isa tutorialfor thoseinterested indevelopingrich Webapplicationsthat dynamicallyupdate contentusing AjaxandPHP. •CallSOAP Webserviceswith AJAX,Part1: BuildtheWeb servicesclient (developerWorks,October 2005)showshow toimplementa Web browser-basedSOAP Webservicesclient usingtheAjax designpattern. •XMLMatters: BeyondtheDOM (developerWorks,May 2005)detailsthe DocumentObject Modelasa methodtobuild dynamicWebapplications. •Buildapps withAsynchronousJavaScript withXML,or AJAX(developerWorks, November2005) demonstrateshowto constructreal-time-validation-enabled

Webapplications withAJAX.

•Ajaxfor Javadevelopers:Ajax withDirectWeb Remoting(developerWorks, November2005) demonstrateshowto automatetheheavy-lifting ofAJAX. •The OSAFoundationhas awikithat surveysAJAX/JavaScript libraries. •XUL Planet'sobjectreference sectiondetailsXMLHttpRequest (nottomention allkinds ofotherXML objects,aswell asDOM,CSS, HTML,WebService, and

Windowsand Navigationobjects.

ibm.com/developerWorksdeveloperWorks®

Introductionto Ajax

©Copyright IBMCorporation1994, 2008.Allrights reserved.Page13 of14 •See oneofthe outstandingAjaxapplications onlineatFlickr.com. •GMail,from Google,isanother greatexampleof AjaxrevolutionizingWeb applications. •HeadRush Ajax(O'ReillyMedia, Inc.,February2006) takestheideas outlined inthis articleandseries andbringsthem (andalot more)toyou inthequotesdbs_dbs12.pdfusesText_18

[PDF] ajax pdf download

[PDF] ajax pdf response

[PDF] ajax pdf tutorial point

[PDF] ajax pdf upload

[PDF] ajax pdf viewer

[PDF] ajax php tutorial pdf

[PDF] ajax powder

[PDF] ajax replacement

[PDF] ajax request

[PDF] ajax tutorial

[PDF] ajax tutorial pdf download

[PDF] ajax tutorial pdf for beginners

[PDF] ajax tutorial pdf free download

[PDF] ajax tutorial pdf tutorialspoint

[PDF] ajax tutorial pdf w3schools