SlideShare une entreprise Scribd logo
1  sur  37
Télécharger pour lire hors ligne
Café com Tapioca 2007

      Implementação MVC usando Ajax

           Frameworks
           Melhores práticas do XHR
           Implementando MVC
           Javascript Orientado a Objetos




Christiano Milfont – cmilfont@gmail.com
Frameworks
Frameworks
● Um Framework Ajax utiliza as tecnologias CSS (camada de
formatação da apresentação), XHTML (camada de estrutura da
apresentação), XML (dados a serem manipulados), Javascript
(camada de controle), DOM ou JSON (especificações do
formato dos dados) , o objeto XMLHttpRequest (que fornece
conexões assíncronas) e extende essa tecnologias padrões
com componentes de eventos, efeitos, Drag'n'Drop, entre
outros.
●
  Os benefícios de se usar um Framework Ajax é o
encapsulamento da complexidade das tecnologias
necessárias, fornecendo um só mecanismo Cross Browser
que permita a utilização do ajax com acessibilidade
semelhante ao ambiente desktop além de facilitar o
tratamento dos dados nas as camadas físicas entre o lado
cliente e o lado servidor.
Tipos de Frameworks
●Javascript Multipurpose: frameworks que fornecessem
componentes sobre o conjunto de todas as tecnologias web
no lado cliente e mecanismos de acesso ao lado servidor,
como o encapsulamento do tratamento dos dados.
●Javascript Remote: frameworks que são especialistas no
encapsulamento do mecanismo de troca de objetos entre as
camadas físicas.

●
  Javascript Specialized: frameworks que são especialistas em
somente um determinado comportamento ou mecanismo do
conjunto de tecnologias web, como por exemplo:
especialistas em efeitos ou somente na extensão do
javascript.
Javascript Multipurpose
    Frameworks...


                          Javascript Remoting
                             Frameworks...




Javascript Specialised
   Frameworks...
Melhores práticas do XHR

1 Namespaces contra funções globais
2   Detecção otimizada
3   Bridge encapsula diferenças de Cross Browser
4   Delegação de eventos
5   New School suplanta Old School
6   Separação em camadas
7   Orientação a objetos contra prog. funcional
8   DOM contra innerHTML
Anatomia de uma operação Ajax ...
Anatomia de uma operação Ajax ...

1 Ocorre um evento no cliente
2   Um XHR é instanciado
3   A instância é configurada
4   Solicita uma conexão assíncrona
5   A requisição é processada pelo servidor
6   O servidor retorna um XML
7   O XHR chama o callback e repassa o XML
8   O HTML DOM processa o XML.
1. Ocorre um evento no cliente
●   Um evento mapeado é acionado no cliente:
2. Um XHR é instanciado

●Instancia uma versão do objeto XHR dependendo do
Browser, a Microsoft (criadora do objeto) tem algumas
implementações dependendo da versão do Internet Explorer.
3. A instância é configurada

●O método “open” do objeto XHR cria uma conexão e recebe
como parâmetros: o método de conexão (“POST” ou “GET”);
a “url” do servidor; e um booleano que indica se a conexão é
assíncrona (TRUE) ou síncrona (FALSE).

●
 Associa-se uma função “callback” que processará o
resultado do servidor.

●   Submete os dados caso a conexão seja POST.
4. Solicita uma conexão assíncrona

●Quando a propriedade readStatedo objeto XHR recebe o
valor 4 a conexão foi terminada, podemos processar
diretamente ou somente quando a propriedade status receber
o valor “200”.
5. A requisição é processada pelo
                     servidor
●
 O servidor processa uma requisição como outra qualquer e
devolve um XML ou um texto.


        6. O servidor retorna um XML ou
                    um texto
    ●É comum utilizar na resposta um texto com o objeto no
    formato JSON para ser processado na função callback.
7 e 8. Callback processa retorno
●
    A função callback processa o retorno utilizando DOM.
