Web2.

0eAJAX
AugustodeCarvalhoFontes

Agenda

Web2.0
RichInternetApplications(RIA)
AJAX
Exemplo
AJAXToolkitseFrameworks
Concluso

Web2.0
OnomeWeb2.0foidadopelaOReillyMediaem2004
Novosserviosonline
BritannicaOnlineWikipedia
nytimes.comBlogs
SitespessoaisMySpace
abc.go.comYouTube
Yahoo!Directorydel.icio.us

Caractersticas
Webcomoumaplataforma
IntelignciaColetiva
Mashups
Melhorexperinciadousurio

Web2.0
Webcomoumaplataforma
Armazenamentoeprocessamentonoservidor
Ex:Writely,Flickr,GMail

Novasformasdelucro
Nohlanamentodeverses,o
aprimoramentocontnuo
Nohnecessidadedeportarparadiversas
plataformas
APIsOnline
GoogleMapsAPI,AmazonWebServices,eBayAPI

Web2.0
Web2.0

Web2.0
IntelignciaColetiva
Colaborao
Wikis
SourceForge.net
YouTube

Folksonomy
Metodologiaderecuperaodeinformao
Tags(rtulos)soassociadosdeformacolaborativa
Nataxonomiageralmenteosprpriosautoresassociamosrtulos

Ex:del.icio.us,flickr.com,last.fm,etc.

Web2.0
IntelignciaColetiva
FiltrosdeSPAMcolaborativos
Blogs

Mashups
Utilizacontedodemaisdeumafonteparacriarum
novoservio
AtravsdeumaAPIouWebFeeds(RSS,Atom,etc.)
Ex:HousingMaps(GoogleMaps+Craigslist)

Melhorexperinciadousurio
RichInternetApplications(RIA)

Web2.0
Web2.0

RichInternetApplication(RIA)
Incorporarusabilidadedasaplicaesemdesktop
paraaWeb
Oprogramarespondedeformaintuitivaerpida
Tudoacontecenaturalmente

AplicaesWebtradicionais
AWebfoioriginalmenteprojetadaparanavegaopor
documentosHTML
ModeloClique,aguardeerecarregue
Apginatransferidadoservidorparaoclientee
recarregadaacadaevento,enviodedadosou
navegao
Modelodecomunicaosncrono
Perdadecontexto

RichInternetApplication(RIA)
Modelosncrono
Cliente

T ran sm is so

Processamento

Tr an sm is so

Servidor

Tr an sm is so

Tempo

Atividadedousurio

Atividadedousurio

T ran sm is so

Atividadedousurio

Processamento

RichInternetApplication(RIA)
RichInternetApplication(RIA)
Aidianotorecente
JavaApplet(1995)
MacromediaFlash(1996)
JavaWebStart
DHTML
HTML+JavaScript+CSS+DOM

DHTMLcomIFrameoculto
Flex
Flash+comunicaoassncrona

AJAX
DHTML+XMLHttpRequest(comunicaoassncrona)

RichInternetApplication(RIA)
Modeloassncrono
Cliente
Atividadedousurio

o
T ran s m is s

Processamento

T ran s m is s

Exibio

T ran s m is s

Processamento

Servidor

Exibio

T ran s m is s

T ran s m is s

Tempo

Exibio

Processamento

Interao

Interao

T ran s m is s

Interao

Processamento

AJAX
AsynchronousJavaScriptandXML
Otermosurgiuemfevereirode2005noartigo
Ajax:ANewApproachtoWebApplicationsde
JesseJamesGarrett.

Exemplos
Tadalist
Amazon.comDiamondSearch
NovoYahooMailBeta
GoogleCalendar

AJAX
AJAX

AJAX
Caractersticas
Modeloassncrono
Interfacemaisnaturaleintuitiva
Atualizaoparcialdatela
Apenasoselementosquecontmnovasinformaes
soatualizados
Nohperdadecontexto

Fluxobaseadoemdados

AJAX
Usurio

Navegador

Servidor

1:VisitaumaaplicaoAJAX

2:HTML/JS/CSSiniciais

AJAX
Usurio

Event
Handler

1:Ao

Response
Handler

Servidor

2:Requisio

3:Processamento
4:Resposta

5:AtualizarInterface

AJAX
CasosdeusoparaAJAX
Validaoemtemporealcomlgicanoservidor
Ex:Verificardisponibilidadedeumlogindeusurio

