O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Implementando MVC com AJAX

4.026 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
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

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/

×