Métodos e propriedades do XHR
Status do readyState     Métodos
0: Não inicializado.     open(mode, url, boolean): inicializa a
1: Conexão estabelecida. conexão e recebe os parametros mode
2: Requisição recebida. (conexão), url e booleano (síncrono ou
3: Em processo.          assíncrono).
4: Finalizada.           send("string"): Null para GET ou uma
                         String dos parametros e valores para
                          o POST.
Atributos
readyState: Troca valores de 0 a 4 que indicam que está “Ready”.
Status: Códigos de status do response HTTP.
responseText: Processa a resposta como texto.
responseXML: Processa a resposta como um objeto XML.
onreadystatechange: Propriedade que recebe uma função que
 é invocada quando o evento readystatechange é disparado.
Implementação MVC usando Ajax
... a visão observa o
                 comportamento do
MVC Original         modelo para
                     renderizar a
                      interface ...

                       ... o controlador
                    responde a eventos e
                    solicita modificações
                         no modelo ...

               ... o modelo gerencia a
                 lógica de negócios e
               fornece API de acesso.
Migração para web ...
... a visão não
                    enxerga o
MVC Model 2    comportamento do
                    modelo ...


                      ... o controlador
                   assume parcialmente
                     a renderização da
                            visão ...

              ... o modelo gerencia a
                lógica de negócios e
              fornece API de acesso.
Struts ...




Se aplica a
WebWorks
 Mentawai
SpringFlow
  JSF ...
LoginAction                            Sem fronteiras
                                          entre as
              LoginForm                  camadas
                                         lógicas...
                          LoginVO



                                    LoginBO



                                              LoginDAO
                                                         DB
Back to the future...
   MVC Model 3?         ... a visão escuta
                           respostas do
                             modelo ...


                    ... o controlador devolve
                       responsbilidades da
                              visão...


                    ... o modelo gerencia a
                      lógica de negócios e
                    fornece API de acesso.
Javascript Orientado a Objetos




 Christiano Milfont
Introdução
“Procedural code gets information then makes decisions.
Object-oriented code tells objects to do things.”
                       Alec Sharp
Prototype-based
JSON
  (Javascript
Object Notation)
Factory Vs Construtor Vs Prototype
Private vs Public
Polimorfismo
Associação
Overloading e Overriding
Alternativa de Overloading
Herança via Object Masquerading
Herança via call e apply




call(Objeto, argumento1, argumento2, ...)
apply(Objeto, array-de-argumentos)
Herança via call e apply - cont.
Herança via Prototype
Para saber mais...
https://cejug.dev.java.net/

Contenu connexe

En vedette

A Iniciativa JEDI, O ensino de Java livre e gratuito
A Iniciativa JEDI, O ensino de Java livre e gratuitoA Iniciativa JEDI, O ensino de Java livre e gratuito
A Iniciativa JEDI, O ensino de Java livre e gratuitocejug
 
Design Patterns - Conhecendo os padrões de projeto
Design Patterns - Conhecendo os padrões de projetoDesign Patterns - Conhecendo os padrões de projeto
Design Patterns - Conhecendo os padrões de projetoVinicius Quaiato
 
Pug2009 documento final
Pug2009 documento finalPug2009 documento final
Pug2009 documento finalcejug
 
PUG 2009
PUG 2009PUG 2009
PUG 2009cejug
 
Rosalina rocha araújo moraes minicurriculo
Rosalina rocha araújo moraes   minicurriculoRosalina rocha araújo moraes   minicurriculo
Rosalina rocha araújo moraes minicurriculoRosalina Moraes
 
Testes de Unidade com Junit
Testes de Unidade com JunitTestes de Unidade com Junit
Testes de Unidade com Junitcejug
 
Anatomia do JSF – JavaServer Faces
Anatomia do JSF – JavaServer FacesAnatomia do JSF – JavaServer Faces
Anatomia do JSF – JavaServer Facescejug
 
Conhecendo os Padrões De Projetos
Conhecendo os Padrões De ProjetosConhecendo os Padrões De Projetos
Conhecendo os Padrões De Projetoscejug
 