Autocompletar
Ex:GoogleSuggest

OperaesMestreDetalhe
Ex:Carregamentodecomboboxes

Componentesdeinterfaceavanados(widgets)
Ex:rvores,menus,barradeprogresso.

Notificaoprovenientedoservidor
Simuladaatravsderequisiesperidicas

AJAX
TecnologiasUtilizadas
HTML/XHTML(Estrutura)
Maiornecessidadedeumdocumentobemformatado

CSS(Apresentao)
Permiteseparaodaapresentaododocumento(estilo)
PodeseralteradoporJavaScript

JavaScript(Comportamento)
Amplamenteutilizada
Utilizadopelagrandemaioriadosnavegadores.Noh
necessidadedeinstalaodeplugins

DOM
RepresentaaestruturadedocumentosXMLeHTML

AJAX
TecnologiasUtilizadas
HTTP,Formulrios
umarequisioHTTPcomum

Programaodoladodoservidor
Oservidoraindanecessrio
JSP,Servlets,JSF,Struts

XMLHttpRequest
ObjetoJavaScriptqueforneceacomunicao
assncronacomoservidor

AJAX
XMLHttpRequest
ObjetoJavaScript
Adotadopelosnavegadoresmodernos
PrimeiraimplementaonativanoMozilla1.0(2002)

AWorldWideWebConsortiumpublicouuma
especificaocomoWorkingDraftem5deabrilde
2006
NoInternetExplorerumcontroleActiveXchamado
MSXML
OIE7irsuportaroobjetoXMLHttpRequestdeformanativa

AJAX
XMLHttpRequest
Comunicasecomoservidorutilizandorequisies
HTTPcomuns:GET/POST
Permitecomunicaoassncrona
Funcionaaofundo
Nointerrompeaoperaodousurio

Otipodaresposta(ContentType)podeser:
text/xml
text/plain
text/json
text/javascript

AJAX
MtodosdoXMLHttpRequest
Mtodo

Descrio

open(method,URL,asyncFlag,
username,password)

AbreepreparaumarequisioHTTPidentificada
pelomtodoeURL.asynchFlagindicasea
comunicaodeveserassncronaouno.

setRequestHeader(label,value) AssociaumvaloraumcabealhoHTTPantesde

fazerarequisio.
send(postdata)

ExecutaarequisioHTTP.

getAllResponseHeaders()

RetornaumalistadetodososcabealhosHTTPda
resposta

getResponseHeader(label)

RetornaocabealhoHTTPassociadoaolabel

abort()

Interrompeumarequisioqueestsendo
processada.

AJAX
PropriedadesdoXMLHttpRequest
Propriedade

Descrio

onreadystatechange

InformaafunoJavaScriptquedeveserchamada
acadamudanadeestado

readystate

Estadoatualdarequisio,podeser:
0=noiniciada
1=iniciandoconexo
2=conexoestabelecida
3=ematividade(algumdadofoirecebido)
4=completa

status

StatusHTTPrecebidodoservidor
200=OK
403=Forbidden
500=InternalError
...

AJAX
PropriedadesdoXMLHttpRequest
Propriedade

Descrio

responseText

Representaotextual(string)dosdadosenviados
peloservidor

responseXML

RepresentaododocumentoXMLenviadopelo
servidor

statusText

Representaotextual(string)dostatusHTTP
recebidodoservidor(OK,NotFound,etc)

AJAX
APIDOM(DocumentObjectModel)
Osnavegadoresmantmumarepresentao
dosdocumentosqueestosendoexibidos
DisponvelpeloobjetoJavaScriptdocument

AAPIDOMpermitequecdigoJavaScript
alterearvoreDOMprogramaticamente
Exemplos:
Adicionarumanovalinhaaumatabela
AlterarocontedodeumaDIV
AlteraroestiloCSSdeumelemento

Exemplo
Validaoemtemporealpelo
servidor

AJAXToolkitseFrameworks
Tiposdesoluesdisponveishoje
BibliotecasJavaScript(ladodocliente)
FrameworksdechamadaremotaviaProxy
ComponentesJSFcomcomportamentoAJAX
Wrappers
TradutorJavaparaJavaScript
FrameworkscomextensoparaAJAX

