A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias

Apresentações semelhantes


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>

Let AJAX change this text

http://www.w3schools.com/ajax/tryit.asp filename=tryajax_first.", "width": "800" }

14 Exemplo Prático

15 Aplicações de Grande Porte

16 Aplicações de Grande Porte

17 Referências Wikipedia (en) W3Schools.com W3C
        http://en.wikipedia.org/wiki/Ajax_(programming)         http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o) W3Schools.com         http://www.w3schools.com/ajax/default.asp W3C         http://www.w3.org/TR/XMLHttpRequest/

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


Carregar ppt "AJAX Rodrigo Vronscki Ricardo Roger de Córdova Farias"

Apresentações semelhantes


Anúncios Google