Download - Frameworks Ajax
![Page 1: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/1.jpg)
Frameworks Ajax
Porque, quando e como usar um Framework Ajax para melhorar a produtividade
![Page 2: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/2.jpg)
Agenda1. Apresentação!2. O que são Frameworks Ajax?3. Que tipos de Frameworks existem?4. Quais os benefícios de um Framework Ajax?5. Quais os requisitos de um Framework?
![Page 3: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/3.jpg)
Christiano MilfontDeveloper, Programmer, Speaker,
Blogger, ...http://www.milfont.org
Apresentação
![Page 4: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/4.jpg)
Frameworks Ajax
![Page 5: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/5.jpg)
Frameworks Ajax
![Page 6: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/6.jpg)
Anatomia do Ajax
1. Evento acionado no navegador2. Um XHR é instanciado3. A instância do XHR é configurada4. Uma solicitação com conexão assíncrona5. Requisição processada no servidor6. Retorno do servidor em XML ou texto7. XHR processa o retorno8. O HTML DOM processa o XML ou Texto
![Page 7: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/7.jpg)
Anatomia do Ajax
1. Ocorre um evento no cliente
![Page 8: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/8.jpg)
Anatomia do Ajax
Instancia uma versão do objeto XHR dependendo doBrowser, a Microsoft (criadora do objeto) tem algumasimplementações dependendo da versão do Internet Explorer.
2. Um XHR é instanciado
![Page 9: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/9.jpg)
Anatomia do Ajax3. A instância é configurada
O método “open” do objeto XHR cria uma conexão e recebecomo 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.
![Page 10: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/10.jpg)
Anatomia do Ajax4. 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”.
![Page 11: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/11.jpg)
Anatomia do Ajax5. 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.
![Page 12: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/12.jpg)
Anatomia do Ajax
A função callback processa o retorno utilizando DOM.
7 e 8. Callback processa retorno
![Page 13: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/13.jpg)
Anatomia do AjaxMétodos e propriedades do XHR
Status do readyState0: Não inicializado.1: Conexão estabelecida.2: Requisição recebida.3: Em processo.4: Finalizada.
Métodosopen(mode, url, boolean): inicializa aconexão e recebe os parametros mode(conexão), url e booleano (síncrono ouassíncrono).send("string"): Null para GET ou umaString dos parametros e valores parao POST.
AtributosreadyState: 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.
![Page 14: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/14.jpg)
Frameworks Ajax
![Page 15: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/15.jpg)
Frameworks Ajax
![Page 16: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/16.jpg)
Tipos de Frameworks
![Page 17: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/17.jpg)
Javascript Multipurpose 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.
Tipos de Frameworks
![Page 18: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/18.jpg)
Javascript Remote: frameworks que são especialistas no encapsulamento do mecanismo de troca de objetos entre as camadas físicas.
Javascript Remoting Frameworks
Tipos de Frameworks
![Page 19: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/19.jpg)
Javascript Specialised Frameworks
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.
Tipos de Frameworks
![Page 20: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/20.jpg)
Benefícios
O benefício de se usar um Framework Ajax é o encapsulamento da complexidade de manipulação 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.
![Page 21: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/21.jpg)
BenefíciosUm 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) e
JSON (outra especificação do formato dos dados); Javascript (camada de controle) por meio de DOM (modelo de árvore de objetos) e com o objeto XMLHttpRequest (que fornece conexões assíncronas).
Extende essa tecnologias padrões com componentes de eventos, efeitos, Drag'n'Drop, entre outros.
![Page 22: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/22.jpg)
Frameworks Ajax
![Page 23: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/23.jpg)
Frameworks Ajax
![Page 24: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/24.jpg)
Frameworks Ajax
![Page 25: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/25.jpg)
Frameworks Ajax
![Page 26: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/26.jpg)
Frameworks Ajax
![Page 27: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/27.jpg)
Frameworks Ajax
![Page 28: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/28.jpg)
Frameworks Ajax
![Page 29: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/29.jpg)
Frameworks Ajax
GRID
![Page 30: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/30.jpg)
Frameworks Ajax
Windows
![Page 31: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/31.jpg)
Frameworks Ajax
TabPanel
![Page 32: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/32.jpg)
Frameworks Ajax
TreePanel
![Page 33: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/33.jpg)
Frameworks Ajax
ComboBox
![Page 34: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/34.jpg)
Frameworks Ajax
Forms
![Page 35: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/35.jpg)
Frameworks Ajax
Menus e Toolbar
![Page 36: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/36.jpg)
Ajax Resourceshttp://www.ajaxian.com/ http://www.milfont.org/LivrosZAKAS, Nicholas. Professional JavaScript for Web Developers. Indianapolis, Indiana: Wiley Publishing Inc.,2005.ZAKAS, Nicholas; MCPEAK, Jeremy; FAWCETT, Joe. Professional Ajax. 2nd Edition. Indianapolis, Indiana: Wiley Publishing Inc.,2007.ASLESON, Ryan; SCHUTTA, Nathaniel. Foundations of Ajax. Berkeley, CA: Apress, 2006GROSS, Christian. Ajax Patterns and Best Practices. Berkeley, CA: Apress, 2006.CRANE, Dave; PASCARELLO, Eric; JAMES, Darren. Ajax in Action. Greenwich, CT: Manning Publications Co., 2006.
Referências
![Page 37: Frameworks Ajax](https://reader033.vdocuments.site/reader033/viewer/2022061120/546be375af795962298b4dea/html5/thumbnails/37.jpg)
Obrigado!
Dúvidas ?Christiano Milfont
http://www.milfont.org