Web-2.0-Technologies-with-jQuery-and-Ajax

Web2.0TechnologieswithjQueryandAjaxCorneliaGyörödi1,RobertGyörödi1,GeorgePecherle2,TamasLorand,3RoșuAlin41AssociateprofessorPhd.Eng.;2Phdstudent;3StudentDepartmentofComputerScience,FacultyofElectricalEngineeringandInformationTechnology,UniversityofOradea,Str.Universitatii1,410087,Oradea,Romania,E-mail:[e-mail],[e-mail],[e-mail],[e-mail],4S.C.TridentSRLTimişoaraAbstract.Thedevelopmentofaweb2.0portalusingAjaxandjQuerytechniques.ThispaperdescribesthedevelopmentofawebportalusingtechnologieslikePHP,jQueryandAjax.RegularwebportalssimplyusePHPandMySQL,whichisnotenoughtoprovidetheinteractivitytheuserneedsfromawebportal.jQuerytechniqueisdesignedtochangethewayyouwriteJavaScript,becauseitisverycompactandeasytouseandunderstand.jQueryisalsoverypopularbeingusedbyGoogle,IBM,NBC,Amazon,Wordpressandmanyothers.Ajaxtechniqueisusedtoincreaseresponsivenessandinteractivityofthewebpagesachievedbyexchangingsmallamountsofdata«behindthescenes»sothattheentirewebpagesdonothavetobereloadedeachtimethereisaneedtofetchdatafromtheserver.Keywords:webportals,JavaScript,jQuery,Ajax,PHP,MySQL,HTML,CSS,DOM,XMLI.INTRODUCTIONWeb2.0seemstobelikePinkFloydlyrics:“itcanmeandifferentthingstodifferentpeople,dependingonyourstateofmind”[1].SoWeb2.0forsomepeopleitmeansmovingsomeofthethinkingclientsidesomakingitmoreimmediate,buttheideaoftheWebasinteractionbetweenpeopleisreallywhattheWebis.Thatwaswhatitwasdesignedtobeasacollaborativespacewherepeoplecaninteract[2].Infact,itmeansusingthestandardwhichhasbeenproducedbyallthepeopleworkingonWeb1.0.Itmeansusingthedocumentobjectmodel,itmeansforHTMLandSVGandsoon,it'susingHTTP,soit'sbuildingstuffusingtheWebstandards,plusJavascriptofcourse.AccordingtoTimO'Reilly,Web2.0isthebusinessrevolutioninthecomputerindustrycausedbythemovetotheinternetasplatform,andanattempttounderstandtherulesforsuccessonthatnewplatform[3].Sometechnologyexperts,notablyTimBerners-Lee,havequestionedwhetheronecanusetheterminameaningfulway,sincemanyofthetechnologycomponentsofWeb2.0haveexistedsincethebeginningsoftheWorldWideWeb.Awebportalisasitethatprovidesasinglefunctionviaawebpageorsite.WebportalsoftenfunctionasapointofaccesstoinformationontheWorldWideWeb[14].ThefirstattemptistowritethewebportalinPHPandMySQLonly,howeverthewholeideaofthewebportalistobeinteractiveandprovidetheaccesibilitythatmostusersneed.Thisinteractivitycanbeachievedinaveryeasyandfashionableway,byusingacompactlanguagesuchasjQuery.jQuerytechnologyisalightweightJavaScriptlibrarythatemphasizesinteractionbetweenJavaScriptandHTML.ItwasreleasedinJanuary2006atBarCampNYCbyJohnResig.Itisfreeandopensourcesoftware[15].jQueryworkscloselywithAjax,whosemaincharacteristicistoloaddataonawebpagewithoutreloadingtheentirepage.TheadvantagesofAjaxincludeBandwidthusage,andseparationofdata,format,styleandfunction[6].OnedownsideisthatforsearchengineoptimizationofwebsitesusingAjax,youhavetoprovidepublicsitemaps.II.WEB2.0ANDTHERELATEDTECHNOLOGIESDemocracyandAjaxarethecoreelementsofWeb2.0[4].Theshortestdefinitionofitis:Web2.0ismadeofpeople[5].Thekeyaspectsofweb2.0are:-TheWebandallitsconnecteddevicesasoneglobalplatformofreusableservicesanddata-Dataconsumptionandremixingfromallsources,particularlyusergenerateddata-Continuousandseamlessupdateofsoftwareanddata,oftenveryrapidly-Richandinteractiveuserinterfaces-Architectureofparticipationthatencouragesusercontribution[5].11Fig.1.TheWeb2.0ArchitectureAjax,(AJAX-shorthandforAsynchronousJavaScriptandXML,)isadevelopmenttechniqueforcreatinginteractivewebapplications.Theintentistomakewebpagesfeelmoreresponsivebyexchangingsmallamountsofdatawiththeserverbehindthescenes,sothattheentirewebpagedoesnothavetobereloadedeachtimetheuserrequestsachange.Thisisintendedtoincreasethewebpage'sinteractivity,speed,andusability.MoreinformationaboutAjaxyoucanfindin[6],[7]or[8].TheXHR(XMLHttpRequest)objectisthecoreoftheAjaxengine.Itistheobjectthatenablesapagetogetdatafromorpostdatatotheserverasabackgroundrequest,whichmeansthatitdoesnotrefreshthebrowserduringthisprocess.BelowwepresenthowtheclassicandtheAJAXwebapplicationswork(Fig.3).Fig.2.ComparisonbetweenclassicandAJAXwebapplicationsjQueryisactuallyanopensourceJavaScriptlibrarythatsimplifiestheinteractionbetweenHTMLandJavaScript.Itisidealforprototyping,itiscompletelyunobtrusive,usesCSStolayerfunctionalityandithasaneasytoseparatebehavior.DaveMethvin,ChiefTechnologyOfficeratPCPitstop(awellknowncommunitywhereyoucangetcomputerhelp)says:“Youstartwith10linesofjQuerythatwouldhavebeen20linesoftediousDOMJavaScript.Bythetimeyouaredoneit'sdowntotwoorthreelinesanditcouldn'tgetanyshorterunlessitreadyourmind”[22].ThefocusofjQuerycanberesumedby“findingsomeelements”then“doingsomethingwiththem”[19].YoucanfindbelowanexampleofhowablockoftextinHTMLcanbemadetofadeinwitha“slow”effect(Fig.3).Fig.3.ThesimplicityofjQueryApplicationsthatactondataareafundamentalofcomputerscience.Historically,theseapplicationshavebeenwritteninwidevarietyofprogramminglanguages,withanequallywidevarietyofstoragemechanismsforthedata.Overtime,pro