Spring cloud + netflix oss
Spring cloud + netflix ossSpring cloud + netflix oss
Spring cloud + netflix ossFelipe Adorno
 

En vedette (9)

A Iniciativa JEDI, O ensino de Java livre e gratuito
A Iniciativa JEDI, O ensino de Java livre e gratuitoA Iniciativa JEDI, O ensino de Java livre e gratuito
A Iniciativa JEDI, O ensino de Java livre e gratuito
 
Design Patterns - Conhecendo os padrões de projeto
Design Patterns - Conhecendo os padrões de projetoDesign Patterns - Conhecendo os padrões de projeto
Design Patterns - Conhecendo os padrões de projeto
 
Pug2009 documento final
Pug2009 documento finalPug2009 documento final
Pug2009 documento final
 
PUG 2009
PUG 2009PUG 2009
PUG 2009
 
Rosalina rocha araújo moraes minicurriculo
Rosalina rocha araújo moraes   minicurriculoRosalina rocha araújo moraes   minicurriculo
Rosalina rocha araújo moraes minicurriculo
 
Testes de Unidade com Junit
Testes de Unidade com JunitTestes de Unidade com Junit
Testes de Unidade com Junit
 
Anatomia do JSF – JavaServer Faces
Anatomia do JSF – JavaServer FacesAnatomia do JSF – JavaServer Faces
Anatomia do JSF – JavaServer Faces
 
Conhecendo os Padrões De Projetos
Conhecendo os Padrões De ProjetosConhecendo os Padrões De Projetos
Conhecendo os Padrões De Projetos
 
Spring cloud + netflix oss
Spring cloud + netflix ossSpring cloud + netflix oss
Spring cloud + netflix oss
 

Similaire à Implementando MVC com AJAX

Apresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVCApresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVCZarathon Maia
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1infinitopublicidade
 
KnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida realKnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida realComunidade NetPonto
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkRafael Dohms
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesCI&T
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no FrontendHenrique Gogó
 
Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5Lucas Augusto Carvalho
 
Padrão Arquitetural MVC e suas aplicações para WEB
Padrão Arquitetural MVC e suas aplicações para WEBPadrão Arquitetural MVC e suas aplicações para WEB
Padrão Arquitetural MVC e suas aplicações para WEBRafael França
 
ASP.NET MVC - Alexandre Tarifa
ASP.NET MVC - Alexandre TarifaASP.NET MVC - Alexandre Tarifa
ASP.NET MVC - Alexandre Tarifaguestea329c
 
Treinamento Básico Sobre ASP.NET MVC
Treinamento Básico Sobre ASP.NET MVCTreinamento Básico Sobre ASP.NET MVC
Treinamento Básico Sobre ASP.NET MVCMichael Costa
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Julian Cesar
 
[CLPE] Novidades do Asp.net mvc 2
[CLPE] Novidades do Asp.net mvc 2[CLPE] Novidades do Asp.net mvc 2
[CLPE] Novidades do Asp.net mvc 2Felipe Pimentel
 
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EEJavaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EELoiane Groner
 

Similaire à Implementando MVC com AJAX (20)

Ajaxificando
AjaxificandoAjaxificando
Ajaxificando
 
Frameworks Ajax
Frameworks AjaxFrameworks Ajax
Frameworks Ajax
 
Apresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVCApresentação Java Web Si Ufc Quixadá - MVC
Apresentação Java Web Si Ufc Quixadá - MVC
 
Ajax O Objeto Xml Http Request Parte 1
Ajax   O Objeto Xml Http Request   Parte 1Ajax   O Objeto Xml Http Request   Parte 1
Ajax O Objeto Xml Http Request Parte 1
 
KnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida realKnockoutJS com ASP.NET MVC3: Utilização na vida real
KnockoutJS com ASP.NET MVC3: Utilização na vida real
 
PHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao FrameworkPHP e AJAX: do Request ao Framework
PHP e AJAX: do Request ao Framework
 