AJAXToolkitseFrameworks
BibliotecasJavaScript(ladodocliente)
Podeserutilizadacomqualquertecnologiadolado
doservidor
Podemsercombinadascomoutrasbibliotecas
Cuidadeincompatibilidadesdebrowsers
UtilizaIFrameocultosenecessrio
Capturaeventosdenavegaocomoosbotes
avanarevoltar
Componentesdeinterfaceavanados(widgets)
APIJavaScriptmaisfcildeusarparacontrolede
eventos,erros,etc.
Ex:DojoToolkit,Rico,Script.aculo.us

AJAXToolkitseFrameworks
FrameworksdechamadaremotaviaProxy
SimilaraomodelodecomunicaoRPC
Arquiteturabaseadaemstubseskeletons

Oframeworkgeraostubdocliente(proxy)para
chamadasaocdigodoservidor
Fazomarshallingdetodososparmetros
Ex:DirectWebRemoting(DWR),JSONRPC
DWR2.0irsuportarAJAXReverso
ChamadaJavaScriptapartirdocdigoJava

AJAXToolkitseFrameworks
ComponentesJSFcomcomportamento
AJAX
Escondetodaacomplexidadedaprogramao
AJAX
OautornoprecisasaberJavaScript

ComponentesJSFsoreutilizveis
Ex:ajax4jsf,ICEfaces,DynaFaces

AJAXToolkitseFrameworks
Wrappers
Atualmenteexistemvriostoolkitscom
diferentescomponentesesintaxesdeuso
Empacota(wrap)oscomponentesvisuaisem
customtags(JSP)oucomponentesJSF
Tentaconsolidarasdiferentesbibliotecas
JavaScript(ladodocliente)
DependedebibliotecascomooDojo,DHTML
Goodies,Script.aculo.us.

Ex:jMarki

AJAXToolkitseFrameworks
TradutorJavaparaJavaScript
DesenvolveaaplicaoAJAXusandoapenas
cdigoJava
Quandoaaplicaoimplantada,converte
cdigoJavaparaJavaScript
HostedModepermitedepuraodocdigo
Ex:GoogleWebToolkit(GWT)

AJAXToolkitseFrameworks
FrameworkscomextensoparaAJAX
AlgunsFrameworksdedesenvolvimentode
aplicaoparaWebestotrazendo
comportamentonativoaoAJAX
Ex:RubyonRails,Echo2,Shale

Concluso
Prs
Interfacemaisintuitivaenatural
Fluxobaseadoemdados(noempginas)
Nonecessitadeplugins
Grandereduonacarganarede
Apenasosdadosrelevantesparaasolicitaodo
usuriosotrafegados

SoluoRIAmaisvivelatualmente
Diversostoolkitseframeworksestosurgindo

Concluso
Contras
Aumentodecomplexidade
PodeserresolvidocomcomponentesJSF

Cdigovisvelporhackers
Aindaexisteincompatibilidadedenavegadores
JavaScriptdifcildemanteredepurar
Existempoucosmodelosdearquiteturae
melhoresprticas
OsToolkitseFrameworksaindaestoimaturos
Amaioriaemversobeta

Links
Writely
http://www.writely.com/

Flickr
http://www.flickr.com/

GMail
http://www.gmail.com/

HousingMaps
http://www.housingmaps.com/

TadaList
http://www.tadalist.com/

AmazonDiamondSearch
http://www.amazon.com/gp/gsl/search/finder/1043928955
0300739?ie=UTF8&redirect=true&productGroupID=loose_diamonds

NovoYahooMailBeta
http://whatsnew.mail.yahoo.com/

GoogleCalendar
http://www.google.com/calendar/

Links
GoogleSuggest
http://www.google.com/webhp?complete=1&hl=en

DojoToolkit
http://dojotoolkit.com/

Rico
http://openrico.org/

Script.aculo.us
http://script.aculo.us/

DirectWebRemoting(DWR)
http://getahead.ltd.uk/dwr

JSONRPC
http://jsonrpc.org/

ajax4jsf
https://ajax4jsf.dev.java.net/

ICEfaces
http://www.icesoft.com/products/icefaces.html

Links
DynaFaces
https://jsfextensions.dev.java.net/nonav/mvn/slides.html

DHTMLGoodies
http://www.dhtmlgoodies.com/

jMarki
https://ajax.dev.java.net/

GoogleWebToolkit(GWT)
http://code.google.com/webtoolkit/

RubyonRails
http://www.rubyonrails.org/

Echo2
http://www.nextapp.com/platform/echo2/echo/

Shale
http://struts.apache.org/strutsshale/