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.

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

28. Private vs Public

29. Polimorfismo

30. Associação

31. Overloading e Overriding

32. Alternativa de Overloading

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.

36. Herança via Prototype

37. Para saber mais...
https://cejug.dev.java.net/