Tw Course Ajax 2007 Ap04
Tw Course Ajax 2007 Ap04Tw Course Ajax 2007 Ap04
Tw Course Ajax 2007 Ap04
 
Apache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentesApache Wicket - Desenvolvimento WEB orientado a componentes
Apache Wicket - Desenvolvimento WEB orientado a componentes
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no Frontend
 
Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5Palestra - Symfony Framework MVC PHP 5
Palestra - Symfony Framework MVC PHP 5
 
Padrão Arquitetural MVC e suas aplicações para WEB
Padrão Arquitetural MVC e suas aplicações para WEBPadrão Arquitetural MVC e suas aplicações para WEB
Padrão Arquitetural MVC e suas aplicações para WEB
 
Palestra ASP.NET MVC
Palestra ASP.NET MVCPalestra ASP.NET MVC
Palestra ASP.NET MVC
 
Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01Tw Dwr 2007 Ap01
Tw Dwr 2007 Ap01
 
ASP.NET MVC - Alexandre Tarifa
ASP.NET MVC - Alexandre TarifaASP.NET MVC - Alexandre Tarifa
ASP.NET MVC - Alexandre Tarifa
 
ASP.NET MVC
ASP.NET MVCASP.NET MVC
ASP.NET MVC
 
Treinamento Básico Sobre ASP.NET MVC
Treinamento Básico Sobre ASP.NET MVCTreinamento Básico Sobre ASP.NET MVC
Treinamento Básico Sobre ASP.NET MVC
 
Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)Desenvolvimento Front end (AngularJS e Bootstrap)
Desenvolvimento Front end (AngularJS e Bootstrap)
 
[CLPE] Novidades do Asp.net mvc 2
[CLPE] Novidades do Asp.net mvc 2[CLPE] Novidades do Asp.net mvc 2
[CLPE] Novidades do Asp.net mvc 2
 
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EEJavaone Brazil 2012: Integrando Ext JS 4 com Java EE
Javaone Brazil 2012: Integrando Ext JS 4 com Java EE
 
ApresentaçãO Mvc
ApresentaçãO MvcApresentaçãO Mvc
ApresentaçãO Mvc
 

