AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias

Apresentação em tema: "AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias"— Transcrição da apresentação:

1 AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias
Ronny Fernandes da Cruz Tiago Coelho

2 O que é AJAX Asynchronous JavaScript and XML.
AJAX não é uma linguagem de programação, mas uma nova maneira de usar padrões existentes. AJAX é a arte de trocar dados com um servidor e atualizar partes de uma página web sem ter que recarregar toda a página, assim criando páginas rápidas e dinâmicas.

3 História 90s - Páginas são totalmente recarregadas
1995    - Java Applets (client-side) 1996    - Internet Explorer lança o <iframe> 1999    - MS cria o XMLHTTP ActiveX control no IE5             - mais tarde adotado pela Mozilla, Safari, Opera e outros como XMLHttpRequest JavaScript object 2000    - Utilizado no Outlook Web Access 2004    - Gmail 2005    - Google Maps 2005    - Surge o termo "AJAX" 2006    - W3C lança o primeiro rascunho do XMLHttpRequest

4 Princípios O NAVEGADOR HOSPEDA A APLICAÇÃO
- Navegador recebe documento mais complexos - Documento é mantido com o navegador por toda a sessão - Documento decide manipular ou passar informação ao servidor - Informações podem ser persistidas no cliente

5 Princípios O SERVIDOR FORNECE DADOS
- Menor fluxo de dados. Trafego de dados relevantes - Retorno pode ser código Javascript, XML ou Texto - Maior tráfego no início da sessão - Eficiência ao longo do tempo

6 Princípios INTERAÇÃO FLEXÍVEL E CONTÍNUA
- Maior rendimento na utilização da página (tempo) - Similaridade com aplicações Desktop - Melhora na usabilidade - Servidor trabalha junto com usuário, uma vez que há troca de dados, conforme o usuário interage com a interface

7 Princípios A CODIFICAÇÃO REQUER DISCIPLINA
- Código dura do início ao fim da sessão - Deve manter performance - Eficiência na comunicação com servidor - Deve abstrair o mundo real, sem que o usuário se preocupe com velocidade, comunicação ou performance

8 Desvantagens - Páginas sucessivas não são registradas no Histórico
- Páginas são difíceis de serem marcadas Favoritas - WebCrawlers não executam Javascript - Smartphones podem não suportar XMLHttpRequest - Pode haver um excesso de requisições ao servidor - Código complexo pode ser difícil de manter, debugar e testar

9 XMLHttpRequest     - O objeto de JavaScript pra realizar requisições sem recarregar a página     - Um dos parâmetros que recebe pra abrir uma conexão (método open()) é um boolean indicando se a requisição é sincrona ou asíncrona     - Requisições sincronas bloqueiam (travam) a página até a requisição concluir     - Se a requisição for asíncrona a página não é bloqueada e o cliente pode continuar navegando enquanto a requisição é realizada: isso é AJAX

10 XMLHttpRequest interface XMLHttpRequest : XMLHttpRequestEventTarget {   // event handler attributes            attribute Function onreadystatechange;   // states   const unsigned short UNSENT = 0;   const unsigned short OPENED = 1;   const unsigned short HEADERS_RECEIVED = 2;   const unsigned short LOADING = 3;   const unsigned short DONE = 4;   readonly attribute unsigned short readyState;   // request   void open(DOMString method, DOMString url);   void open(DOMString method, DOMString url, boolean async);   void open(DOMString method, DOMString url, boolean async, DOMString? user);   void open(DOMString method, DOMString url, boolean async, DOMString? user, DOMString? password);   void setRequestHeader(DOMString header, DOMString value);   void send();   void send(Document data);   void send([AllowAny] DOMString? data);   void abort();   // response   readonly attribute unsigned short status;   readonly attribute DOMString statusText;   DOMString getResponseHeader(DOMString header);   DOMString getAllResponseHeaders();   readonly attribute DOMString responseText;   readonly attribute Document responseXML; };

11 XMLHttpRequest

12 Bibliotecas Mais Utilizadas
- JQuery:     $.ajax(); - MooTools     new Ajax(); - Prototype     new Ajax.Request(); - Extjs     Ext.Ajax.request(); - Dojo     dojo.xhrPost() e dojo.xhrGet();

13 Exemplo de Código <html> <head> <script type="text/javascript"> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest)   {// code for IE7+, Firefox, Chrome, Opera, Safari   xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function() {   if (xmlhttp.readyState==4 && xmlhttp.status==200) {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;   } xmlhttp.open("GET","ajax_info.txt",true); xmlhttp.send(); </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html>

14 Exemplo Prático

15 Aplicações de Grande Porte

16 Aplicações de Grande Porte

17 Referências Wikipedia (en) W3Schools.com W3C
                  W3Schools.com          W3C         

18 AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias
Ronny Fernandes da Cruz Tiago Coelho