Implementando MVC com AJAX
0 gostou1,237 visualizações
O documento discute implementações do padrão MVC usando Ajax. Aborda frameworks Javascript, melhores práticas do objeto XHR, anatomia de uma operação Ajax e implementação de MVC usando programação orientada a objetos em Javascript.
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
- 2. Frameworks
- 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.
- 16. Implementação MVC usando Ajax
- 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. Migração para web ...
- 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
- 25. Prototype-based
- 26. JSON (Javascript Object Notation)
- 27. Factory Vs Construtor Vs Prototype
- 29. Polimorfismo
- 30. Associação
- 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.