Implementando MVC com AJAX

  • 1. Café com Tapioca 2007 Implementação MVC usando Ajax Frameworks Melhores práticas do XHR Implementando MVC Javascript Orientado a Objetos Christiano Milfont – cmilfont@gmail.com
  • 3. Frameworks ● Um Framework Ajax utiliza as tecnologias CSS (camada de formatação da apresentação), XHTML (camada de estrutura da apresentação), XML (dados a serem manipulados), Javascript (camada de controle), DOM ou JSON (especificações do formato dos dados) , o objeto XMLHttpRequest (que fornece conexões assíncronas) e extende essa tecnologias padrões com componentes de eventos, efeitos, Drag'n'Drop, entre outros. ● Os benefícios de se usar um Framework Ajax é o encapsulamento da complexidade das tecnologias necessárias, fornecendo um só mecanismo Cross Browser que permita a utilização do ajax com acessibilidade semelhante ao ambiente desktop além de facilitar o tratamento dos dados nas as camadas físicas entre o lado cliente e o lado servidor.
  • 4. Tipos de Frameworks ●Javascript Multipurpose: frameworks que fornecessem componentes sobre o conjunto de todas as tecnologias web no lado cliente e mecanismos de acesso ao lado servidor, como o encapsulamento do tratamento dos dados. ●Javascript Remote: frameworks que são especialistas no encapsulamento do mecanismo de troca de objetos entre as camadas físicas. ● Javascript Specialized: frameworks que são especialistas em somente um determinado comportamento ou mecanismo do conjunto de tecnologias web, como por exemplo: especialistas em efeitos ou somente na extensão do javascript.
  • 5. Javascript Multipurpose Frameworks... Javascript Remoting Frameworks... Javascript Specialised Frameworks...
  • 6. Melhores práticas do XHR 1 Namespaces contra funções globais 2 Detecção otimizada 3 Bridge encapsula diferenças de Cross Browser 4 Delegação de eventos 5 New School suplanta Old School 6 Separação em camadas 7 Orientação a objetos contra prog. funcional 8 DOM contra innerHTML
  • 7. Anatomia de uma operação Ajax ...
  • 8. Anatomia de uma operação Ajax ... 1 Ocorre um evento no cliente 2 Um XHR é instanciado 3 A instância é configurada 4 Solicita uma conexão assíncrona 5 A requisição é processada pelo servidor 6 O servidor retorna um XML 7 O XHR chama o callback e repassa o XML 8 O HTML DOM processa o XML.
  • 9. 1. Ocorre um evento no cliente ● Um evento mapeado é acionado no cliente:
  • 10. 2. Um XHR é instanciado ●Instancia uma versão do objeto XHR dependendo do Browser, a Microsoft (criadora do objeto) tem algumas implementações dependendo da versão do Internet Explorer.
  • 11. 3. A instância é configurada ●O método “open” do objeto XHR cria uma conexão e recebe como parâmetros: o método de conexão (“POST” ou “GET”); a “url” do servidor; e um booleano que indica se a conexão é assíncrona (TRUE) ou síncrona (FALSE). ● Associa-se uma função “callback” que processará o resultado do servidor. ● Submete os dados caso a conexão seja POST.
  • 12. 4. Solicita uma conexão assíncrona ●Quando a propriedade readStatedo objeto XHR recebe o valor 4 a conexão foi terminada, podemos processar diretamente ou somente quando a propriedade status receber o valor “200”.
  • 13. 5. A requisição é processada pelo servidor ● O servidor processa uma requisição como outra qualquer e devolve um XML ou um texto. 6. O servidor retorna um XML ou um texto ●É comum utilizar na resposta um texto com o objeto no formato JSON para ser processado na função callback.
  • 14. 7 e 8. Callback processa retorno ● A função callback processa o retorno utilizando DOM.
  • 15. Métodos e propriedades do XHR Status do readyState Métodos 0: Não inicializado. open(mode, url, boolean): inicializa a 1: Conexão estabelecida. conexão e recebe os parametros mode 2: Requisição recebida. (conexão), url e booleano (síncrono ou 3: Em processo. assíncrono). 4: Finalizada. send("string"): Null para GET ou uma String dos parametros e valores para o POST. Atributos readyState: Troca valores de 0 a 4 que indicam que está “Ready”. Status: Códigos de status do response HTTP. responseText: Processa a resposta como texto. responseXML: Processa a resposta como um objeto XML. onreadystatechange: Propriedade que recebe uma função que é invocada quando o evento readystatechange é disparado.
  • 17. ... a visão observa o comportamento do MVC Original modelo para renderizar a interface ... ... o controlador responde a eventos e solicita modificações no modelo ... ... o modelo gerencia a lógica de negócios e fornece API de acesso.
  • 19. ... a visão não enxerga o MVC Model 2 comportamento do modelo ... ... o controlador assume parcialmente a renderização da visão ... ... o modelo gerencia a lógica de negócios e fornece API de acesso.
  • 20. Struts ... Se aplica a WebWorks Mentawai SpringFlow JSF ...
  • 21. LoginAction Sem fronteiras entre as LoginForm camadas lógicas... LoginVO LoginBO LoginDAO DB
  • 22. Back to the future... MVC Model 3? ... a visão escuta respostas do modelo ... ... o controlador devolve responsbilidades da visão... ... o modelo gerencia a lógica de negócios e fornece API de acesso.
  • 23. Javascript Orientado a Objetos Christiano Milfont
  • 24. Introdução “Procedural code gets information then makes decisions. Object-oriented code tells objects to do things.” Alec Sharp
  • 27. Factory Vs Construtor Vs Prototype
  • 33. Herança via Object Masquerading
  • 34. Herança via call e apply call(Objeto, argumento1, argumento2, ...) apply(Objeto, array-de-argumentos)
  • 35. Herança via call e apply - cont.