Implementando MVC com AJAX

4.016 visualizações

Publicada em

Palestra ministrada por Christiano Milfont, no Cafe Com Tapioca, evento do CEJUG no dia 12 de julho de 2007 - Implementando MVC com AJAX

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
4.016
No SlideShare
0
A partir de incorporações
0
Número de incorporações
143
Ações
Compartilhamentos
0
Downloads
46
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Implementando MVC com AJAX

  1. 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
  2. 2. Frameworks
  3. 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. 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. 5. Javascript Multipurpose Frameworks... Javascript Remoting Frameworks... Javascript Specialised Frameworks...
  6. 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. 7. Anatomia de uma operação Ajax ...
  8. 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. 9. 1. Ocorre um evento no cliente ● Um evento mapeado é acionado no cliente:
  10. 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. 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. 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. 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. 14. 7 e 8. Callback processa retorno ● A função callback processa o retorno utilizando DOM.
  15. 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.
  16. 16. Implementação MVC usando Ajax
  17. 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.
  18. 18. Migração para web ...
  19. 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. 20. Struts ... Se aplica a WebWorks Mentawai SpringFlow JSF ...
  21. 21. LoginAction Sem fronteiras entre as LoginForm camadas lógicas... LoginVO LoginBO LoginDAO DB
  22. 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. 23. Javascript Orientado a Objetos Christiano Milfont
  24. 24. Introdução “Procedural code gets information then makes decisions. Object-oriented code tells objects to do things.” Alec Sharp
  25. 25. Prototype-based
  26. 26. JSON (Javascript Object Notation)
  27. 27. Factory Vs Construtor Vs Prototype
  28. 28. Private vs Public
  29. 29. Polimorfismo
  30. 30. Associação
  31. 31. Overloading e Overriding
  32. 32. Alternativa de Overloading
  33. 33. Herança via Object Masquerading
  34. 34. Herança via call e apply call(Objeto, argumento1, argumento2, ...) apply(Objeto, array-de-argumentos)
  35. 35. Herança via call e apply - cont.
  36. 36. Herança via Prototype
  37. 37. Para saber mais... https://cejug.dev.java.net/

×