Implementando MVC com AJAX
Upcoming SlideShare
Loading in...5
×
 

Implementando MVC com AJAX

on

  • 4,766 views

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

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

Statistics

Views

Total Views
4,766
Views on SlideShare
4,629
Embed Views
137

Actions

Likes
0
Downloads
44
Comments
0

4 Embeds 137

http://www.cejug.org 119
http://www.slideshare.net 11
http://cejug.silveiraneto.net 6
http://69.89.14.89 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Implementando MVC com AJAX Implementando MVC com AJAX Presentation Transcript

  • 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/